I’ll build this as an advanced WordPress single-post CSS file for RX Theme: article layout, typography, medical content blocks, author/reviewer boxes, TOC, breadcrumbs, related posts, comments, responsive design, accessibility, print, and dark-mode support.
Below is an advanced single.css for:
assets/static/static-css/pages/single.cssIt is designed for RX Theme single post pages, especially medical article pages like rxharun.com.
/*!
Theme Name: RX Theme
File: assets/static/static-css/pages/single.css
Purpose: Advanced single post page styling
Author: RxHarun
Version: 1.0.0
*/
/* =========================================================
01. SINGLE PAGE ROOT VARIABLES
========================================================= */
:root {
--rx-single-bg: var(--rx-color-bg, #ffffff);
--rx-single-surface: var(--rx-color-surface, #ffffff);
--rx-single-surface-soft: var(--rx-color-surface-soft, #f8fafc);
--rx-single-surface-muted: var(--rx-color-surface-muted, #f1f5f9);
--rx-single-text: var(--rx-color-text, #0f172a);
--rx-single-text-soft: var(--rx-color-text-soft, #334155);
--rx-single-text-muted: var(--rx-color-text-muted, #64748b);
--rx-single-heading: var(--rx-color-heading, #0f172a);
--rx-single-primary: var(--rx-color-primary, #0f766e);
--rx-single-primary-dark: var(--rx-color-primary-dark, #115e59);
--rx-single-primary-soft: var(--rx-color-primary-soft, #ccfbf1);
--rx-single-secondary: var(--rx-color-secondary, #2563eb);
--rx-single-danger: var(--rx-color-danger, #dc2626);
--rx-single-warning: var(--rx-color-warning, #d97706);
--rx-single-success: var(--rx-color-success, #16a34a);
--rx-single-info: var(--rx-color-info, #0284c7);
--rx-single-border: var(--rx-color-border, #e2e8f0);
--rx-single-border-strong: var(--rx-color-border-strong, #cbd5e1);
--rx-single-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--rx-single-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
--rx-single-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.12);
--rx-single-radius-xs: 4px;
--rx-single-radius-sm: 8px;
--rx-single-radius-md: 12px;
--rx-single-radius-lg: 18px;
--rx-single-radius-xl: 24px;
--rx-single-radius-pill: 999px;
--rx-single-container: 1180px;
--rx-single-content: 780px;
--rx-single-wide: 980px;
--rx-single-sidebar: 320px;
--rx-single-space-1: 0.25rem;
--rx-single-space-2: 0.5rem;
--rx-single-space-3: 0.75rem;
--rx-single-space-4: 1rem;
--rx-single-space-5: 1.25rem;
--rx-single-space-6: 1.5rem;
--rx-single-space-8: 2rem;
--rx-single-space-10: 2.5rem;
--rx-single-space-12: 3rem;
--rx-single-space-16: 4rem;
--rx-single-font-body: var(--rx-font-body, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
--rx-single-font-heading: var(--rx-font-heading, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
--rx-single-font-code: var(--rx-font-code, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
--rx-single-line-height: 1.75;
--rx-single-heading-line-height: 1.25;
--rx-single-transition: 180ms ease;
}
/* =========================================================
02. GLOBAL SINGLE PAGE WRAPPER
========================================================= */
.single-post,
.rx-single-page {
background: var(--rx-single-bg);
color: var(--rx-single-text);
}
.rx-single-wrap {
width: min(100% - 32px, var(--rx-single-container));
margin-inline: auto;
padding-block: var(--rx-single-space-8);
}
.rx-single-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--rx-single-space-8);
}
.rx-single-layout.has-sidebar {
grid-template-columns: minmax(0, 1fr) var(--rx-single-sidebar);
align-items: start;
}
.rx-single-main {
min-width: 0;
}
.rx-single-sidebar {
min-width: 0;
}
/* =========================================================
03. SINGLE ARTICLE CARD
========================================================= */
.rx-single-article {
width: 100%;
max-width: var(--rx-single-content);
margin-inline: auto;
background: var(--rx-single-surface);
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-xl);
box-shadow: var(--rx-single-shadow-sm);
overflow: hidden;
}
.rx-single-article.rx-single-wide {
max-width: var(--rx-single-wide);
}
.rx-single-article-inner {
padding: clamp(1.25rem, 3vw, 3rem);
}
.rx-single-article.has-featured-image .rx-single-article-inner {
padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
/* =========================================================
04. BREADCRUMBS
========================================================= */
.rx-breadcrumbs {
max-width: var(--rx-single-content);
margin: 0 auto var(--rx-single-space-5);
font-size: 0.875rem;
color: var(--rx-single-text-muted);
}
.rx-breadcrumbs ol,
.rx-breadcrumbs ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.rx-breadcrumbs li:not(:last-child)::after {
content: "/";
color: var(--rx-single-border-strong);
}
.rx-breadcrumbs a {
color: var(--rx-single-text-muted);
text-decoration: none;
}
.rx-breadcrumbs a:hover,
.rx-breadcrumbs a:focus {
color: var(--rx-single-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================================
05. CATEGORY AND POST LABELS
========================================================= */
.rx-single-kicker,
.rx-single-category-list {
display: flex;
flex-wrap: wrap;
gap: var(--rx-single-space-2);
margin-bottom: var(--rx-single-space-4);
}
.rx-single-category,
.rx-single-label,
.rx-post-label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 30px;
padding: 0.3rem 0.75rem;
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-primary-soft);
color: var(--rx-single-primary-dark);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
letter-spacing: 0.01em;
}
.rx-single-category:hover,
.rx-single-category:focus,
.rx-single-label:hover,
.rx-single-label:focus {
background: var(--rx-single-primary);
color: #ffffff;
}
/* =========================================================
06. SINGLE POST HEADER
========================================================= */
.rx-single-header {
margin-bottom: var(--rx-single-space-8);
}
.rx-single-title {
margin: 0;
color: var(--rx-single-heading);
font-family: var(--rx-single-font-heading);
font-size: clamp(2rem, 5vw, 3.75rem);
line-height: 1.08;
letter-spacing: -0.04em;
text-wrap: balance;
}
.rx-single-subtitle,
.rx-single-excerpt {
margin: var(--rx-single-space-5) 0 0;
color: var(--rx-single-text-soft);
font-size: clamp(1.05rem, 2vw, 1.25rem);
line-height: 1.7;
text-wrap: pretty;
}
.rx-single-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--rx-single-space-3) var(--rx-single-space-5);
margin-top: var(--rx-single-space-5);
color: var(--rx-single-text-muted);
font-size: 0.925rem;
}
.rx-single-meta-item {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.rx-single-meta-item svg,
.rx-single-meta-icon {
width: 1rem;
height: 1rem;
flex: 0 0 auto;
color: var(--rx-single-primary);
}
.rx-single-meta a {
color: inherit;
text-decoration: none;
}
.rx-single-meta a:hover,
.rx-single-meta a:focus {
color: var(--rx-single-primary);
text-decoration: underline;
text-underline-offset: 3px;
}
/* =========================================================
07. FEATURED IMAGE
========================================================= */
.rx-single-featured {
margin: 0;
background: var(--rx-single-surface-soft);
border-bottom: 1px solid var(--rx-single-border);
}
.rx-single-featured img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.rx-single-featured figcaption,
.wp-caption-text {
padding: 0.75rem 1rem;
color: var(--rx-single-text-muted);
font-size: 0.875rem;
line-height: 1.55;
text-align: center;
}
/* =========================================================
08. ARTICLE CONTENT TYPOGRAPHY
========================================================= */
.rx-single-content,
.entry-content {
color: var(--rx-single-text);
font-family: var(--rx-single-font-body);
font-size: clamp(1rem, 1.2vw, 1.08rem);
line-height: var(--rx-single-line-height);
overflow-wrap: break-word;
}
.rx-single-content > *:first-child,
.entry-content > *:first-child {
margin-top: 0;
}
.rx-single-content > *:last-child,
.entry-content > *:last-child {
margin-bottom: 0;
}
.rx-single-content p,
.entry-content p {
margin: 0 0 1.35em;
text-wrap: pretty;
}
.rx-single-content h1,
.rx-single-content h2,
.rx-single-content h3,
.rx-single-content h4,
.rx-single-content h5,
.rx-single-content h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
margin: 1.65em 0 0.65em;
color: var(--rx-single-heading);
font-family: var(--rx-single-font-heading);
font-weight: 800;
line-height: var(--rx-single-heading-line-height);
letter-spacing: -0.025em;
scroll-margin-top: 110px;
}
.rx-single-content h2,
.entry-content h2 {
position: relative;
padding-top: 0.35rem;
font-size: clamp(1.55rem, 3vw, 2.25rem);
}
.rx-single-content h2::before,
.entry-content h2::before {
content: "";
display: block;
width: 58px;
height: 4px;
margin-bottom: 0.8rem;
border-radius: var(--rx-single-radius-pill);
background: linear-gradient(90deg, var(--rx-single-primary), var(--rx-single-secondary));
}
.rx-single-content h3,
.entry-content h3 {
font-size: clamp(1.28rem, 2.4vw, 1.75rem);
}
.rx-single-content h4,
.entry-content h4 {
font-size: clamp(1.1rem, 2vw, 1.35rem);
}
.rx-single-content h5,
.entry-content h5 {
font-size: 1.05rem;
}
.rx-single-content h6,
.entry-content h6 {
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rx-single-text-muted);
}
.rx-single-content strong,
.entry-content strong {
color: var(--rx-single-heading);
font-weight: 800;
}
.rx-single-content em,
.entry-content em {
color: var(--rx-single-text-soft);
}
.rx-single-content small,
.entry-content small {
font-size: 0.875em;
color: var(--rx-single-text-muted);
}
/* =========================================================
09. ARTICLE LINKS
========================================================= */
.rx-single-content a,
.entry-content a {
color: var(--rx-single-primary-dark);
font-weight: 650;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--rx-single-primary) 45%, transparent);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition:
color var(--rx-single-transition),
text-decoration-color var(--rx-single-transition),
background-color var(--rx-single-transition);
}
.rx-single-content a:hover,
.rx-single-content a:focus,
.entry-content a:hover,
.entry-content a:focus {
color: var(--rx-single-secondary);
text-decoration-color: currentColor;
}
.rx-single-content a[target="_blank"]::after,
.entry-content a[target="_blank"]::after {
content: "↗";
display: inline-block;
margin-left: 0.18em;
font-size: 0.75em;
vertical-align: 0.1em;
}
/* =========================================================
10. LISTS
========================================================= */
.rx-single-content ul,
.rx-single-content ol,
.entry-content ul,
.entry-content ol {
margin: 0 0 1.5em 1.25em;
padding: 0;
}
.rx-single-content li,
.entry-content li {
margin-bottom: 0.65em;
padding-left: 0.2em;
}
.rx-single-content li::marker,
.entry-content li::marker {
color: var(--rx-single-primary);
font-weight: 800;
}
.rx-single-content ul ul,
.rx-single-content ol ol,
.rx-single-content ul ol,
.rx-single-content ol ul,
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
margin-top: 0.65em;
margin-bottom: 0.65em;
}
.rx-single-content dl,
.entry-content dl {
margin: 0 0 1.5em;
}
.rx-single-content dt,
.entry-content dt {
color: var(--rx-single-heading);
font-weight: 800;
}
.rx-single-content dd,
.entry-content dd {
margin: 0 0 1em 1.25rem;
color: var(--rx-single-text-soft);
}
/* =========================================================
11. BLOCKQUOTE AND QUOTES
========================================================= */
.rx-single-content blockquote,
.entry-content blockquote,
.wp-block-quote {
position: relative;
margin: 2rem 0;
padding: 1.35rem 1.5rem 1.35rem 1.75rem;
border-left: 5px solid var(--rx-single-primary);
border-radius: 0 var(--rx-single-radius-lg) var(--rx-single-radius-lg) 0;
background: var(--rx-single-surface-soft);
color: var(--rx-single-text-soft);
box-shadow: var(--rx-single-shadow-sm);
}
.rx-single-content blockquote::before,
.entry-content blockquote::before {
content: "“";
position: absolute;
top: -0.15rem;
left: 0.8rem;
color: color-mix(in srgb, var(--rx-single-primary) 20%, transparent);
font-family: Georgia, serif;
font-size: 4rem;
line-height: 1;
pointer-events: none;
}
.rx-single-content blockquote p,
.entry-content blockquote p {
margin-bottom: 0.85em;
}
.rx-single-content blockquote cite,
.entry-content blockquote cite {
display: block;
margin-top: 0.75rem;
color: var(--rx-single-text-muted);
font-size: 0.9rem;
font-style: normal;
font-weight: 700;
}
/* =========================================================
12. TABLES
========================================================= */
.rx-single-content table,
.entry-content table {
width: 100%;
margin: 2rem 0;
border-collapse: collapse;
border-spacing: 0;
overflow: hidden;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-md);
background: var(--rx-single-surface);
font-size: 0.95rem;
}
.rx-single-content thead,
.entry-content thead {
background: var(--rx-single-primary);
color: #ffffff;
}
.rx-single-content th,
.rx-single-content td,
.entry-content th,
.entry-content td {
padding: 0.9rem 1rem;
border: 1px solid var(--rx-single-border);
text-align: left;
vertical-align: top;
}
.rx-single-content th,
.entry-content th {
font-weight: 800;
}
.rx-single-content tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even) {
background: var(--rx-single-surface-soft);
}
.rx-table-scroll,
.wp-block-table {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.wp-block-table table {
min-width: 620px;
}
/* =========================================================
13. IMAGES, FIGURES, MEDIA
========================================================= */
.rx-single-content img,
.entry-content img {
max-width: 100%;
height: auto;
border-radius: var(--rx-single-radius-md);
}
.rx-single-content figure,
.entry-content figure {
margin: 2rem 0;
}
.rx-single-content figure img,
.entry-content figure img {
display: block;
margin-inline: auto;
}
.rx-single-content figcaption,
.entry-content figcaption {
margin-top: 0.65rem;
color: var(--rx-single-text-muted);
font-size: 0.875rem;
line-height: 1.55;
text-align: center;
}
.rx-single-content iframe,
.rx-single-content video,
.rx-single-content embed,
.rx-single-content object,
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object {
max-width: 100%;
border-radius: var(--rx-single-radius-md);
}
.rx-video-wrap,
.rx-embed-wrap,
.wp-block-embed__wrapper {
position: relative;
width: 100%;
overflow: hidden;
border-radius: var(--rx-single-radius-md);
background: #000000;
}
.rx-video-wrap::before,
.rx-embed-wrap::before,
.wp-block-embed__wrapper::before {
content: "";
display: block;
padding-top: 56.25%;
}
.rx-video-wrap iframe,
.rx-video-wrap video,
.rx-embed-wrap iframe,
.wp-block-embed__wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* =========================================================
14. CODE BLOCKS
========================================================= */
.rx-single-content code,
.entry-content code {
padding: 0.15rem 0.35rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-xs);
background: var(--rx-single-surface-soft);
color: #be123c;
font-family: var(--rx-single-font-code);
font-size: 0.9em;
}
.rx-single-content pre,
.entry-content pre,
.wp-block-code {
position: relative;
margin: 2rem 0;
padding: 1rem;
overflow-x: auto;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: #0f172a;
color: #e2e8f0;
font-family: var(--rx-single-font-code);
font-size: 0.92rem;
line-height: 1.7;
box-shadow: var(--rx-single-shadow-sm);
}
.rx-single-content pre code,
.entry-content pre code {
padding: 0;
border: 0;
background: transparent;
color: inherit;
font-size: inherit;
}
/* =========================================================
15. MEDICAL ARTICLE SPECIAL BLOCKS
========================================================= */
.rx-medical-summary,
.rx-key-points,
.rx-clinical-note,
.rx-evidence-box,
.rx-warning-box,
.rx-diagnosis-box,
.rx-treatment-box,
.rx-prevention-box,
.rx-faq-box {
margin: 2rem 0;
padding: clamp(1rem, 2vw, 1.5rem);
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface-soft);
box-shadow: var(--rx-single-shadow-sm);
}
.rx-medical-summary {
border-color: color-mix(in srgb, var(--rx-single-primary) 35%, var(--rx-single-border));
background: linear-gradient(
135deg,
color-mix(in srgb, var(--rx-single-primary-soft) 55%, #ffffff),
var(--rx-single-surface)
);
}
.rx-key-points {
border-left: 5px solid var(--rx-single-primary);
}
.rx-clinical-note {
border-left: 5px solid var(--rx-single-info);
background: color-mix(in srgb, var(--rx-single-info) 8%, #ffffff);
}
.rx-warning-box {
border-left: 5px solid var(--rx-single-danger);
background: color-mix(in srgb, var(--rx-single-danger) 7%, #ffffff);
}
.rx-treatment-box {
border-left: 5px solid var(--rx-single-success);
background: color-mix(in srgb, var(--rx-single-success) 7%, #ffffff);
}
.rx-diagnosis-box {
border-left: 5px solid var(--rx-single-secondary);
background: color-mix(in srgb, var(--rx-single-secondary) 7%, #ffffff);
}
.rx-prevention-box {
border-left: 5px solid var(--rx-single-warning);
background: color-mix(in srgb, var(--rx-single-warning) 8%, #ffffff);
}
.rx-box-title {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 0.75rem;
color: var(--rx-single-heading);
font-size: 1.1rem;
font-weight: 850;
line-height: 1.35;
}
.rx-box-title svg,
.rx-box-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--rx-single-primary);
flex: 0 0 auto;
}
.rx-warning-box .rx-box-icon,
.rx-warning-box .rx-box-title svg {
color: var(--rx-single-danger);
}
.rx-treatment-box .rx-box-icon,
.rx-treatment-box .rx-box-title svg {
color: var(--rx-single-success);
}
.rx-diagnosis-box .rx-box-icon,
.rx-diagnosis-box .rx-box-title svg {
color: var(--rx-single-secondary);
}
.rx-prevention-box .rx-box-icon,
.rx-prevention-box .rx-box-title svg {
color: var(--rx-single-warning);
}
.rx-box-content > *:last-child {
margin-bottom: 0;
}
/* =========================================================
16. MEDICAL DISCLAIMER
========================================================= */
.rx-medical-disclaimer {
margin: 2rem 0;
padding: 1rem 1.15rem;
border: 1px solid color-mix(in srgb, var(--rx-single-warning) 40%, var(--rx-single-border));
border-radius: var(--rx-single-radius-md);
background: color-mix(in srgb, var(--rx-single-warning) 9%, #ffffff);
color: var(--rx-single-text-soft);
font-size: 0.95rem;
line-height: 1.7;
}
.rx-medical-disclaimer strong {
color: var(--rx-single-warning);
}
/* =========================================================
17. TABLE OF CONTENTS
========================================================= */
.rx-toc {
margin: 2rem 0;
padding: 1.25rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface-soft);
box-shadow: var(--rx-single-shadow-sm);
}
.rx-toc-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-single-space-3);
margin: 0 0 0.9rem;
color: var(--rx-single-heading);
font-size: 1.05rem;
font-weight: 850;
}
.rx-toc-list {
margin: 0;
padding: 0;
list-style: none;
}
.rx-toc-list li {
margin: 0;
padding: 0;
}
.rx-toc-list a {
display: block;
padding: 0.55rem 0;
border-bottom: 1px dashed var(--rx-single-border);
color: var(--rx-single-text-soft);
font-size: 0.95rem;
font-weight: 650;
text-decoration: none;
}
.rx-toc-list li:last-child a {
border-bottom: 0;
}
.rx-toc-list a:hover,
.rx-toc-list a:focus {
color: var(--rx-single-primary);
padding-left: 0.35rem;
}
/* Sticky TOC for sidebar */
.rx-single-sidebar .rx-toc {
position: sticky;
top: 96px;
margin-top: 0;
}
/* =========================================================
18. AUTHOR, REVIEWER, EDITOR BOX
========================================================= */
.rx-author-box,
.rx-reviewer-box,
.rx-editor-box,
.rx-fact-check-box {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: var(--rx-single-space-4);
margin: 2rem 0;
padding: 1.25rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface);
box-shadow: var(--rx-single-shadow-sm);
}
.rx-author-avatar,
.rx-reviewer-avatar,
.rx-editor-avatar {
width: 76px;
height: 76px;
border-radius: 50%;
object-fit: cover;
background: var(--rx-single-surface-muted);
border: 3px solid var(--rx-single-primary-soft);
}
.rx-author-name,
.rx-reviewer-name,
.rx-editor-name {
margin: 0 0 0.25rem;
color: var(--rx-single-heading);
font-size: 1.05rem;
font-weight: 850;
}
.rx-author-role,
.rx-reviewer-role,
.rx-editor-role {
margin: 0 0 0.55rem;
color: var(--rx-single-primary);
font-size: 0.9rem;
font-weight: 750;
}
.rx-author-bio,
.rx-reviewer-bio,
.rx-editor-bio {
margin: 0;
color: var(--rx-single-text-soft);
font-size: 0.95rem;
line-height: 1.65;
}
.rx-author-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.85rem;
}
.rx-author-links a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.25rem 0.7rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-pill);
color: var(--rx-single-text-soft);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
}
.rx-author-links a:hover,
.rx-author-links a:focus {
border-color: var(--rx-single-primary);
background: var(--rx-single-primary);
color: #ffffff;
}
/* =========================================================
19. UPDATED, REVIEWED, MEDICAL ACCURACY META
========================================================= */
.rx-medical-meta-card {
margin: 1.5rem 0 2rem;
padding: 1rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-md);
background: var(--rx-single-surface-soft);
}
.rx-medical-meta-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-medical-meta-list li {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin: 0;
padding: 0.75rem;
border-radius: var(--rx-single-radius-sm);
background: var(--rx-single-surface);
}
.rx-medical-meta-label {
color: var(--rx-single-text-muted);
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rx-medical-meta-value {
color: var(--rx-single-heading);
font-size: 0.95rem;
font-weight: 750;
}
/* =========================================================
20. TAGS
========================================================= */
.rx-single-tags,
.rx-post-tags {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin: 2rem 0 0;
padding-top: 1.25rem;
border-top: 1px solid var(--rx-single-border);
}
.rx-single-tags-title {
width: 100%;
color: var(--rx-single-heading);
font-size: 0.95rem;
font-weight: 850;
}
.rx-single-tags a,
.rx-post-tags a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 0.25rem 0.75rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-surface-soft);
color: var(--rx-single-text-soft);
font-size: 0.85rem;
font-weight: 700;
text-decoration: none;
}
.rx-single-tags a::before,
.rx-post-tags a::before {
content: "#";
margin-right: 0.15rem;
color: var(--rx-single-primary);
}
.rx-single-tags a:hover,
.rx-single-tags a:focus,
.rx-post-tags a:hover,
.rx-post-tags a:focus {
border-color: var(--rx-single-primary);
background: var(--rx-single-primary);
color: #ffffff;
}
.rx-single-tags a:hover::before,
.rx-single-tags a:focus::before,
.rx-post-tags a:hover::before,
.rx-post-tags a:focus::before {
color: #ffffff;
}
/* =========================================================
21. SHARE BUTTONS
========================================================= */
.rx-share {
margin: 2rem 0;
padding: 1rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface-soft);
}
.rx-share-title {
margin: 0 0 0.85rem;
color: var(--rx-single-heading);
font-size: 0.95rem;
font-weight: 850;
}
.rx-share-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-share-list li {
margin: 0;
padding: 0;
}
.rx-share-button,
.rx-share-list a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
min-height: 38px;
padding: 0.45rem 0.9rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-surface);
color: var(--rx-single-text-soft);
font-size: 0.875rem;
font-weight: 800;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--rx-single-transition),
color var(--rx-single-transition),
border-color var(--rx-single-transition),
transform var(--rx-single-transition);
}
.rx-share-button:hover,
.rx-share-button:focus,
.rx-share-list a:hover,
.rx-share-list a:focus {
border-color: var(--rx-single-primary);
background: var(--rx-single-primary);
color: #ffffff;
transform: translateY(-1px);
}
/* =========================================================
22. POST NAVIGATION
========================================================= */
.rx-post-navigation,
.post-navigation {
max-width: var(--rx-single-content);
margin: var(--rx-single-space-8) auto 0;
}
.rx-post-nav-grid,
.nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rx-single-space-4);
}
.rx-post-nav-item,
.nav-previous,
.nav-next {
min-width: 0;
}
.rx-post-nav-card,
.nav-previous a,
.nav-next a {
display: flex;
flex-direction: column;
gap: 0.35rem;
min-height: 120px;
padding: 1.1rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface);
color: var(--rx-single-text);
text-decoration: none;
box-shadow: var(--rx-single-shadow-sm);
transition:
border-color var(--rx-single-transition),
box-shadow var(--rx-single-transition),
transform var(--rx-single-transition);
}
.rx-post-nav-card:hover,
.rx-post-nav-card:focus,
.nav-previous a:hover,
.nav-previous a:focus,
.nav-next a:hover,
.nav-next a:focus {
border-color: var(--rx-single-primary);
box-shadow: var(--rx-single-shadow-md);
transform: translateY(-2px);
}
.rx-post-nav-label,
.nav-subtitle {
color: var(--rx-single-primary);
font-size: 0.78rem;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rx-post-nav-title,
.nav-title {
color: var(--rx-single-heading);
font-size: 1rem;
font-weight: 850;
line-height: 1.45;
}
.nav-next {
text-align: right;
}
/* =========================================================
23. RELATED POSTS
========================================================= */
.rx-related-posts {
max-width: var(--rx-single-container);
margin: var(--rx-single-space-10) auto 0;
}
.rx-related-header {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--rx-single-space-4);
margin-bottom: var(--rx-single-space-5);
}
.rx-related-title {
margin: 0;
color: var(--rx-single-heading);
font-size: clamp(1.45rem, 3vw, 2rem);
line-height: 1.25;
letter-spacing: -0.025em;
}
.rx-related-subtitle {
margin: 0.3rem 0 0;
color: var(--rx-single-text-muted);
font-size: 0.95rem;
}
.rx-related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--rx-single-space-5);
}
.rx-related-card {
overflow: hidden;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface);
box-shadow: var(--rx-single-shadow-sm);
transition:
transform var(--rx-single-transition),
box-shadow var(--rx-single-transition),
border-color var(--rx-single-transition);
}
.rx-related-card:hover {
border-color: var(--rx-single-primary);
box-shadow: var(--rx-single-shadow-md);
transform: translateY(-3px);
}
.rx-related-thumb {
display: block;
background: var(--rx-single-surface-muted);
aspect-ratio: 16 / 9;
overflow: hidden;
}
.rx-related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 350ms ease;
}
.rx-related-card:hover .rx-related-thumb img {
transform: scale(1.045);
}
.rx-related-body {
padding: 1rem;
}
.rx-related-card-title {
margin: 0;
font-size: 1.05rem;
line-height: 1.4;
}
.rx-related-card-title a {
color: var(--rx-single-heading);
text-decoration: none;
}
.rx-related-card-title a:hover,
.rx-related-card-title a:focus {
color: var(--rx-single-primary);
}
.rx-related-meta {
margin-top: 0.65rem;
color: var(--rx-single-text-muted);
font-size: 0.85rem;
}
/* =========================================================
24. SIDEBAR WIDGETS
========================================================= */
.rx-single-sidebar .widget,
.rx-single-widget {
margin-bottom: var(--rx-single-space-5);
padding: 1.15rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface);
box-shadow: var(--rx-single-shadow-sm);
}
.rx-single-sidebar .widget-title,
.rx-single-widget-title {
margin: 0 0 1rem;
color: var(--rx-single-heading);
font-size: 1.05rem;
font-weight: 850;
}
.rx-single-sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.rx-single-sidebar li {
margin: 0;
padding: 0.65rem 0;
border-bottom: 1px solid var(--rx-single-border);
}
.rx-single-sidebar li:last-child {
border-bottom: 0;
}
.rx-single-sidebar a {
color: var(--rx-single-text-soft);
font-weight: 650;
text-decoration: none;
}
.rx-single-sidebar a:hover,
.rx-single-sidebar a:focus {
color: var(--rx-single-primary);
}
/* =========================================================
25. COMMENTS
========================================================= */
.rx-comments-area,
.comments-area {
max-width: var(--rx-single-content);
margin: var(--rx-single-space-10) auto 0;
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-xl);
background: var(--rx-single-surface);
box-shadow: var(--rx-single-shadow-sm);
}
.comments-title,
.comment-reply-title {
margin: 0 0 1.25rem;
color: var(--rx-single-heading);
font-size: clamp(1.35rem, 3vw, 1.85rem);
line-height: 1.3;
}
.comment-list {
margin: 0;
padding: 0;
list-style: none;
}
.comment-list .comment {
margin: 0 0 1.25rem;
padding: 1rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface-soft);
}
.comment-list .children {
margin: 1rem 0 0 1rem;
padding: 0;
list-style: none;
}
.comment-author {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--rx-single-heading);
font-weight: 850;
}
.comment-author .avatar {
width: 44px;
height: 44px;
border-radius: 50%;
}
.comment-metadata {
margin-top: 0.35rem;
color: var(--rx-single-text-muted);
font-size: 0.85rem;
}
.comment-content {
margin-top: 0.9rem;
color: var(--rx-single-text-soft);
line-height: 1.7;
}
.comment-reply-link {
display: inline-flex;
margin-top: 0.85rem;
padding: 0.35rem 0.75rem;
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-primary-soft);
color: var(--rx-single-primary-dark);
font-size: 0.85rem;
font-weight: 800;
text-decoration: none;
}
.comment-reply-link:hover,
.comment-reply-link:focus {
background: var(--rx-single-primary);
color: #ffffff;
}
/* =========================================================
26. COMMENT FORM
========================================================= */
.comment-form {
display: grid;
gap: 1rem;
}
.comment-form label {
display: block;
margin-bottom: 0.35rem;
color: var(--rx-single-heading);
font-size: 0.9rem;
font-weight: 800;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 0.85rem 1rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-md);
background: var(--rx-single-surface);
color: var(--rx-single-text);
font: inherit;
outline: none;
transition:
border-color var(--rx-single-transition),
box-shadow var(--rx-single-transition);
}
.comment-form textarea {
min-height: 160px;
resize: vertical;
}
.comment-form input:focus,
.comment-form textarea:focus {
border-color: var(--rx-single-primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--rx-single-primary) 15%, transparent);
}
.form-submit {
margin: 0;
}
.comment-form .submit,
.rx-button,
.rx-single-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.7rem 1.2rem;
border: 0;
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-primary);
color: #ffffff;
font-weight: 850;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--rx-single-transition),
transform var(--rx-single-transition),
box-shadow var(--rx-single-transition);
}
.comment-form .submit:hover,
.comment-form .submit:focus,
.rx-button:hover,
.rx-button:focus,
.rx-single-button:hover,
.rx-single-button:focus {
background: var(--rx-single-primary-dark);
transform: translateY(-1px);
box-shadow: var(--rx-single-shadow-md);
}
/* =========================================================
27. PAGINATION INSIDE POST
========================================================= */
.page-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem;
margin: 2rem 0;
padding-top: 1rem;
border-top: 1px solid var(--rx-single-border);
color: var(--rx-single-text-muted);
font-weight: 800;
}
.page-links a,
.page-links > span:not(.page-links-title) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
min-height: 36px;
border: 1px solid var(--rx-single-border);
border-radius: 50%;
background: var(--rx-single-surface);
color: var(--rx-single-text-soft);
text-decoration: none;
}
.page-links > span:not(.page-links-title),
.page-links a:hover,
.page-links a:focus {
border-color: var(--rx-single-primary);
background: var(--rx-single-primary);
color: #ffffff;
}
/* =========================================================
28. WORDPRESS BLOCK SUPPORT
========================================================= */
.wp-block-image.alignwide,
.wp-block-gallery.alignwide,
.wp-block-cover.alignwide,
.alignwide {
width: min(100vw - 32px, var(--rx-single-wide));
max-width: var(--rx-single-wide);
margin-left: 50%;
transform: translateX(-50%);
}
.wp-block-image.alignfull,
.wp-block-gallery.alignfull,
.wp-block-cover.alignfull,
.alignfull {
width: 100vw;
max-width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
.wp-block-cover {
border-radius: var(--rx-single-radius-lg);
overflow: hidden;
}
.wp-block-separator {
width: 100%;
height: 1px;
margin: 2rem 0;
border: 0;
background: var(--rx-single-border);
}
.wp-block-separator.is-style-wide {
height: 2px;
}
.wp-block-separator.is-style-dots {
height: auto;
background: transparent;
}
.wp-block-pullquote {
margin: 2rem 0;
padding: 1.5rem;
border-top: 4px solid var(--rx-single-primary);
border-bottom: 4px solid var(--rx-single-primary);
color: var(--rx-single-heading);
text-align: center;
}
.wp-block-button__link {
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-primary);
color: #ffffff;
font-weight: 850;
text-decoration: none;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
background: var(--rx-single-primary-dark);
}
.wp-block-columns {
gap: var(--rx-single-space-5);
}
/* =========================================================
29. ACCESSIBILITY
========================================================= */
.rx-single-content :focus-visible,
.entry-content :focus-visible,
.rx-single-article :focus-visible,
.rx-single-sidebar :focus-visible,
.comments-area :focus-visible {
outline: 3px solid color-mix(in srgb, var(--rx-single-primary) 65%, #ffffff);
outline-offset: 3px;
}
.rx-skip-to-content {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 9999;
padding: 0.75rem 1rem;
border-radius: var(--rx-single-radius-md);
background: var(--rx-single-primary);
color: #ffffff;
font-weight: 850;
text-decoration: none;
transform: translateY(-150%);
}
.rx-skip-to-content:focus {
transform: translateY(0);
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
.screen-reader-text:focus {
top: 5px;
left: 5px;
z-index: 100000;
display: block;
width: auto;
height: auto;
padding: 0.75rem 1rem;
clip: auto !important;
border-radius: var(--rx-single-radius-md);
background: var(--rx-single-primary);
color: #ffffff;
font-weight: 800;
text-decoration: none;
}
/* =========================================================
30. READING PROGRESS BAR
========================================================= */
.rx-reading-progress {
position: fixed;
top: 0;
left: 0;
z-index: 9998;
width: 100%;
height: 4px;
background: transparent;
pointer-events: none;
}
.rx-reading-progress-bar {
width: var(--rx-reading-progress-width, 0%);
height: 100%;
background: linear-gradient(90deg, var(--rx-single-primary), var(--rx-single-secondary));
transition: width 80ms linear;
}
/* =========================================================
31. BACK TO TOP
========================================================= */
.rx-back-to-top {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 999;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid var(--rx-single-border);
border-radius: 50%;
background: var(--rx-single-surface);
color: var(--rx-single-primary);
box-shadow: var(--rx-single-shadow-md);
text-decoration: none;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition:
opacity var(--rx-single-transition),
visibility var(--rx-single-transition),
transform var(--rx-single-transition);
}
.rx-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rx-back-to-top:hover,
.rx-back-to-top:focus {
background: var(--rx-single-primary);
color: #ffffff;
}
/* =========================================================
32. ADS / CTA / NEWSLETTER AREA
========================================================= */
.rx-single-ad,
.rx-single-cta,
.rx-newsletter-box {
margin: 2rem 0;
padding: clamp(1rem, 2vw, 1.5rem);
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface-soft);
text-align: center;
}
.rx-single-ad {
color: var(--rx-single-text-muted);
font-size: 0.85rem;
}
.rx-single-cta {
background:
radial-gradient(circle at top left, color-mix(in srgb, var(--rx-single-primary) 14%, transparent), transparent 35%),
linear-gradient(135deg, var(--rx-single-surface), var(--rx-single-surface-soft));
}
.rx-single-cta-title,
.rx-newsletter-title {
margin: 0 0 0.5rem;
color: var(--rx-single-heading);
font-size: clamp(1.25rem, 2.4vw, 1.65rem);
line-height: 1.3;
}
.rx-single-cta-text,
.rx-newsletter-text {
margin: 0 auto 1rem;
max-width: 620px;
color: var(--rx-single-text-soft);
}
/* =========================================================
33. SEARCH / NEWSLETTER FORM
========================================================= */
.rx-inline-form {
display: flex;
gap: 0.65rem;
max-width: 560px;
margin-inline: auto;
}
.rx-inline-form input[type="email"],
.rx-inline-form input[type="search"],
.rx-inline-form input[type="text"] {
flex: 1 1 auto;
min-width: 0;
padding: 0.8rem 1rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-surface);
color: var(--rx-single-text);
font: inherit;
}
.rx-inline-form button {
flex: 0 0 auto;
padding-inline: 1.25rem;
border: 0;
border-radius: var(--rx-single-radius-pill);
background: var(--rx-single-primary);
color: #ffffff;
font-weight: 850;
cursor: pointer;
}
.rx-inline-form input:focus {
border-color: var(--rx-single-primary);
outline: none;
box-shadow: 0 0 0 4px color-mix(in srgb, var(--rx-single-primary) 15%, transparent);
}
.rx-inline-form button:hover,
.rx-inline-form button:focus {
background: var(--rx-single-primary-dark);
}
/* =========================================================
34. UTILITY CLASSES FOR SINGLE PAGE
========================================================= */
.rx-single-center {
text-align: center;
}
.rx-single-muted {
color: var(--rx-single-text-muted);
}
.rx-single-lead {
color: var(--rx-single-text-soft);
font-size: 1.16rem;
line-height: 1.75;
}
.rx-single-divider {
height: 1px;
margin: 2rem 0;
background: var(--rx-single-border);
}
.rx-single-hidden {
display: none !important;
}
.rx-single-visually-soft {
opacity: 0.78;
}
.rx-single-card {
padding: 1.25rem;
border: 1px solid var(--rx-single-border);
border-radius: var(--rx-single-radius-lg);
background: var(--rx-single-surface);
box-shadow: var(--rx-single-shadow-sm);
}
/* =========================================================
35. DARK MODE SUPPORT
========================================================= */
@media (prefers-color-scheme: dark) {
:root {
--rx-single-bg: #020617;
--rx-single-surface: #0f172a;
--rx-single-surface-soft: #111827;
--rx-single-surface-muted: #1e293b;
--rx-single-text: #e5e7eb;
--rx-single-text-soft: #cbd5e1;
--rx-single-text-muted: #94a3b8;
--rx-single-heading: #f8fafc;
--rx-single-primary: #2dd4bf;
--rx-single-primary-dark: #5eead4;
--rx-single-primary-soft: rgba(45, 212, 191, 0.14);
--rx-single-border: rgba(148, 163, 184, 0.22);
--rx-single-border-strong: rgba(203, 213, 225, 0.35);
--rx-single-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--rx-single-shadow-md: 0 12px 28px rgba(0, 0, 0, 0.35);
--rx-single-shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.45);
}
.rx-single-content code,
.entry-content code {
color: #fda4af;
}
.rx-medical-summary,
.rx-clinical-note,
.rx-warning-box,
.rx-treatment-box,
.rx-diagnosis-box,
.rx-prevention-box,
.rx-medical-disclaimer {
background: var(--rx-single-surface-soft);
}
.rx-single-content tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even) {
background: rgba(255, 255, 255, 0.035);
}
}
/* Manual dark class support */
.rx-theme-dark .rx-single-page,
.rx-theme-dark.single-post {
--rx-single-bg: #020617;
--rx-single-surface: #0f172a;
--rx-single-surface-soft: #111827;
--rx-single-surface-muted: #1e293b;
--rx-single-text: #e5e7eb;
--rx-single-text-soft: #cbd5e1;
--rx-single-text-muted: #94a3b8;
--rx-single-heading: #f8fafc;
--rx-single-primary: #2dd4bf;
--rx-single-primary-dark: #5eead4;
--rx-single-primary-soft: rgba(45, 212, 191, 0.14);
--rx-single-border: rgba(148, 163, 184, 0.22);
--rx-single-border-strong: rgba(203, 213, 225, 0.35);
}
/* =========================================================
36. RESPONSIVE DESIGN
========================================================= */
@media (max-width: 1180px) {
.rx-single-layout.has-sidebar {
grid-template-columns: minmax(0, 1fr) 280px;
}
}
@media (max-width: 1024px) {
.rx-single-layout.has-sidebar {
grid-template-columns: 1fr;
}
.rx-single-sidebar {
max-width: var(--rx-single-content);
margin-inline: auto;
width: 100%;
}
.rx-single-sidebar .rx-toc {
position: static;
}
.rx-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.rx-single-wrap {
width: min(100% - 24px, var(--rx-single-container));
padding-block: var(--rx-single-space-5);
}
.rx-single-article {
border-radius: var(--rx-single-radius-lg);
}
.rx-single-article-inner {
padding: 1.25rem;
}
.rx-single-title {
letter-spacing: -0.03em;
}
.rx-single-meta {
gap: 0.65rem 1rem;
font-size: 0.875rem;
}
.rx-medical-meta-list {
grid-template-columns: 1fr;
}
.rx-author-box,
.rx-reviewer-box,
.rx-editor-box,
.rx-fact-check-box {
grid-template-columns: 1fr;
text-align: center;
}
.rx-author-avatar,
.rx-reviewer-avatar,
.rx-editor-avatar {
margin-inline: auto;
}
.rx-author-links {
justify-content: center;
}
.rx-post-nav-grid,
.nav-links {
grid-template-columns: 1fr;
}
.nav-next {
text-align: left;
}
.rx-related-header {
display: block;
}
.rx-related-grid {
grid-template-columns: 1fr;
}
.rx-inline-form {
flex-direction: column;
}
.rx-inline-form button {
min-height: 44px;
}
.comment-list .children {
margin-left: 0.5rem;
}
}
@media (max-width: 480px) {
.rx-single-wrap {
width: min(100% - 18px, var(--rx-single-container));
}
.rx-single-article-inner {
padding: 1rem;
}
.rx-single-content,
.entry-content {
font-size: 1rem;
}
.rx-single-content h2,
.entry-content h2 {
font-size: 1.45rem;
}
.rx-single-content table,
.entry-content table {
font-size: 0.875rem;
}
.rx-single-content th,
.rx-single-content td,
.entry-content th,
.entry-content td {
padding: 0.65rem;
}
.rx-share-list {
display: grid;
grid-template-columns: 1fr 1fr;
}
.rx-share-button,
.rx-share-list a {
width: 100%;
}
.rx-back-to-top {
width: 42px;
height: 42px;
}
}
/* =========================================================
37. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* =========================================================
38. PRINT STYLE
========================================================= */
@media print {
:root {
--rx-single-bg: #ffffff;
--rx-single-surface: #ffffff;
--rx-single-surface-soft: #ffffff;
--rx-single-text: #000000;
--rx-single-heading: #000000;
--rx-single-border: #cccccc;
}
body {
background: #ffffff !important;
color: #000000 !important;
}
.rx-single-wrap {
width: 100%;
padding: 0;
}
.rx-single-layout,
.rx-single-layout.has-sidebar {
display: block;
}
.rx-single-article,
.rx-comments-area,
.rx-related-posts,
.rx-post-navigation {
max-width: 100%;
border: 0;
box-shadow: none;
}
.rx-single-article-inner {
padding: 0;
}
.rx-single-sidebar,
.rx-share,
.rx-single-ad,
.rx-newsletter-box,
.rx-single-cta,
.rx-back-to-top,
.rx-reading-progress,
.comments-area,
.rx-related-posts,
.post-navigation,
.rx-post-navigation {
display: none !important;
}
.rx-single-content a,
.entry-content a {
color: #000000;
text-decoration: underline;
}
.rx-single-content a[href]::after,
.entry-content a[href]::after {
content: " (" attr(href) ")";
font-size: 0.8em;
font-weight: 400;
}
.rx-single-content h2,
.entry-content h2,
.rx-single-content h3,
.entry-content h3 {
break-after: avoid;
}
.rx-single-content table,
.entry-content table,
.rx-single-content figure,
.entry-content figure,
.rx-medical-summary,
.rx-key-points,
.rx-clinical-note,
.rx-warning-box,
.rx-diagnosis-box,
.rx-treatment-box,
.rx-prevention-box {
break-inside: avoid;
}
}For best structure, keep this file only for single post/page content CSS. Later, you can create separate files like:
assets/static/static-css/components/comments.css
assets/static/static-css/components/author-box.css
assets/static/static-css/components/toc.css
assets/static/static-css/components/related-posts.cssBut at this stage, keeping everything inside pages/single.css is okay for building the RX Theme faster.