I’ll build this as a strong production-ready assets/css/typography.css for RX Theme: global type variables, headings, content typography, medical article formatting, responsive scaling, accessibility, print, RTL, and WordPress block support.
Yes friend — for RX Theme, assets/css/typography.css should control all text style: body text, headings, medical article content, links, lists, blockquotes, tables, code, WordPress blocks, responsive typography, accessibility, print style, and RTL support.
Create this file:
/* ==========================================================================
RX Theme - Advanced Typography System
File: assets/css/typography.css
Purpose: Global typography, medical article readability, WordPress content
Author: RX Theme
========================================================================== */
/* ==========================================================================
1. Typography Design Tokens
========================================================================== */
:root {
/* Font families */
--rx-font-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
--rx-font-secondary: Georgia, "Times New Roman", serif;
--rx-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
/* Base font size */
--rx-font-size-root: 16px;
--rx-font-size-body: 1rem;
--rx-font-size-small: 0.875rem;
--rx-font-size-xs: 0.75rem;
--rx-font-size-large: 1.125rem;
--rx-font-size-xl: 1.25rem;
/* Fluid heading sizes */
--rx-font-size-h1: clamp(2rem, 4vw, 3.5rem);
--rx-font-size-h2: clamp(1.75rem, 3vw, 2.75rem);
--rx-font-size-h3: clamp(1.5rem, 2.4vw, 2.125rem);
--rx-font-size-h4: clamp(1.25rem, 2vw, 1.625rem);
--rx-font-size-h5: clamp(1.125rem, 1.5vw, 1.375rem);
--rx-font-size-h6: clamp(1rem, 1.2vw, 1.125rem);
/* Line heights */
--rx-line-height-body: 1.75;
--rx-line-height-heading: 1.25;
--rx-line-height-tight: 1.15;
--rx-line-height-loose: 1.9;
/* Font weights */
--rx-font-weight-light: 300;
--rx-font-weight-normal: 400;
--rx-font-weight-medium: 500;
--rx-font-weight-semibold: 600;
--rx-font-weight-bold: 700;
--rx-font-weight-black: 900;
/* Letter spacing */
--rx-letter-spacing-tight: -0.03em;
--rx-letter-spacing-normal: 0;
--rx-letter-spacing-wide: 0.025em;
--rx-letter-spacing-wider: 0.05em;
/* Text colors */
--rx-text-color: #1f2937;
--rx-text-muted: #6b7280;
--rx-text-light: #9ca3af;
--rx-heading-color: #111827;
--rx-link-color: #0f766e;
--rx-link-hover-color: #115e59;
--rx-selection-bg: #ccfbf1;
--rx-selection-color: #111827;
/* Content rhythm */
--rx-content-width: 760px;
--rx-content-wide-width: 1100px;
--rx-paragraph-spacing: 1.35em;
--rx-heading-spacing-top: 1.8em;
--rx-heading-spacing-bottom: 0.65em;
/* Radius and borders for typographic elements */
--rx-typo-radius: 10px;
--rx-typo-border-color: #e5e7eb;
--rx-code-bg: #f3f4f6;
--rx-quote-bg: #f8fafc;
}
/* ==========================================================================
2. Global Text Rendering
========================================================================== */
html {
font-size: var(--rx-font-size-root);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--rx-font-primary);
font-size: var(--rx-font-size-body);
font-weight: var(--rx-font-weight-normal);
line-height: var(--rx-line-height-body);
color: var(--rx-text-color);
background-color: #ffffff;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "kern";
}
::selection {
color: var(--rx-selection-color);
background-color: var(--rx-selection-bg);
}
::-moz-selection {
color: var(--rx-selection-color);
background-color: var(--rx-selection-bg);
}
/* ==========================================================================
3. Base Typography Elements
========================================================================== */
p {
margin-top: 0;
margin-bottom: var(--rx-paragraph-spacing);
}
strong,
b {
font-weight: var(--rx-font-weight-bold);
color: inherit;
}
em,
i {
font-style: italic;
}
small {
font-size: var(--rx-font-size-small);
}
sub,
sup {
position: relative;
font-size: 0.75em;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.45em;
}
sub {
bottom: -0.2em;
}
mark {
padding: 0.1em 0.25em;
color: #111827;
background-color: #fef3c7;
border-radius: 0.25em;
}
abbr[title] {
cursor: help;
text-decoration: underline dotted;
text-underline-offset: 0.18em;
}
del {
color: var(--rx-text-muted);
text-decoration-thickness: 0.08em;
}
ins {
color: #065f46;
text-decoration: none;
background-color: #d1fae5;
padding: 0.05em 0.2em;
border-radius: 0.25em;
}
hr {
height: 1px;
margin: 2.5rem 0;
border: 0;
background-color: var(--rx-typo-border-color);
}
/* ==========================================================================
4. Heading System
========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: var(--rx-heading-spacing-top);
margin-bottom: var(--rx-heading-spacing-bottom);
font-family: var(--rx-font-primary);
font-weight: var(--rx-font-weight-bold);
line-height: var(--rx-line-height-heading);
color: var(--rx-heading-color);
letter-spacing: var(--rx-letter-spacing-tight);
text-wrap: balance;
}
h1 {
font-size: var(--rx-font-size-h1);
font-weight: var(--rx-font-weight-black);
}
h2 {
font-size: var(--rx-font-size-h2);
}
h3 {
font-size: var(--rx-font-size-h3);
}
h4 {
font-size: var(--rx-font-size-h4);
}
h5 {
font-size: var(--rx-font-size-h5);
letter-spacing: var(--rx-letter-spacing-normal);
}
h6 {
font-size: var(--rx-font-size-h6);
letter-spacing: var(--rx-letter-spacing-wide);
text-transform: uppercase;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
.entry-title,
.page-title,
.archive-title,
.search-title {
margin-top: 0;
margin-bottom: 1rem;
color: var(--rx-heading-color);
}
.entry-title a,
.page-title a,
.archive-title a {
color: inherit;
text-decoration: none;
}
.entry-title a:hover,
.entry-title a:focus-visible {
color: var(--rx-link-hover-color);
}
/* ==========================================================================
5. Links
========================================================================== */
a {
color: var(--rx-link-color);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
transition:
color 0.2s ease,
text-decoration-color 0.2s ease,
background-color 0.2s ease;
}
a:hover {
color: var(--rx-link-hover-color);
}
a:focus-visible {
outline: 3px solid rgba(15, 118, 110, 0.35);
outline-offset: 3px;
border-radius: 4px;
}
.entry-content a,
.post-content a,
.page-content a {
font-weight: var(--rx-font-weight-medium);
text-decoration-line: underline;
}
.entry-content a:hover,
.post-content a:hover,
.page-content a:hover {
text-decoration-thickness: 0.12em;
}
/* ==========================================================================
6. Article Content Typography
========================================================================== */
.entry-content,
.post-content,
.page-content,
.single-content,
.rx-content {
max-width: var(--rx-content-width);
font-size: 1.0625rem;
line-height: 1.8;
color: var(--rx-text-color);
}
.entry-content > *:first-child,
.post-content > *:first-child,
.page-content > *:first-child,
.single-content > *:first-child,
.rx-content > *:first-child {
margin-top: 0;
}
.entry-content > *:last-child,
.post-content > *:last-child,
.page-content > *:last-child,
.single-content > *:last-child,
.rx-content > *:last-child {
margin-bottom: 0;
}
.entry-content p,
.post-content p,
.page-content p,
.rx-content p {
margin-bottom: 1.35em;
}
.entry-content .lead,
.post-content .lead,
.rx-lead {
font-size: clamp(1.125rem, 2vw, 1.35rem);
line-height: 1.7;
color: #374151;
font-weight: var(--rx-font-weight-normal);
}
.rx-content-narrow {
max-width: 680px;
}
.rx-content-wide {
max-width: var(--rx-content-wide-width);
}
/* ==========================================================================
7. Medical Article Typography
========================================================================== */
.rx-medical-content {
max-width: 820px;
font-size: 1.0625rem;
line-height: 1.85;
}
.rx-medical-content h2 {
padding-bottom: 0.35em;
border-bottom: 1px solid var(--rx-typo-border-color);
}
.rx-medical-content h3 {
color: #134e4a;
}
.rx-medical-content p {
margin-bottom: 1.4em;
}
.rx-medical-summary,
.rx-key-point,
.rx-clinical-note {
margin: 1.75rem 0;
padding: 1.25rem 1.4rem;
font-size: 1rem;
line-height: 1.75;
background-color: #f0fdfa;
border-left: 5px solid #0f766e;
border-radius: var(--rx-typo-radius);
}
.rx-warning-note {
margin: 1.75rem 0;
padding: 1.25rem 1.4rem;
font-size: 1rem;
line-height: 1.75;
background-color: #fffbeb;
border-left: 5px solid #f59e0b;
border-radius: var(--rx-typo-radius);
}
.rx-danger-note {
margin: 1.75rem 0;
padding: 1.25rem 1.4rem;
font-size: 1rem;
line-height: 1.75;
background-color: #fef2f2;
border-left: 5px solid #dc2626;
border-radius: var(--rx-typo-radius);
}
.rx-definition {
font-weight: var(--rx-font-weight-medium);
color: #134e4a;
}
.rx-medical-term {
font-weight: var(--rx-font-weight-semibold);
color: #0f766e;
}
.rx-reference {
font-size: 0.85em;
vertical-align: super;
}
.rx-reading-time,
.rx-updated-date,
.rx-reviewed-by {
font-size: var(--rx-font-size-small);
color: var(--rx-text-muted);
}
/* ==========================================================================
8. Lists
========================================================================== */
ul,
ol {
margin-top: 0;
margin-bottom: 1.5em;
padding-left: 1.45em;
}
li {
margin-bottom: 0.55em;
}
li > ul,
li > ol {
margin-top: 0.55em;
margin-bottom: 0.55em;
}
ul li::marker {
color: var(--rx-link-color);
}
ol li::marker {
color: var(--rx-link-color);
font-weight: var(--rx-font-weight-bold);
}
.rx-check-list,
.rx-x-list,
.rx-arrow-list {
padding-left: 0;
list-style: none;
}
.rx-check-list li,
.rx-x-list li,
.rx-arrow-list li {
position: relative;
padding-left: 1.75em;
}
.rx-check-list li::before {
content: "✓";
position: absolute;
left: 0;
color: #059669;
font-weight: var(--rx-font-weight-bold);
}
.rx-x-list li::before {
content: "×";
position: absolute;
left: 0;
color: #dc2626;
font-weight: var(--rx-font-weight-bold);
}
.rx-arrow-list li::before {
content: "→";
position: absolute;
left: 0;
color: var(--rx-link-color);
font-weight: var(--rx-font-weight-bold);
}
/* ==========================================================================
9. Blockquotes and Pull Quotes
========================================================================== */
blockquote {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
color: #374151;
background-color: var(--rx-quote-bg);
border-left: 5px solid var(--rx-link-color);
border-radius: var(--rx-typo-radius);
}
blockquote p:last-child {
margin-bottom: 0;
}
blockquote cite {
display: block;
margin-top: 1rem;
font-size: var(--rx-font-size-small);
color: var(--rx-text-muted);
font-style: normal;
}
.wp-block-quote {
margin: 2rem 0;
}
.wp-block-pullquote {
margin: 2.5rem 0;
padding: 2rem;
text-align: center;
border-top: 3px solid var(--rx-link-color);
border-bottom: 3px solid var(--rx-link-color);
}
.wp-block-pullquote blockquote {
margin: 0;
padding: 0;
background: transparent;
border-left: 0;
}
.wp-block-pullquote p {
font-size: clamp(1.4rem, 3vw, 2.2rem);
line-height: 1.35;
color: var(--rx-heading-color);
}
/* ==========================================================================
10. Code Typography
========================================================================== */
code,
kbd,
samp,
pre {
font-family: var(--rx-font-mono);
}
code,
kbd,
samp {
font-size: 0.9em;
padding: 0.15em 0.35em;
background-color: var(--rx-code-bg);
border-radius: 0.35em;
}
kbd {
color: #ffffff;
background-color: #111827;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
}
pre {
overflow-x: auto;
margin: 2rem 0;
padding: 1.25rem;
font-size: 0.9375rem;
line-height: 1.7;
color: #e5e7eb;
background-color: #111827;
border-radius: var(--rx-typo-radius);
tab-size: 2;
}
pre code {
padding: 0;
color: inherit;
background-color: transparent;
border-radius: 0;
}
/* ==========================================================================
11. Tables Typography
========================================================================== */
table {
width: 100%;
margin: 2rem 0;
border-collapse: collapse;
font-size: 0.95rem;
line-height: 1.6;
}
caption {
margin-bottom: 0.75rem;
color: var(--rx-text-muted);
font-size: var(--rx-font-size-small);
text-align: left;
}
th,
td {
padding: 0.85rem 1rem;
text-align: left;
vertical-align: top;
border: 1px solid var(--rx-typo-border-color);
}
th {
font-weight: var(--rx-font-weight-bold);
color: var(--rx-heading-color);
background-color: #f9fafb;
}
td {
color: var(--rx-text-color);
}
.wp-block-table {
overflow-x: auto;
}
.wp-block-table table {
min-width: 640px;
}
/* ==========================================================================
12. Forms Typography
========================================================================== */
button,
input,
select,
textarea {
font: inherit;
}
label {
display: inline-block;
margin-bottom: 0.4rem;
font-weight: var(--rx-font-weight-medium);
color: var(--rx-heading-color);
}
input,
select,
textarea {
color: var(--rx-text-color);
}
input::placeholder,
textarea::placeholder {
color: var(--rx-text-light);
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
font-weight: var(--rx-font-weight-semibold);
letter-spacing: var(--rx-letter-spacing-normal);
}
/* ==========================================================================
13. WordPress Block Typography
========================================================================== */
.has-small-font-size {
font-size: var(--rx-font-size-small) !important;
}
.has-normal-font-size {
font-size: 1rem !important;
}
.has-medium-font-size {
font-size: 1.25rem !important;
}
.has-large-font-size {
font-size: 1.75rem !important;
}
.has-x-large-font-size {
font-size: 2.25rem !important;
}
.wp-block-heading {
color: var(--rx-heading-color);
}
.wp-block-paragraph {
line-height: var(--rx-line-height-body);
}
.wp-block-separator {
margin: 2.5rem 0;
border: 0;
border-top: 1px solid var(--rx-typo-border-color);
}
.wp-block-code {
font-family: var(--rx-font-mono);
}
.wp-block-verse {
padding: 1.25rem;
font-family: var(--rx-font-secondary);
font-size: 1.05rem;
line-height: 1.8;
background-color: #f9fafb;
border-radius: var(--rx-typo-radius);
}
.wp-block-details {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border: 1px solid var(--rx-typo-border-color);
border-radius: var(--rx-typo-radius);
}
.wp-block-details summary {
cursor: pointer;
font-weight: var(--rx-font-weight-semibold);
color: var(--rx-heading-color);
}
.wp-block-details summary + * {
margin-top: 1rem;
}
/* ==========================================================================
14. Metadata Typography
========================================================================== */
.entry-meta,
.post-meta,
.page-meta,
.rx-meta {
font-size: var(--rx-font-size-small);
line-height: 1.6;
color: var(--rx-text-muted);
}
.entry-meta a,
.post-meta a,
.page-meta a,
.rx-meta a {
color: inherit;
text-decoration: none;
}
.entry-meta a:hover,
.post-meta a:hover,
.page-meta a:hover,
.rx-meta a:hover {
color: var(--rx-link-color);
text-decoration: underline;
}
.byline,
.posted-on,
.cat-links,
.tags-links,
.comments-link {
display: inline-block;
margin-right: 0.75rem;
}
/* ==========================================================================
15. Navigation Typography
========================================================================== */
.site-title {
margin: 0;
font-size: clamp(1.4rem, 3vw, 2rem);
font-weight: var(--rx-font-weight-black);
line-height: 1.2;
letter-spacing: var(--rx-letter-spacing-tight);
}
.site-title a {
color: var(--rx-heading-color);
text-decoration: none;
}
.site-description {
margin: 0.25rem 0 0;
font-size: var(--rx-font-size-small);
line-height: 1.5;
color: var(--rx-text-muted);
}
.main-navigation,
.site-navigation,
.rx-navigation {
font-size: 0.95rem;
font-weight: var(--rx-font-weight-medium);
}
.main-navigation a,
.site-navigation a,
.rx-navigation a {
color: var(--rx-heading-color);
text-decoration: none;
}
.main-navigation a:hover,
.site-navigation a:hover,
.rx-navigation a:hover {
color: var(--rx-link-color);
}
/* ==========================================================================
16. Card and Archive Typography
========================================================================== */
.rx-card-title,
.entry-card-title,
.archive-card-title {
margin-top: 0;
margin-bottom: 0.65rem;
font-size: clamp(1.25rem, 2vw, 1.65rem);
line-height: 1.3;
}
.rx-card-title a,
.entry-card-title a,
.archive-card-title a {
color: var(--rx-heading-color);
text-decoration: none;
}
.rx-card-title a:hover,
.entry-card-title a:hover,
.archive-card-title a:hover {
color: var(--rx-link-color);
}
.rx-card-excerpt,
.entry-summary,
.archive-summary {
font-size: 1rem;
line-height: 1.7;
color: var(--rx-text-muted);
}
.read-more,
.more-link {
font-weight: var(--rx-font-weight-semibold);
color: var(--rx-link-color);
text-decoration: none;
}
.read-more:hover,
.more-link:hover {
color: var(--rx-link-hover-color);
text-decoration: underline;
}
/* ==========================================================================
17. Comments Typography
========================================================================== */
.comments-title,
.comment-reply-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
color: var(--rx-heading-color);
}
.comment-author {
font-weight: var(--rx-font-weight-bold);
color: var(--rx-heading-color);
}
.comment-metadata,
.comment-awaiting-moderation {
font-size: var(--rx-font-size-small);
color: var(--rx-text-muted);
}
.comment-content {
font-size: 1rem;
line-height: 1.75;
}
.comment-content p:last-child {
margin-bottom: 0;
}
.comment-reply-link {
font-size: var(--rx-font-size-small);
font-weight: var(--rx-font-weight-semibold);
text-decoration: none;
}
/* ==========================================================================
18. Breadcrumb Typography
========================================================================== */
.breadcrumbs,
.rx-breadcrumbs {
font-size: var(--rx-font-size-small);
line-height: 1.6;
color: var(--rx-text-muted);
}
.breadcrumbs a,
.rx-breadcrumbs a {
color: var(--rx-text-muted);
text-decoration: none;
}
.breadcrumbs a:hover,
.rx-breadcrumbs a:hover {
color: var(--rx-link-color);
text-decoration: underline;
}
/* ==========================================================================
19. Pagination Typography
========================================================================== */
.pagination,
.nav-links,
.page-links {
font-size: 0.95rem;
font-weight: var(--rx-font-weight-medium);
}
.pagination a,
.pagination span,
.nav-links a,
.nav-links span,
.page-links a,
.page-links span {
line-height: 1.4;
}
.page-numbers.current {
font-weight: var(--rx-font-weight-bold);
}
/* ==========================================================================
20. Utility Typography Classes
========================================================================== */
.rx-text-xs {
font-size: var(--rx-font-size-xs);
}
.rx-text-sm {
font-size: var(--rx-font-size-small);
}
.rx-text-base {
font-size: 1rem;
}
.rx-text-lg {
font-size: var(--rx-font-size-large);
}
.rx-text-xl {
font-size: var(--rx-font-size-xl);
}
.rx-text-muted {
color: var(--rx-text-muted);
}
.rx-text-light {
color: var(--rx-text-light);
}
.rx-text-primary {
color: var(--rx-link-color);
}
.rx-text-center {
text-align: center;
}
.rx-text-left {
text-align: left;
}
.rx-text-right {
text-align: right;
}
.rx-font-light {
font-weight: var(--rx-font-weight-light);
}
.rx-font-normal {
font-weight: var(--rx-font-weight-normal);
}
.rx-font-medium {
font-weight: var(--rx-font-weight-medium);
}
.rx-font-semibold {
font-weight: var(--rx-font-weight-semibold);
}
.rx-font-bold {
font-weight: var(--rx-font-weight-bold);
}
.rx-font-black {
font-weight: var(--rx-font-weight-black);
}
.rx-uppercase {
text-transform: uppercase;
letter-spacing: var(--rx-letter-spacing-wide);
}
.rx-capitalize {
text-transform: capitalize;
}
.rx-lowercase {
text-transform: lowercase;
}
.rx-no-underline {
text-decoration: none;
}
.rx-balance {
text-wrap: balance;
}
.rx-pretty {
text-wrap: pretty;
}
.rx-nowrap {
white-space: nowrap;
}
.rx-break-word {
overflow-wrap: break-word;
word-break: break-word;
}
.rx-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rx-line-clamp-2,
.rx-line-clamp-3,
.rx-line-clamp-4 {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
}
.rx-line-clamp-2 {
-webkit-line-clamp: 2;
}
.rx-line-clamp-3 {
-webkit-line-clamp: 3;
}
.rx-line-clamp-4 {
-webkit-line-clamp: 4;
}
/* ==========================================================================
21. Accessibility Typography
========================================================================== */
.screen-reader-text,
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
clip-path: inset(50%);
}
.screen-reader-text:focus,
.sr-only:focus {
z-index: 100000;
top: 5px;
left: 5px;
width: auto;
height: auto;
padding: 0.85rem 1rem;
clip: auto !important;
color: #ffffff;
background-color: #111827;
border-radius: 6px;
text-decoration: none;
clip-path: none;
}
:focus-visible {
outline: 3px solid rgba(15, 118, 110, 0.35);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
a {
transition: none;
}
}
/* ==========================================================================
22. Responsive Typography
========================================================================== */
@media (max-width: 1024px) {
:root {
--rx-content-width: 720px;
}
.entry-content,
.post-content,
.page-content,
.single-content,
.rx-content,
.rx-medical-content {
font-size: 1.03125rem;
}
}
@media (max-width: 768px) {
:root {
--rx-font-size-root: 15.5px;
--rx-line-height-body: 1.7;
}
body {
line-height: var(--rx-line-height-body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
--rx-heading-spacing-top: 1.55em;
}
.entry-content,
.post-content,
.page-content,
.single-content,
.rx-content,
.rx-medical-content {
font-size: 1rem;
line-height: 1.75;
}
blockquote {
padding: 1rem 1.15rem;
}
table {
font-size: 0.9rem;
}
th,
td {
padding: 0.7rem 0.8rem;
}
}
@media (max-width: 480px) {
:root {
--rx-font-size-root: 15px;
--rx-paragraph-spacing: 1.2em;
}
.entry-content,
.post-content,
.page-content,
.single-content,
.rx-content,
.rx-medical-content {
line-height: 1.72;
}
ul,
ol {
padding-left: 1.2em;
}
pre {
padding: 1rem;
font-size: 0.875rem;
}
.rx-medical-summary,
.rx-key-point,
.rx-clinical-note,
.rx-warning-note,
.rx-danger-note {
padding: 1rem;
}
}
/* ==========================================================================
23. Dark Mode Typography Support
========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
--rx-text-color: #d1d5db;
--rx-text-muted: #9ca3af;
--rx-text-light: #6b7280;
--rx-heading-color: #f9fafb;
--rx-link-color: #5eead4;
--rx-link-hover-color: #99f6e4;
--rx-selection-bg: #134e4a;
--rx-selection-color: #ffffff;
--rx-typo-border-color: #374151;
--rx-code-bg: #1f2937;
--rx-quote-bg: #111827;
}
body {
background-color: #030712;
}
mark {
color: #111827;
background-color: #fde68a;
}
th {
background-color: #111827;
}
.rx-medical-summary,
.rx-key-point,
.rx-clinical-note {
background-color: rgba(20, 184, 166, 0.1);
}
.rx-warning-note {
background-color: rgba(245, 158, 11, 0.12);
}
.rx-danger-note {
background-color: rgba(220, 38, 38, 0.12);
}
.wp-block-verse,
.wp-block-details {
background-color: #111827;
}
}
/* ==========================================================================
24. Manual Theme Mode Support
Use body class: .rx-dark-mode or .rx-light-mode
========================================================================== */
.rx-dark-mode {
--rx-text-color: #d1d5db;
--rx-text-muted: #9ca3af;
--rx-text-light: #6b7280;
--rx-heading-color: #f9fafb;
--rx-link-color: #5eead4;
--rx-link-hover-color: #99f6e4;
--rx-selection-bg: #134e4a;
--rx-selection-color: #ffffff;
--rx-typo-border-color: #374151;
--rx-code-bg: #1f2937;
--rx-quote-bg: #111827;
color: var(--rx-text-color);
background-color: #030712;
}
.rx-light-mode {
--rx-text-color: #1f2937;
--rx-text-muted: #6b7280;
--rx-text-light: #9ca3af;
--rx-heading-color: #111827;
--rx-link-color: #0f766e;
--rx-link-hover-color: #115e59;
--rx-selection-bg: #ccfbf1;
--rx-selection-color: #111827;
--rx-typo-border-color: #e5e7eb;
--rx-code-bg: #f3f4f6;
--rx-quote-bg: #f8fafc;
color: var(--rx-text-color);
background-color: #ffffff;
}
/* ==========================================================================
25. RTL Typography Support
========================================================================== */
[dir="rtl"] body,
.rtl body {
direction: rtl;
text-align: right;
}
[dir="rtl"] ul,
[dir="rtl"] ol,
.rtl ul,
.rtl ol {
padding-left: 0;
padding-right: 1.45em;
}
[dir="rtl"] blockquote,
.rtl blockquote {
border-left: 0;
border-right: 5px solid var(--rx-link-color);
}
[dir="rtl"] .rx-check-list li,
[dir="rtl"] .rx-x-list li,
[dir="rtl"] .rx-arrow-list li,
.rtl .rx-check-list li,
.rtl .rx-x-list li,
.rtl .rx-arrow-list li {
padding-left: 0;
padding-right: 1.75em;
}
[dir="rtl"] .rx-check-list li::before,
[dir="rtl"] .rx-x-list li::before,
[dir="rtl"] .rx-arrow-list li::before,
.rtl .rx-check-list li::before,
.rtl .rx-x-list li::before,
.rtl .rx-arrow-list li::before {
left: auto;
right: 0;
}
/* ==========================================================================
26. Print Typography
========================================================================== */
@media print {
:root {
--rx-text-color: #000000;
--rx-heading-color: #000000;
--rx-link-color: #000000;
--rx-typo-border-color: #cccccc;
}
html {
font-size: 12pt;
}
body {
color: #000000;
background: #ffffff;
font-family: Georgia, "Times New Roman", serif;
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000000;
page-break-after: avoid;
break-after: avoid;
}
p,
blockquote,
table,
pre,
ul,
ol {
page-break-inside: avoid;
break-inside: avoid;
}
a {
color: #000000;
text-decoration: underline;
}
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 0.85em;
word-break: break-all;
}
pre,
code {
white-space: pre-wrap;
color: #000000;
background: #f5f5f5;
border: 1px solid #cccccc;
}
.site-navigation,
.main-navigation,
.comments-area,
.sidebar,
.widget-area,
.pagination,
.nav-links,
.rx-no-print {
display: none !important;
}
.entry-content,
.post-content,
.page-content,
.rx-content,
.rx-medical-content {
max-width: none;
font-size: 12pt;
}
}Then enqueue it in your theme:
wp_enqueue_style(
'rx-theme-typography',
get_template_directory_uri() . '/assets/css/typography.css',
array(),
wp_get_theme()->get('Version')
);Best loading order for RX Theme CSS:
assets/css/reset.css
assets/css/variables.css
assets/css/base.css
assets/css/typography.css
assets/css/layout.css
assets/css/components.css
assets/css/wordpress.css
assets/css/responsive.cssSo typography.css should load after variables/base and before layout/components.