I’ll build this as a critical CSS file for single post pages: above-the-fold layout, header, breadcrumbs, article hero, typography, accessibility, responsive rules, dark mode, print safety, and performance-friendly CSS variables.
Dear friend, create this file:
assets/static/static-css/critical/critical-single.css
This CSS is for single post/article page critical above-the-fold loading. It should contain only the CSS needed for first visible screen: header, navigation, breadcrumbs, article title, meta, featured image, content start, sidebar shell, accessibility, responsive, dark mode.
/*!
* RX Theme Critical Single CSS
* File: assets/static/static-css/critical/critical-single.css
* Purpose: Above-the-fold critical CSS for single post/article pages
* Author: RX Theme
* Version: 1.0.0
*/
/* =========================================================
01. ROOT TOKENS
========================================================= */
:root {
--rx-font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--rx-font-serif: Georgia, "Times New Roman", serif;
--rx-font-mono: Consolas, Monaco, "Courier New", monospace;
--rx-color-bg: #ffffff;
--rx-color-surface: #ffffff;
--rx-color-surface-soft: #f8fafc;
--rx-color-surface-muted: #f1f5f9;
--rx-color-text: #111827;
--rx-color-text-soft: #374151;
--rx-color-text-muted: #64748b;
--rx-color-heading: #0f172a;
--rx-color-primary: #0f766e;
--rx-color-primary-dark: #115e59;
--rx-color-primary-soft: #ccfbf1;
--rx-color-border: #e5e7eb;
--rx-color-border-strong: #cbd5e1;
--rx-color-link: #0f766e;
--rx-color-link-hover: #115e59;
--rx-color-danger: #dc2626;
--rx-color-warning: #f59e0b;
--rx-color-success: #16a34a;
--rx-color-info: #2563eb;
--rx-container-max: 1200px;
--rx-content-max: 760px;
--rx-sidebar-width: 330px;
--rx-space-1: 0.25rem;
--rx-space-2: 0.5rem;
--rx-space-3: 0.75rem;
--rx-space-4: 1rem;
--rx-space-5: 1.25rem;
--rx-space-6: 1.5rem;
--rx-space-8: 2rem;
--rx-space-10: 2.5rem;
--rx-space-12: 3rem;
--rx-space-16: 4rem;
--rx-radius-xs: 4px;
--rx-radius-sm: 6px;
--rx-radius-md: 10px;
--rx-radius-lg: 16px;
--rx-radius-xl: 24px;
--rx-radius-full: 999px;
--rx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--rx-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
--rx-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
--rx-line-height-body: 1.75;
--rx-line-height-heading: 1.2;
--rx-z-header: 100;
--rx-z-dropdown: 200;
--rx-z-skip: 9999;
--rx-transition-fast: 150ms ease;
--rx-transition-normal: 250ms ease;
}
/* =========================================================
02. BASE RESET
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-family: var(--rx-font-system);
font-size: 16px;
line-height: var(--rx-line-height-body);
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
margin: 0;
min-width: 320px;
background: var(--rx-color-bg);
color: var(--rx-color-text);
font-family: var(--rx-font-system);
font-size: 1rem;
line-height: var(--rx-line-height-body);
overflow-x: hidden;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
max-width: 100%;
}
img {
height: auto;
border-style: none;
vertical-align: middle;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
a {
color: var(--rx-color-link);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}
a:hover {
color: var(--rx-color-link-hover);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
outline: 3px solid var(--rx-color-primary);
outline-offset: 3px;
border-radius: var(--rx-radius-xs);
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
figure,
blockquote,
pre {
margin-top: 0;
}
p:last-child,
ul:last-child,
ol:last-child,
figure:last-child,
blockquote:last-child {
margin-bottom: 0;
}
/* =========================================================
03. ACCESSIBILITY
========================================================= */
.screen-reader-text,
.rx-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.screen-reader-text:focus,
.rx-sr-only:focus {
position: fixed !important;
top: 1rem;
left: 1rem;
z-index: var(--rx-z-skip);
width: auto;
height: auto;
padding: 0.75rem 1rem;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
background: var(--rx-color-primary);
color: #ffffff;
border-radius: var(--rx-radius-sm);
box-shadow: var(--rx-shadow-lg);
}
.rx-skip-link {
position: absolute;
top: -100px;
left: 1rem;
z-index: var(--rx-z-skip);
padding: 0.75rem 1rem;
background: var(--rx-color-primary);
color: #ffffff;
border-radius: var(--rx-radius-sm);
text-decoration: none;
box-shadow: var(--rx-shadow-lg);
}
.rx-skip-link:focus {
top: 1rem;
}
/* =========================================================
04. LAYOUT UTILITIES
========================================================= */
.rx-container,
.site-container,
.wrap {
width: min(100% - 2rem, var(--rx-container-max));
margin-inline: auto;
}
.rx-main {
width: 100%;
}
.rx-single-layout {
display: grid;
grid-template-columns: minmax(0, var(--rx-content-max)) minmax(260px, var(--rx-sidebar-width));
gap: clamp(1.5rem, 4vw, 3rem);
align-items: start;
width: min(100% - 2rem, var(--rx-container-max));
margin-inline: auto;
padding-block: clamp(1.5rem, 4vw, 3rem);
}
.rx-single-main {
min-width: 0;
}
.rx-single-sidebar {
min-width: 0;
}
.rx-full-width .rx-single-layout,
.single-post.no-sidebar .rx-single-layout,
.single.no-sidebar .rx-single-layout {
grid-template-columns: minmax(0, var(--rx-content-max));
justify-content: center;
}
/* =========================================================
05. SITE HEADER CRITICAL
========================================================= */
.site-header,
.rx-site-header {
position: relative;
z-index: var(--rx-z-header);
background: var(--rx-color-surface);
border-bottom: 1px solid var(--rx-color-border);
}
.rx-header-inner,
.site-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-space-4);
width: min(100% - 2rem, var(--rx-container-max));
min-height: 72px;
margin-inline: auto;
}
.site-branding,
.rx-site-branding {
display: flex;
align-items: center;
gap: var(--rx-space-3);
min-width: 0;
}
.custom-logo-link,
.rx-logo-link {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.custom-logo,
.rx-logo {
width: auto;
max-width: 180px;
max-height: 54px;
}
.site-title,
.rx-site-title {
margin: 0;
color: var(--rx-color-heading);
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
}
.site-title a,
.rx-site-title a {
color: inherit;
text-decoration: none;
}
.site-description,
.rx-site-description {
margin: 0.15rem 0 0;
color: var(--rx-color-text-muted);
font-size: 0.875rem;
line-height: 1.4;
}
/* =========================================================
06. NAVIGATION CRITICAL
========================================================= */
.main-navigation,
.rx-main-navigation {
display: flex;
align-items: center;
justify-content: flex-end;
}
.main-navigation ul,
.rx-main-navigation ul {
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0;
margin: 0;
list-style: none;
}
.main-navigation li,
.rx-main-navigation li {
position: relative;
}
.main-navigation a,
.rx-main-navigation a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.5rem 0.75rem;
color: var(--rx-color-text-soft);
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
border-radius: var(--rx-radius-sm);
transition: color var(--rx-transition-fast), background-color var(--rx-transition-fast);
}
.main-navigation a:hover,
.rx-main-navigation a:hover,
.main-navigation .current-menu-item > a,
.rx-main-navigation .current-menu-item > a {
color: var(--rx-color-primary-dark);
background: var(--rx-color-primary-soft);
}
.menu-toggle,
.rx-menu-toggle {
display: none;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
padding: 0.5rem;
color: var(--rx-color-text);
background: var(--rx-color-surface-soft);
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-sm);
}
/* =========================================================
07. BREADCRUMBS
========================================================= */
.rx-breadcrumbs,
.breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumb {
width: min(100% - 2rem, var(--rx-container-max));
margin: 1rem auto 0;
color: var(--rx-color-text-muted);
font-size: 0.875rem;
line-height: 1.5;
}
.rx-breadcrumbs a,
.breadcrumbs a,
.rank-math-breadcrumb a,
.yoast-breadcrumb a {
color: var(--rx-color-text-muted);
text-decoration: none;
}
.rx-breadcrumbs a:hover,
.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover,
.yoast-breadcrumb a:hover {
color: var(--rx-color-primary);
text-decoration: underline;
}
/* =========================================================
08. SINGLE ARTICLE HERO
========================================================= */
.rx-single-article,
.single-post .site-main article,
.single .site-main article {
min-width: 0;
background: transparent;
}
.rx-article-header,
.entry-header {
margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.rx-entry-category,
.entry-category,
.cat-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.9rem;
color: var(--rx-color-primary);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rx-entry-category a,
.entry-category a,
.cat-links a {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.6rem;
color: var(--rx-color-primary-dark);
background: var(--rx-color-primary-soft);
border-radius: var(--rx-radius-full);
text-decoration: none;
}
.rx-entry-title,
.entry-title,
.single-post h1.entry-title {
max-width: 900px;
margin: 0 0 1rem;
color: var(--rx-color-heading);
font-size: clamp(2rem, 5vw, 3.75rem);
font-weight: 850;
line-height: 1.08;
letter-spacing: -0.055em;
text-wrap: balance;
}
.rx-entry-excerpt,
.entry-summary,
.rx-single-excerpt {
max-width: 760px;
margin: 0 0 1.25rem;
color: var(--rx-color-text-soft);
font-size: clamp(1.05rem, 1.8vw, 1.25rem);
line-height: 1.7;
}
/* =========================================================
09. POST META
========================================================= */
.rx-entry-meta,
.entry-meta,
.post-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.45rem 0.9rem;
margin-bottom: clamp(1rem, 2vw, 1.5rem);
color: var(--rx-color-text-muted);
font-size: 0.925rem;
line-height: 1.5;
}
.rx-entry-meta a,
.entry-meta a,
.post-meta a {
color: var(--rx-color-text-soft);
font-weight: 600;
text-decoration: none;
}
.rx-entry-meta a:hover,
.entry-meta a:hover,
.post-meta a:hover {
color: var(--rx-color-primary);
text-decoration: underline;
}
.rx-author,
.byline {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.rx-author-avatar,
.avatar {
width: 32px;
height: 32px;
border-radius: var(--rx-radius-full);
}
.rx-reading-time,
.rx-updated-date,
.posted-on,
.updated-on {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
/* =========================================================
10. FEATURED IMAGE
========================================================= */
.rx-featured-image,
.post-thumbnail,
.entry-thumbnail {
position: relative;
overflow: hidden;
margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
background: var(--rx-color-surface-muted);
border-radius: var(--rx-radius-lg);
}
.rx-featured-image img,
.post-thumbnail img,
.entry-thumbnail img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--rx-color-surface-muted);
}
.rx-featured-caption,
.wp-caption-text {
margin-top: 0.5rem;
color: var(--rx-color-text-muted);
font-size: 0.875rem;
line-height: 1.5;
}
/* =========================================================
11. ARTICLE CONTENT START
========================================================= */
.rx-entry-content,
.entry-content,
.post-content {
color: var(--rx-color-text);
font-size: clamp(1rem, 1.1vw, 1.0625rem);
line-height: var(--rx-line-height-body);
overflow-wrap: break-word;
}
.rx-entry-content > * + *,
.entry-content > * + *,
.post-content > * + * {
margin-top: 1.25rem;
}
.rx-entry-content p,
.entry-content p,
.post-content p {
margin-bottom: 1.25rem;
}
.rx-entry-content h2,
.entry-content h2,
.post-content h2 {
margin-top: clamp(2rem, 4vw, 3rem);
margin-bottom: 1rem;
color: var(--rx-color-heading);
font-size: clamp(1.55rem, 3vw, 2.25rem);
font-weight: 800;
line-height: var(--rx-line-height-heading);
letter-spacing: -0.035em;
text-wrap: balance;
}
.rx-entry-content h3,
.entry-content h3,
.post-content h3 {
margin-top: 2rem;
margin-bottom: 0.85rem;
color: var(--rx-color-heading);
font-size: clamp(1.3rem, 2vw, 1.75rem);
font-weight: 750;
line-height: var(--rx-line-height-heading);
letter-spacing: -0.025em;
}
.rx-entry-content h4,
.entry-content h4,
.post-content h4 {
margin-top: 1.75rem;
margin-bottom: 0.75rem;
color: var(--rx-color-heading);
font-size: 1.2rem;
font-weight: 750;
line-height: 1.3;
}
.rx-entry-content a,
.entry-content a,
.post-content a {
color: var(--rx-color-link);
font-weight: 600;
}
.rx-entry-content strong,
.entry-content strong,
.post-content strong {
color: var(--rx-color-heading);
font-weight: 750;
}
.rx-entry-content ul,
.rx-entry-content ol,
.entry-content ul,
.entry-content ol,
.post-content ul,
.post-content ol {
padding-left: 1.4rem;
margin-bottom: 1.25rem;
}
.rx-entry-content li + li,
.entry-content li + li,
.post-content li + li {
margin-top: 0.45rem;
}
/* =========================================================
12. MEDICAL ARTICLE SPECIAL BLOCKS
========================================================= */
.rx-medical-disclaimer,
.rx-clinical-note,
.rx-key-points,
.rx-warning-box,
.rx-info-box,
.rx-summary-box {
margin: 1.5rem 0;
padding: clamp(1rem, 2vw, 1.25rem);
border: 1px solid var(--rx-color-border);
border-left: 5px solid var(--rx-color-primary);
border-radius: var(--rx-radius-md);
background: var(--rx-color-surface-soft);
box-shadow: var(--rx-shadow-sm);
}
.rx-warning-box {
border-left-color: var(--rx-color-warning);
}
.rx-danger-box {
border-left-color: var(--rx-color-danger);
}
.rx-success-box {
border-left-color: var(--rx-color-success);
}
.rx-info-box {
border-left-color: var(--rx-color-info);
}
.rx-medical-disclaimer > :first-child,
.rx-clinical-note > :first-child,
.rx-key-points > :first-child,
.rx-warning-box > :first-child,
.rx-info-box > :first-child,
.rx-summary-box > :first-child {
margin-top: 0;
}
.rx-medical-disclaimer > :last-child,
.rx-clinical-note > :last-child,
.rx-key-points > :last-child,
.rx-warning-box > :last-child,
.rx-info-box > :last-child,
.rx-summary-box > :last-child {
margin-bottom: 0;
}
/* =========================================================
13. TABLE OF CONTENTS CRITICAL
========================================================= */
.rx-toc,
.rx-table-of-contents,
.ez-toc-container,
.rank-math-toc-block {
margin: 1.5rem 0;
padding: 1.1rem;
background: var(--rx-color-surface-soft);
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-md);
}
.rx-toc-title,
.rx-table-of-contents-title,
.ez-toc-title {
margin: 0 0 0.75rem;
color: var(--rx-color-heading);
font-size: 1rem;
font-weight: 800;
line-height: 1.3;
}
.rx-toc ul,
.rx-table-of-contents ul,
.ez-toc-container ul,
.rank-math-toc-block ul {
padding-left: 1.1rem;
margin: 0;
}
.rx-toc li,
.rx-table-of-contents li,
.ez-toc-container li,
.rank-math-toc-block li {
margin-top: 0.45rem;
}
.rx-toc a,
.rx-table-of-contents a,
.ez-toc-container a,
.rank-math-toc-block a {
color: var(--rx-color-text-soft);
text-decoration: none;
}
.rx-toc a:hover,
.rx-table-of-contents a:hover,
.ez-toc-container a:hover,
.rank-math-toc-block a:hover {
color: var(--rx-color-primary);
text-decoration: underline;
}
/* =========================================================
14. SIDEBAR CRITICAL SHELL
========================================================= */
.rx-single-sidebar,
.widget-area,
.sidebar {
color: var(--rx-color-text-soft);
}
.rx-single-sidebar .widget,
.widget-area .widget,
.sidebar .widget {
margin-bottom: 1.25rem;
padding: 1.1rem;
background: var(--rx-color-surface);
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-md);
box-shadow: var(--rx-shadow-sm);
}
.widget-title,
.rx-widget-title {
margin: 0 0 0.85rem;
color: var(--rx-color-heading);
font-size: 1.05rem;
font-weight: 800;
line-height: 1.3;
}
.widget ul {
padding-left: 1.1rem;
margin: 0;
}
.widget li + li {
margin-top: 0.5rem;
}
.widget a {
color: var(--rx-color-text-soft);
text-decoration: none;
}
.widget a:hover {
color: var(--rx-color-primary);
text-decoration: underline;
}
/* =========================================================
15. SEARCH FORM CRITICAL
========================================================= */
.search-form,
.rx-search-form {
display: flex;
gap: 0.5rem;
width: 100%;
}
.search-field,
.rx-search-field {
min-width: 0;
flex: 1;
min-height: 44px;
padding: 0.65rem 0.8rem;
color: var(--rx-color-text);
background: var(--rx-color-surface);
border: 1px solid var(--rx-color-border-strong);
border-radius: var(--rx-radius-sm);
}
.search-submit,
.rx-search-submit {
min-height: 44px;
padding: 0.65rem 0.9rem;
color: #ffffff;
font-weight: 700;
background: var(--rx-color-primary);
border: 1px solid var(--rx-color-primary);
border-radius: var(--rx-radius-sm);
}
.search-submit:hover,
.rx-search-submit:hover {
background: var(--rx-color-primary-dark);
border-color: var(--rx-color-primary-dark);
}
/* =========================================================
16. BUTTONS
========================================================= */
.rx-button,
.button,
.wp-block-button__link,
.more-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.65rem 1rem;
color: #ffffff;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
background: var(--rx-color-primary);
border: 1px solid var(--rx-color-primary);
border-radius: var(--rx-radius-sm);
transition: background-color var(--rx-transition-fast), border-color var(--rx-transition-fast), transform var(--rx-transition-fast);
}
.rx-button:hover,
.button:hover,
.wp-block-button__link:hover,
.more-link:hover {
color: #ffffff;
background: var(--rx-color-primary-dark);
border-color: var(--rx-color-primary-dark);
transform: translateY(-1px);
}
/* =========================================================
17. WORDPRESS BLOCK START
========================================================= */
.wp-block-image {
margin: 1.5rem 0;
}
.wp-block-image img {
border-radius: var(--rx-radius-md);
}
.wp-block-quote,
blockquote {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
color: var(--rx-color-text-soft);
background: var(--rx-color-surface-soft);
border-left: 5px solid var(--rx-color-primary);
border-radius: var(--rx-radius-sm);
}
.wp-block-quote p,
blockquote p {
margin-bottom: 0.75rem;
font-size: 1.05rem;
line-height: 1.7;
}
.wp-block-quote cite,
blockquote cite {
color: var(--rx-color-text-muted);
font-size: 0.9rem;
font-style: normal;
}
.wp-block-table {
overflow-x: auto;
margin: 1.5rem 0;
}
.wp-block-table table,
.entry-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
.wp-block-table th,
.wp-block-table td,
.entry-content th,
.entry-content td {
padding: 0.75rem;
text-align: left;
border: 1px solid var(--rx-color-border);
}
.wp-block-table th,
.entry-content th {
color: var(--rx-color-heading);
font-weight: 800;
background: var(--rx-color-surface-soft);
}
/* =========================================================
18. CODE / PRE
========================================================= */
code,
kbd,
samp {
font-family: var(--rx-font-mono);
font-size: 0.925em;
}
code {
padding: 0.15em 0.35em;
background: var(--rx-color-surface-muted);
border-radius: var(--rx-radius-xs);
}
pre {
overflow-x: auto;
margin: 1.5rem 0;
padding: 1rem;
color: #e5e7eb;
background: #0f172a;
border-radius: var(--rx-radius-md);
}
pre code {
padding: 0;
color: inherit;
background: transparent;
}
/* =========================================================
19. ADS / EMBED PLACEHOLDER SAFETY
========================================================= */
.rx-ad,
.rx-ad-slot,
.adsbygoogle,
.rx-embed,
.wp-block-embed {
max-width: 100%;
}
.rx-ad,
.rx-ad-slot {
display: block;
min-height: 90px;
margin: 1.5rem 0;
background: var(--rx-color-surface-soft);
border: 1px dashed var(--rx-color-border-strong);
border-radius: var(--rx-radius-md);
}
.rx-embed,
.wp-block-embed {
margin: 1.5rem 0;
}
.rx-embed iframe,
.wp-block-embed iframe {
width: 100%;
border: 0;
border-radius: var(--rx-radius-md);
}
/* =========================================================
20. AUTHOR BOX START
========================================================= */
.rx-author-box,
.author-box {
display: flex;
gap: 1rem;
margin: 2rem 0;
padding: 1.25rem;
background: var(--rx-color-surface-soft);
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-lg);
}
.rx-author-box img,
.author-box img {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: var(--rx-radius-full);
}
.rx-author-box-title,
.author-box-title {
margin: 0 0 0.35rem;
color: var(--rx-color-heading);
font-size: 1.1rem;
font-weight: 800;
}
/* =========================================================
21. TAGS / SHARE START
========================================================= */
.rx-post-tags,
.tags-links,
.rx-share {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.5rem 0;
}
.rx-post-tags a,
.tags-links a {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0.35rem 0.7rem;
color: var(--rx-color-text-soft);
font-size: 0.875rem;
font-weight: 600;
background: var(--rx-color-surface-soft);
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-full);
text-decoration: none;
}
.rx-post-tags a:hover,
.tags-links a:hover {
color: var(--rx-color-primary-dark);
border-color: var(--rx-color-primary);
}
/* =========================================================
22. COMMENTS CRITICAL START
========================================================= */
.comments-area,
.rx-comments-area {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--rx-color-border);
}
.comments-title,
.comment-reply-title {
margin: 0 0 1rem;
color: var(--rx-color-heading);
font-size: clamp(1.4rem, 2vw, 1.8rem);
font-weight: 800;
line-height: 1.25;
}
.comment-list {
padding: 0;
margin: 0;
list-style: none;
}
.comment-body {
margin-bottom: 1rem;
padding: 1rem;
background: var(--rx-color-surface-soft);
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-md);
}
/* =========================================================
23. FORMS
========================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
width: 100%;
min-height: 44px;
padding: 0.65rem 0.8rem;
color: var(--rx-color-text);
background: var(--rx-color-surface);
border: 1px solid var(--rx-color-border-strong);
border-radius: var(--rx-radius-sm);
}
textarea {
min-height: 140px;
resize: vertical;
}
input::placeholder,
textarea::placeholder {
color: var(--rx-color-text-muted);
}
label {
display: inline-block;
margin-bottom: 0.35rem;
color: var(--rx-color-heading);
font-weight: 700;
}
/* =========================================================
24. RESPONSIVE
========================================================= */
@media (max-width: 1024px) {
.rx-single-layout {
grid-template-columns: minmax(0, 1fr);
}
.rx-single-sidebar,
.widget-area,
.sidebar {
display: block;
}
.rx-single-sidebar {
margin-top: 1rem;
}
}
@media (max-width: 860px) {
.rx-header-inner,
.site-header-inner {
min-height: 64px;
}
.menu-toggle,
.rx-menu-toggle {
display: inline-flex;
}
.main-navigation ul,
.rx-main-navigation ul {
display: none;
}
.main-navigation.toggled ul,
.rx-main-navigation.toggled ul,
.main-navigation.is-open ul,
.rx-main-navigation.is-open ul {
position: absolute;
top: 100%;
right: 1rem;
left: 1rem;
display: grid;
gap: 0.25rem;
padding: 0.75rem;
background: var(--rx-color-surface);
border: 1px solid var(--rx-color-border);
border-radius: var(--rx-radius-md);
box-shadow: var(--rx-shadow-lg);
}
.main-navigation.toggled a,
.rx-main-navigation.toggled a,
.main-navigation.is-open a,
.rx-main-navigation.is-open a {
width: 100%;
}
.rx-entry-title,
.entry-title,
.single-post h1.entry-title {
letter-spacing: -0.04em;
}
}
@media (max-width: 640px) {
:root {
--rx-content-max: 100%;
}
.rx-container,
.site-container,
.wrap,
.rx-single-layout,
.rx-breadcrumbs,
.breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumb {
width: min(100% - 1.25rem, var(--rx-container-max));
}
.rx-single-layout {
padding-block: 1.25rem;
}
.rx-header-inner,
.site-header-inner {
width: min(100% - 1.25rem, var(--rx-container-max));
}
.site-description,
.rx-site-description {
display: none;
}
.custom-logo,
.rx-logo {
max-width: 145px;
max-height: 46px;
}
.rx-entry-meta,
.entry-meta,
.post-meta {
font-size: 0.875rem;
}
.rx-featured-image,
.post-thumbnail,
.entry-thumbnail {
border-radius: var(--rx-radius-md);
}
.rx-author-box,
.author-box {
flex-direction: column;
}
}
/* =========================================================
25. DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
:root {
--rx-color-bg: #020617;
--rx-color-surface: #0f172a;
--rx-color-surface-soft: #111827;
--rx-color-surface-muted: #1e293b;
--rx-color-text: #e5e7eb;
--rx-color-text-soft: #cbd5e1;
--rx-color-text-muted: #94a3b8;
--rx-color-heading: #f8fafc;
--rx-color-primary: #2dd4bf;
--rx-color-primary-dark: #5eead4;
--rx-color-primary-soft: rgba(45, 212, 191, 0.12);
--rx-color-border: #1f2937;
--rx-color-border-strong: #334155;
--rx-color-link: #5eead4;
--rx-color-link-hover: #99f6e4;
}
.site-header,
.rx-site-header {
background: rgba(15, 23, 42, 0.96);
}
.rx-featured-image,
.post-thumbnail,
.entry-thumbnail {
background: #111827;
}
.rx-ad,
.rx-ad-slot {
background: #111827;
}
}
/* Manual dark class support */
.rx-dark,
body.rx-dark,
body.dark-mode {
--rx-color-bg: #020617;
--rx-color-surface: #0f172a;
--rx-color-surface-soft: #111827;
--rx-color-surface-muted: #1e293b;
--rx-color-text: #e5e7eb;
--rx-color-text-soft: #cbd5e1;
--rx-color-text-muted: #94a3b8;
--rx-color-heading: #f8fafc;
--rx-color-primary: #2dd4bf;
--rx-color-primary-dark: #5eead4;
--rx-color-primary-soft: rgba(45, 212, 191, 0.12);
--rx-color-border: #1f2937;
--rx-color-border-strong: #334155;
--rx-color-link: #5eead4;
--rx-color-link-hover: #99f6e4;
}
/* =========================================================
26. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.001ms !important;
}
}
/* =========================================================
27. PRINT SAFETY
========================================================= */
@media print {
*,
*::before,
*::after {
color: #000000 !important;
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
body {
font-size: 12pt;
line-height: 1.5;
}
a,
a:visited {
color: #000000 !important;
text-decoration: underline;
}
.site-header,
.rx-site-header,
.main-navigation,
.rx-main-navigation,
.rx-single-sidebar,
.widget-area,
.sidebar,
.comments-area,
.rx-comments-area,
.rx-share,
.rx-ad,
.rx-ad-slot {
display: none !important;
}
.rx-single-layout {
display: block;
width: 100%;
padding: 0;
}
.rx-entry-title,
.entry-title {
font-size: 24pt;
}
img {
page-break-inside: avoid;
}
h2,
h3 {
page-break-after: avoid;
}
}For best performance, load it only on single posts:
if ( is_single() ) {
wp_enqueue_style(
'rx-critical-single',
get_template_directory_uri() . '/assets/static/static-css/critical/critical-single.css',
array(),
wp_get_theme()->get( 'Version' )
);
}Best file purpose:
critical-single.css = only first-screen single post CSS
single.css = full single post CSS
content.css = long article body CSS
blocks.css = Gutenberg block CSS
sidebar.css = sidebar/widget CSS
comments.css = comments CSSMy suggestion: keep this file not too heavy. Critical CSS should be fast and small. Put the remaining long design CSS in:
assets/static/static-css/pages/single.css