I’ll build this as a production-style home.css for RX Theme: homepage sections, responsive layouts, accessibility, animations, dark mode support, print rules, and WordPress-friendly class naming.
Below is an advanced assets/static/static-css/pages/home.css file for RX Theme homepage. It is written as a static page CSS file, using rx- prefixed classes so it will not easily conflict with WordPress, plugins, or Gutenberg blocks.
/*!
Theme Name: RX Theme
File: assets/static/static-css/pages/home.css
Purpose: Advanced homepage styling for RX Theme
Author: RxHarun
Version: 1.0.0
*/
/* =========================================================
RX HOME PAGE CSS INDEX
=========================================================
01. Page Scope
02. Home Design Tokens
03. Global Home Reset
04. Hero Section
05. Hero Search
06. Hero Trust / Stats
07. Medical Category Grid
08. Featured Articles
09. Latest Posts
10. Doctor / Author Section
11. Condition Library
12. Emergency / CTA Blocks
13. Newsletter Section
14. FAQ Section
15. Gutenberg Homepage Support
16. WordPress Widgets
17. Accessibility
18. Animation
19. Dark Mode
20. Responsive
21. Print
========================================================= */
/* =========================================================
01. PAGE SCOPE
========================================================= */
.rx-home,
body.home,
body.front-page,
body.rx-home-page {
--rx-home-max-width: 1200px;
--rx-home-wide-width: 1440px;
--rx-home-space-1: 0.25rem;
--rx-home-space-2: 0.5rem;
--rx-home-space-3: 0.75rem;
--rx-home-space-4: 1rem;
--rx-home-space-5: 1.25rem;
--rx-home-space-6: 1.5rem;
--rx-home-space-8: 2rem;
--rx-home-space-10: 2.5rem;
--rx-home-space-12: 3rem;
--rx-home-space-16: 4rem;
--rx-home-space-20: 5rem;
--rx-home-radius-xs: 0.375rem;
--rx-home-radius-sm: 0.5rem;
--rx-home-radius-md: 0.75rem;
--rx-home-radius-lg: 1rem;
--rx-home-radius-xl: 1.5rem;
--rx-home-radius-2xl: 2rem;
--rx-home-radius-pill: 999px;
--rx-home-white: #ffffff;
--rx-home-black: #05070a;
--rx-home-primary: var(--rx-color-primary, #0756c8);
--rx-home-primary-dark: var(--rx-color-primary-dark, #063f96);
--rx-home-primary-soft: var(--rx-color-primary-soft, #e8f1ff);
--rx-home-secondary: var(--rx-color-secondary, #0f9f8f);
--rx-home-secondary-soft: var(--rx-color-secondary-soft, #e7faf8);
--rx-home-danger: var(--rx-color-danger, #d7263d);
--rx-home-danger-soft: var(--rx-color-danger-soft, #fff0f3);
--rx-home-warning: var(--rx-color-warning, #f59e0b);
--rx-home-warning-soft: var(--rx-color-warning-soft, #fff7e6);
--rx-home-success: var(--rx-color-success, #16a34a);
--rx-home-success-soft: var(--rx-color-success-soft, #ecfdf3);
--rx-home-bg: var(--rx-body-bg, #f7f9fc);
--rx-home-surface: var(--rx-surface, #ffffff);
--rx-home-surface-soft: var(--rx-surface-soft, #f2f6fb);
--rx-home-border: var(--rx-border-color, #dde6f0);
--rx-home-text: var(--rx-text-color, #111827);
--rx-home-text-soft: var(--rx-text-soft, #4b5563);
--rx-home-text-muted: var(--rx-text-muted, #6b7280);
--rx-home-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
--rx-home-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.09);
--rx-home-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
--rx-home-shadow-xl: 0 30px 80px rgba(15, 23, 42, 0.16);
--rx-home-gradient-primary: linear-gradient(135deg, #0756c8 0%, #0f9f8f 100%);
--rx-home-gradient-soft: linear-gradient(135deg, #e8f1ff 0%, #e7faf8 100%);
--rx-home-gradient-hero:
radial-gradient(circle at top left, rgba(15, 159, 143, 0.18), transparent 32rem),
radial-gradient(circle at top right, rgba(7, 86, 200, 0.18), transparent 34rem),
linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
--rx-home-font-main: var(--rx-font-main, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
--rx-home-font-heading: var(--rx-font-heading, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
background: var(--rx-home-bg);
color: var(--rx-home-text);
}
/* =========================================================
02. HOME DESIGN TOKENS
========================================================= */
.rx-home-container,
.rx-home .container,
body.home .site-main > .container {
width: min(100% - 2rem, var(--rx-home-max-width));
margin-inline: auto;
}
.rx-home-container-wide {
width: min(100% - 2rem, var(--rx-home-wide-width));
margin-inline: auto;
}
.rx-home-section {
padding-block: clamp(3rem, 6vw, 6rem);
position: relative;
}
.rx-home-section-sm {
padding-block: clamp(2rem, 4vw, 4rem);
}
.rx-home-section-lg {
padding-block: clamp(4rem, 8vw, 8rem);
}
.rx-home-section-header {
max-width: 760px;
margin-inline: auto;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
text-align: center;
}
.rx-home-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.35rem 0.8rem;
border: 1px solid color-mix(in srgb, var(--rx-home-primary) 20%, transparent);
border-radius: var(--rx-home-radius-pill);
background: var(--rx-home-primary-soft);
color: var(--rx-home-primary-dark);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.025em;
text-transform: uppercase;
}
.rx-home-title,
.rx-home-section-title {
margin: 0;
color: var(--rx-home-text);
font-family: var(--rx-home-font-heading);
font-size: clamp(2rem, 4vw, 3.75rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.045em;
}
.rx-home-section-title {
font-size: clamp(1.75rem, 3vw, 3rem);
}
.rx-home-description,
.rx-home-section-description {
margin: 1rem 0 0;
color: var(--rx-home-text-soft);
font-size: clamp(1rem, 1.6vw, 1.1875rem);
line-height: 1.75;
}
.rx-home-kicker {
color: var(--rx-home-primary);
font-weight: 800;
}
.rx-home-gradient-text {
background: var(--rx-home-gradient-primary);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* =========================================================
03. GLOBAL HOME RESET
========================================================= */
.rx-home *,
.rx-home *::before,
.rx-home *::after,
body.home .site-main *,
body.home .site-main *::before,
body.home .site-main *::after {
box-sizing: border-box;
}
.rx-home img,
body.home .site-main img {
max-width: 100%;
height: auto;
}
.rx-home a {
color: var(--rx-home-primary);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.16em;
}
.rx-home a:hover {
color: var(--rx-home-primary-dark);
}
.rx-home :where(h1, h2, h3, h4, h5, h6) {
text-wrap: balance;
}
.rx-home :where(p, li) {
text-wrap: pretty;
}
.rx-home [hidden] {
display: none !important;
}
/* =========================================================
04. HERO SECTION
========================================================= */
.rx-home-hero {
position: relative;
isolation: isolate;
overflow: hidden;
padding-block: clamp(4rem, 8vw, 8rem);
background: var(--rx-home-gradient-hero);
}
.rx-home-hero::before,
.rx-home-hero::after {
content: "";
position: absolute;
z-index: -1;
border-radius: 50%;
pointer-events: none;
filter: blur(8px);
}
.rx-home-hero::before {
width: 22rem;
height: 22rem;
top: -9rem;
left: -8rem;
background: rgba(15, 159, 143, 0.12);
}
.rx-home-hero::after {
width: 26rem;
height: 26rem;
right: -10rem;
bottom: -11rem;
background: rgba(7, 86, 200, 0.12);
}
.rx-home-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
align-items: center;
gap: clamp(2rem, 6vw, 5rem);
}
.rx-home-hero-content {
max-width: 720px;
}
.rx-home-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-bottom: 1.25rem;
padding: 0.45rem 0.9rem;
border: 1px solid rgba(7, 86, 200, 0.18);
border-radius: var(--rx-home-radius-pill);
background: rgba(255, 255, 255, 0.74);
box-shadow: var(--rx-home-shadow-sm);
color: var(--rx-home-primary-dark);
font-size: 0.875rem;
font-weight: 700;
backdrop-filter: blur(14px);
}
.rx-home-hero-badge-icon {
display: inline-grid;
width: 1.45rem;
height: 1.45rem;
place-items: center;
border-radius: 50%;
background: var(--rx-home-gradient-primary);
color: #ffffff;
font-size: 0.8rem;
}
.rx-home-hero-title {
margin: 0;
max-width: 13ch;
color: var(--rx-home-text);
font-family: var(--rx-home-font-heading);
font-size: clamp(2.6rem, 6vw, 5.8rem);
font-weight: 900;
line-height: 0.98;
letter-spacing: -0.065em;
}
.rx-home-hero-subtitle {
margin: 1.35rem 0 0;
max-width: 62ch;
color: var(--rx-home-text-soft);
font-size: clamp(1.05rem, 1.8vw, 1.3rem);
line-height: 1.75;
}
.rx-home-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
margin-top: 2rem;
}
.rx-home-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 3rem;
padding: 0.85rem 1.35rem;
border: 1px solid transparent;
border-radius: var(--rx-home-radius-pill);
font-size: 0.975rem;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition:
transform 180ms ease,
box-shadow 180ms ease,
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease;
}
.rx-home-btn:hover {
transform: translateY(-2px);
text-decoration: none;
}
.rx-home-btn:active {
transform: translateY(0);
}
.rx-home-btn-primary {
background: var(--rx-home-gradient-primary);
color: #ffffff;
box-shadow: 0 14px 28px rgba(7, 86, 200, 0.22);
}
.rx-home-btn-primary:hover {
color: #ffffff;
box-shadow: 0 18px 36px rgba(7, 86, 200, 0.28);
}
.rx-home-btn-secondary {
border-color: var(--rx-home-border);
background: var(--rx-home-surface);
color: var(--rx-home-text);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home-btn-secondary:hover {
border-color: color-mix(in srgb, var(--rx-home-primary) 30%, var(--rx-home-border));
color: var(--rx-home-primary-dark);
box-shadow: var(--rx-home-shadow-md);
}
.rx-home-hero-note {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-top: 1.4rem;
color: var(--rx-home-text-muted);
font-size: 0.925rem;
line-height: 1.6;
}
.rx-home-hero-note svg,
.rx-home-hero-note i {
flex: 0 0 auto;
color: var(--rx-home-success);
}
/* Hero visual card */
.rx-home-hero-visual {
position: relative;
}
.rx-home-hero-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(221, 230, 240, 0.85);
border-radius: var(--rx-home-radius-2xl);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)),
var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-xl);
backdrop-filter: blur(18px);
}
.rx-home-hero-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem;
border-bottom: 1px solid var(--rx-home-border);
}
.rx-home-hero-card-title {
margin: 0;
color: var(--rx-home-text);
font-size: 1rem;
font-weight: 900;
}
.rx-home-hero-card-status {
display: inline-flex;
align-items: center;
gap: 0.45rem;
color: var(--rx-home-success);
font-size: 0.8125rem;
font-weight: 800;
}
.rx-home-hero-card-status::before {
content: "";
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 0 0.35rem rgba(22, 163, 74, 0.12);
}
.rx-home-hero-card-body {
padding: 1.25rem;
}
.rx-home-hero-metric-list {
display: grid;
gap: 1rem;
}
.rx-home-hero-metric {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.85rem;
padding: 0.9rem;
border: 1px solid rgba(221, 230, 240, 0.75);
border-radius: var(--rx-home-radius-lg);
background: rgba(255, 255, 255, 0.72);
}
.rx-home-hero-metric-icon {
display: grid;
width: 2.5rem;
height: 2.5rem;
place-items: center;
border-radius: var(--rx-home-radius-md);
background: var(--rx-home-primary-soft);
color: var(--rx-home-primary);
}
.rx-home-hero-metric-label {
margin: 0;
color: var(--rx-home-text-muted);
font-size: 0.8rem;
font-weight: 700;
}
.rx-home-hero-metric-value {
margin: 0.15rem 0 0;
color: var(--rx-home-text);
font-size: 1rem;
font-weight: 900;
}
.rx-home-hero-metric-tag {
padding: 0.25rem 0.55rem;
border-radius: var(--rx-home-radius-pill);
background: var(--rx-home-success-soft);
color: var(--rx-home-success);
font-size: 0.75rem;
font-weight: 900;
}
.rx-home-floating-card {
position: absolute;
z-index: 2;
right: -1rem;
bottom: -1.25rem;
max-width: 15rem;
padding: 1rem;
border: 1px solid rgba(221, 230, 240, 0.9);
border-radius: var(--rx-home-radius-xl);
background: rgba(255, 255, 255, 0.86);
box-shadow: var(--rx-home-shadow-lg);
backdrop-filter: blur(18px);
}
.rx-home-floating-card-title {
margin: 0 0 0.35rem;
font-size: 0.925rem;
font-weight: 900;
}
.rx-home-floating-card-text {
margin: 0;
color: var(--rx-home-text-muted);
font-size: 0.8125rem;
line-height: 1.55;
}
/* =========================================================
05. HERO SEARCH
========================================================= */
.rx-home-search {
margin-top: 2rem;
max-width: 680px;
}
.rx-home-search-form {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem;
border: 1px solid rgba(221, 230, 240, 0.9);
border-radius: var(--rx-home-radius-pill);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-md);
}
.rx-home-search-field-wrap {
position: relative;
flex: 1 1 auto;
}
.rx-home-search-icon {
position: absolute;
top: 50%;
left: 1rem;
color: var(--rx-home-text-muted);
transform: translateY(-50%);
pointer-events: none;
}
.rx-home-search-input,
.rx-home-search input[type="search"],
.rx-home-search input[type="text"] {
width: 100%;
min-height: 3.1rem;
padding: 0.75rem 1rem 0.75rem 2.75rem;
border: 0;
border-radius: var(--rx-home-radius-pill);
background: transparent;
color: var(--rx-home-text);
font-size: 1rem;
outline: none;
}
.rx-home-search-input::placeholder,
.rx-home-search input[type="search"]::placeholder {
color: var(--rx-home-text-muted);
}
.rx-home-search-submit,
.rx-home-search button[type="submit"] {
flex: 0 0 auto;
min-height: 3.1rem;
padding-inline: 1.35rem;
border: 0;
border-radius: var(--rx-home-radius-pill);
background: var(--rx-home-gradient-primary);
color: #ffffff;
font-weight: 900;
cursor: pointer;
box-shadow: 0 12px 24px rgba(7, 86, 200, 0.18);
}
.rx-home-search-submit:hover,
.rx-home-search button[type="submit"]:hover {
filter: saturate(1.08);
}
.rx-home-search-tags {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.9rem;
}
.rx-home-search-tag {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.75rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-pill);
background: rgba(255, 255, 255, 0.72);
color: var(--rx-home-text-soft);
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
}
.rx-home-search-tag:hover {
border-color: color-mix(in srgb, var(--rx-home-primary) 30%, var(--rx-home-border));
color: var(--rx-home-primary);
text-decoration: none;
}
/* =========================================================
06. HERO TRUST / STATS
========================================================= */
.rx-home-stats {
margin-top: clamp(2rem, 5vw, 4rem);
}
.rx-home-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
}
.rx-home-stat-card {
padding: 1.25rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--rx-home-shadow-sm);
backdrop-filter: blur(16px);
}
.rx-home-stat-number {
margin: 0;
color: var(--rx-home-primary);
font-size: clamp(1.65rem, 3vw, 2.5rem);
font-weight: 950;
line-height: 1;
letter-spacing: -0.04em;
}
.rx-home-stat-label {
margin: 0.55rem 0 0;
color: var(--rx-home-text-soft);
font-size: 0.925rem;
line-height: 1.55;
}
/* =========================================================
07. MEDICAL CATEGORY GRID
========================================================= */
.rx-home-categories {
background: var(--rx-home-surface);
}
.rx-home-category-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.rx-home-category-card {
position: relative;
display: flex;
min-height: 12rem;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: 1.35rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
color: var(--rx-home-text);
text-decoration: none;
box-shadow: var(--rx-home-shadow-sm);
transition:
transform 200ms ease,
box-shadow 200ms ease,
border-color 200ms ease;
}
.rx-home-category-card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at top right, rgba(7, 86, 200, 0.12), transparent 45%),
radial-gradient(circle at bottom left, rgba(15, 159, 143, 0.1), transparent 45%);
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.rx-home-category-card:hover {
border-color: color-mix(in srgb, var(--rx-home-primary) 35%, var(--rx-home-border));
color: var(--rx-home-text);
text-decoration: none;
transform: translateY(-5px);
box-shadow: var(--rx-home-shadow-lg);
}
.rx-home-category-card:hover::before {
opacity: 1;
}
.rx-home-category-icon {
position: relative;
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border-radius: var(--rx-home-radius-lg);
background: var(--rx-home-gradient-soft);
color: var(--rx-home-primary);
font-size: 1.35rem;
}
.rx-home-category-title {
position: relative;
margin: 1rem 0 0.45rem;
color: var(--rx-home-text);
font-size: 1.1rem;
font-weight: 900;
line-height: 1.25;
}
.rx-home-category-text {
position: relative;
margin: 0;
color: var(--rx-home-text-muted);
font-size: 0.925rem;
line-height: 1.65;
}
.rx-home-category-meta {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1rem;
color: var(--rx-home-primary);
font-size: 0.85rem;
font-weight: 900;
}
/* =========================================================
08. FEATURED ARTICLES
========================================================= */
.rx-home-featured {
background:
radial-gradient(circle at top left, rgba(7, 86, 200, 0.08), transparent 30rem),
var(--rx-home-bg);
}
.rx-home-featured-grid {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
gap: clamp(1rem, 3vw, 2rem);
}
.rx-home-featured-main {
position: relative;
overflow: hidden;
min-height: 31rem;
border-radius: var(--rx-home-radius-2xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-lg);
}
.rx-home-featured-main .rx-post-thumbnail,
.rx-home-featured-main img {
width: 100%;
height: 100%;
min-height: 31rem;
object-fit: cover;
}
.rx-home-featured-main::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, 0.76) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 58%);
pointer-events: none;
}
.rx-home-featured-main-content {
position: absolute;
z-index: 1;
inset-inline: 0;
bottom: 0;
padding: clamp(1.25rem, 4vw, 2.5rem);
color: #ffffff;
}
.rx-home-featured-badge {
display: inline-flex;
margin-bottom: 0.85rem;
padding: 0.35rem 0.75rem;
border-radius: var(--rx-home-radius-pill);
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.035em;
backdrop-filter: blur(12px);
}
.rx-home-featured-main-title {
margin: 0;
max-width: 18ch;
color: #ffffff;
font-size: clamp(1.85rem, 4vw, 3.5rem);
font-weight: 950;
line-height: 1.03;
letter-spacing: -0.05em;
}
.rx-home-featured-main-title a {
color: inherit;
text-decoration: none;
}
.rx-home-featured-main-title a:hover {
text-decoration: underline;
text-decoration-thickness: 0.06em;
}
.rx-home-featured-main-excerpt {
max-width: 62ch;
margin: 0.85rem 0 0;
color: rgba(255, 255, 255, 0.86);
font-size: 1rem;
line-height: 1.7;
}
.rx-home-featured-list {
display: grid;
gap: 1rem;
}
.rx-home-featured-card {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr);
gap: 1rem;
padding: 1rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
transition:
transform 180ms ease,
box-shadow 180ms ease,
border-color 180ms ease;
}
.rx-home-featured-card:hover {
border-color: color-mix(in srgb, var(--rx-home-primary) 30%, var(--rx-home-border));
transform: translateY(-3px);
box-shadow: var(--rx-home-shadow-md);
}
.rx-home-featured-card-thumb {
overflow: hidden;
border-radius: var(--rx-home-radius-lg);
background: var(--rx-home-surface-soft);
}
.rx-home-featured-card-thumb img {
width: 100%;
height: 100%;
min-height: 7rem;
object-fit: cover;
transition: transform 300ms ease;
}
.rx-home-featured-card:hover .rx-home-featured-card-thumb img {
transform: scale(1.06);
}
.rx-home-featured-card-title {
margin: 0;
color: var(--rx-home-text);
font-size: 1rem;
font-weight: 900;
line-height: 1.35;
}
.rx-home-featured-card-title a {
color: inherit;
text-decoration: none;
}
.rx-home-featured-card-title a:hover {
color: var(--rx-home-primary);
}
.rx-home-post-meta {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.85rem;
margin-top: 0.65rem;
color: var(--rx-home-text-muted);
font-size: 0.8125rem;
font-weight: 700;
}
.rx-home-post-meta a {
color: inherit;
text-decoration: none;
}
.rx-home-post-meta a:hover {
color: var(--rx-home-primary);
}
/* =========================================================
09. LATEST POSTS
========================================================= */
.rx-home-latest {
background: var(--rx-home-surface);
}
.rx-home-post-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.rx-home-post-card {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
transition:
transform 200ms ease,
box-shadow 200ms ease,
border-color 200ms ease;
}
.rx-home-post-card:hover {
border-color: color-mix(in srgb, var(--rx-home-primary) 30%, var(--rx-home-border));
transform: translateY(-5px);
box-shadow: var(--rx-home-shadow-lg);
}
.rx-home-post-thumb {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--rx-home-surface-soft);
}
.rx-home-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 350ms ease;
}
.rx-home-post-card:hover .rx-home-post-thumb img {
transform: scale(1.06);
}
.rx-home-post-category {
position: absolute;
top: 0.8rem;
left: 0.8rem;
z-index: 1;
display: inline-flex;
padding: 0.35rem 0.7rem;
border-radius: var(--rx-home-radius-pill);
background: rgba(255, 255, 255, 0.9);
color: var(--rx-home-primary-dark);
font-size: 0.75rem;
font-weight: 900;
text-decoration: none;
backdrop-filter: blur(12px);
}
.rx-home-post-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.25rem;
}
.rx-home-post-title {
margin: 0;
color: var(--rx-home-text);
font-size: clamp(1.1rem, 1.7vw, 1.35rem);
font-weight: 950;
line-height: 1.25;
letter-spacing: -0.02em;
}
.rx-home-post-title a {
color: inherit;
text-decoration: none;
}
.rx-home-post-title a:hover {
color: var(--rx-home-primary);
}
.rx-home-post-excerpt {
margin: 0.75rem 0 0;
color: var(--rx-home-text-soft);
font-size: 0.95rem;
line-height: 1.7;
}
.rx-home-post-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
padding-top: 1.15rem;
}
.rx-home-read-more {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--rx-home-primary);
font-size: 0.9rem;
font-weight: 900;
text-decoration: none;
}
.rx-home-read-more:hover {
gap: 0.5rem;
text-decoration: none;
}
.rx-home-view-all {
margin-top: clamp(2rem, 4vw, 3rem);
text-align: center;
}
/* =========================================================
10. DOCTOR / AUTHOR SECTION
========================================================= */
.rx-home-doctor {
background:
linear-gradient(135deg, rgba(7, 86, 200, 0.08), rgba(15, 159, 143, 0.08)),
var(--rx-home-bg);
}
.rx-home-doctor-card {
display: grid;
grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding: clamp(1.25rem, 4vw, 3rem);
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-2xl);
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--rx-home-shadow-lg);
backdrop-filter: blur(18px);
}
.rx-home-doctor-media {
position: relative;
overflow: hidden;
border-radius: var(--rx-home-radius-2xl);
background: var(--rx-home-gradient-soft);
}
.rx-home-doctor-media img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.rx-home-doctor-content {
max-width: 720px;
}
.rx-home-doctor-name {
margin: 0;
color: var(--rx-home-text);
font-size: clamp(1.75rem, 3vw, 3rem);
font-weight: 950;
line-height: 1.1;
letter-spacing: -0.04em;
}
.rx-home-doctor-role {
margin: 0.5rem 0 0;
color: var(--rx-home-primary);
font-size: 1.05rem;
font-weight: 900;
}
.rx-home-doctor-text {
margin: 1rem 0 0;
color: var(--rx-home-text-soft);
font-size: 1rem;
line-height: 1.8;
}
.rx-home-doctor-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.85rem;
margin-top: 1.5rem;
}
.rx-home-doctor-point {
display: flex;
align-items: flex-start;
gap: 0.65rem;
padding: 0.9rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-lg);
background: var(--rx-home-surface);
}
.rx-home-doctor-point-icon {
display: grid;
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
place-items: center;
border-radius: 50%;
background: var(--rx-home-success-soft);
color: var(--rx-home-success);
font-size: 0.85rem;
}
.rx-home-doctor-point-text {
margin: 0;
color: var(--rx-home-text-soft);
font-size: 0.925rem;
line-height: 1.55;
}
/* =========================================================
11. CONDITION LIBRARY
========================================================= */
.rx-home-library {
background: var(--rx-home-surface);
}
.rx-home-library-layout {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: clamp(1rem, 3vw, 2rem);
}
.rx-home-library-sidebar {
position: sticky;
top: calc(var(--rx-header-height, 80px) + 1rem);
align-self: start;
padding: 1rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home-library-nav {
display: grid;
gap: 0.35rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-home-library-nav a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.7rem 0.8rem;
border-radius: var(--rx-home-radius-md);
color: var(--rx-home-text-soft);
font-size: 0.925rem;
font-weight: 800;
text-decoration: none;
}
.rx-home-library-nav a:hover,
.rx-home-library-nav a[aria-current="page"],
.rx-home-library-nav .is-active > a {
background: var(--rx-home-primary-soft);
color: var(--rx-home-primary-dark);
}
.rx-home-library-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.rx-home-condition-card {
padding: 1.25rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home-condition-title {
margin: 0;
color: var(--rx-home-text);
font-size: 1.08rem;
font-weight: 950;
line-height: 1.3;
}
.rx-home-condition-title a {
color: inherit;
text-decoration: none;
}
.rx-home-condition-title a:hover {
color: var(--rx-home-primary);
}
.rx-home-condition-text {
margin: 0.65rem 0 0;
color: var(--rx-home-text-muted);
font-size: 0.925rem;
line-height: 1.7;
}
.rx-home-condition-tags {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.9rem;
}
.rx-home-condition-tag {
display: inline-flex;
padding: 0.3rem 0.6rem;
border-radius: var(--rx-home-radius-pill);
background: var(--rx-home-surface-soft);
color: var(--rx-home-text-muted);
font-size: 0.75rem;
font-weight: 800;
}
/* =========================================================
12. EMERGENCY / CTA BLOCKS
========================================================= */
.rx-home-alert {
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid color-mix(in srgb, var(--rx-home-danger) 24%, var(--rx-home-border));
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-danger-soft);
}
.rx-home-alert-grid {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 1rem;
align-items: center;
}
.rx-home-alert-icon {
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border-radius: var(--rx-home-radius-lg);
background: #ffffff;
color: var(--rx-home-danger);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home-alert-title {
margin: 0;
color: var(--rx-home-text);
font-size: 1.25rem;
font-weight: 950;
}
.rx-home-alert-text {
margin: 0.35rem 0 0;
color: var(--rx-home-text-soft);
line-height: 1.65;
}
.rx-home-cta {
position: relative;
overflow: hidden;
border-radius: var(--rx-home-radius-2xl);
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.22), transparent 30rem),
var(--rx-home-gradient-primary);
color: #ffffff;
box-shadow: var(--rx-home-shadow-xl);
}
.rx-home-cta-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 2rem;
align-items: center;
padding: clamp(2rem, 5vw, 4rem);
}
.rx-home-cta-title {
margin: 0;
color: #ffffff;
font-size: clamp(1.8rem, 4vw, 3.25rem);
font-weight: 950;
line-height: 1.08;
letter-spacing: -0.04em;
}
.rx-home-cta-text {
max-width: 62ch;
margin: 1rem 0 0;
color: rgba(255, 255, 255, 0.88);
font-size: 1.05rem;
line-height: 1.75;
}
.rx-home-cta .rx-home-btn-secondary {
border-color: rgba(255, 255, 255, 0.3);
background: #ffffff;
color: var(--rx-home-primary-dark);
}
/* =========================================================
13. NEWSLETTER SECTION
========================================================= */
.rx-home-newsletter {
background: var(--rx-home-bg);
}
.rx-home-newsletter-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
gap: clamp(1rem, 4vw, 3rem);
align-items: center;
padding: clamp(1.5rem, 5vw, 4rem);
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-2xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-lg);
}
.rx-home-newsletter-title {
margin: 0;
color: var(--rx-home-text);
font-size: clamp(1.75rem, 3vw, 3rem);
font-weight: 950;
line-height: 1.12;
letter-spacing: -0.04em;
}
.rx-home-newsletter-text {
margin: 0.85rem 0 0;
color: var(--rx-home-text-soft);
line-height: 1.75;
}
.rx-home-newsletter-form {
display: flex;
gap: 0.65rem;
padding: 0.55rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-pill);
background: var(--rx-home-surface-soft);
}
.rx-home-newsletter-form input[type="email"],
.rx-home-newsletter-form input[type="text"] {
flex: 1 1 auto;
min-width: 0;
min-height: 3rem;
padding: 0.75rem 1rem;
border: 0;
border-radius: var(--rx-home-radius-pill);
background: transparent;
color: var(--rx-home-text);
outline: none;
}
.rx-home-newsletter-form button,
.rx-home-newsletter-submit {
flex: 0 0 auto;
min-height: 3rem;
padding-inline: 1.25rem;
border: 0;
border-radius: var(--rx-home-radius-pill);
background: var(--rx-home-gradient-primary);
color: #ffffff;
font-weight: 900;
cursor: pointer;
}
/* =========================================================
14. FAQ SECTION
========================================================= */
.rx-home-faq {
background: var(--rx-home-surface);
}
.rx-home-faq-list {
display: grid;
gap: 0.85rem;
max-width: 920px;
margin-inline: auto;
}
.rx-home-faq-item {
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 1.25rem;
color: var(--rx-home-text);
font-weight: 950;
cursor: pointer;
list-style: none;
}
.rx-home-faq-item summary::-webkit-details-marker {
display: none;
}
.rx-home-faq-item summary::after {
content: "+";
display: grid;
flex: 0 0 auto;
width: 1.75rem;
height: 1.75rem;
place-items: center;
border-radius: 50%;
background: var(--rx-home-primary-soft);
color: var(--rx-home-primary);
font-weight: 950;
}
.rx-home-faq-item[open] summary::after {
content: "–";
}
.rx-home-faq-content {
padding: 0 1.25rem 1.25rem;
color: var(--rx-home-text-soft);
line-height: 1.75;
}
.rx-home-faq-content > :first-child {
margin-top: 0;
}
.rx-home-faq-content > :last-child {
margin-bottom: 0;
}
/* =========================================================
15. GUTENBERG HOMEPAGE SUPPORT
========================================================= */
.rx-home .wp-block-group.alignfull,
body.home .wp-block-group.alignfull {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.rx-home .wp-block-cover {
border-radius: var(--rx-home-radius-2xl);
overflow: hidden;
}
.rx-home .wp-block-button__link {
border-radius: var(--rx-home-radius-pill);
font-weight: 900;
}
.rx-home .wp-block-columns {
gap: clamp(1rem, 3vw, 2rem);
}
.rx-home .wp-block-latest-posts {
display: grid;
gap: 1rem;
margin: 0;
padding: 0;
}
.rx-home .wp-block-latest-posts li {
padding: 1rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-lg);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home .wp-block-query .wp-block-post-template {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
.rx-home .wp-block-query .wp-block-post {
overflow: hidden;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home .wp-block-post-title {
padding-inline: 1rem;
}
.rx-home .wp-block-post-excerpt {
padding-inline: 1rem;
color: var(--rx-home-text-soft);
}
.rx-home .wp-block-post-featured-image img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
/* =========================================================
16. WORDPRESS WIDGETS
========================================================= */
.rx-home .widget {
padding: 1.25rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-xl);
background: var(--rx-home-surface);
box-shadow: var(--rx-home-shadow-sm);
}
.rx-home .widget-title,
.rx-home .widgettitle {
margin: 0 0 1rem;
color: var(--rx-home-text);
font-size: 1.1rem;
font-weight: 950;
}
.rx-home .widget ul {
display: grid;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.rx-home .widget li a {
color: var(--rx-home-text-soft);
font-weight: 700;
text-decoration: none;
}
.rx-home .widget li a:hover {
color: var(--rx-home-primary);
}
.rx-home .widget_search form,
.rx-home .search-form {
display: flex;
gap: 0.5rem;
}
.rx-home .widget_search input[type="search"],
.rx-home .search-field {
min-width: 0;
flex: 1 1 auto;
padding: 0.75rem 0.9rem;
border: 1px solid var(--rx-home-border);
border-radius: var(--rx-home-radius-md);
background: var(--rx-home-surface);
color: var(--rx-home-text);
}
.rx-home .widget_search input[type="submit"],
.rx-home .search-submit {
padding-inline: 1rem;
border: 0;
border-radius: var(--rx-home-radius-md);
background: var(--rx-home-primary);
color: #ffffff;
font-weight: 900;
cursor: pointer;
}
/* =========================================================
17. ACCESSIBILITY
========================================================= */
.rx-home :focus {
outline: none;
}
.rx-home :focus-visible {
outline: 3px solid color-mix(in srgb, var(--rx-home-primary) 45%, transparent);
outline-offset: 3px;
}
.rx-home .screen-reader-text,
.rx-home .sr-only {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.rx-home .skip-link:focus {
position: fixed;
z-index: 999999;
top: 1rem;
left: 1rem;
width: auto;
height: auto;
clip-path: none;
padding: 0.75rem 1rem;
border-radius: var(--rx-home-radius-md);
background: var(--rx-home-primary);
color: #ffffff;
font-weight: 900;
}
.rx-home [aria-disabled="true"],
.rx-home .is-disabled {
opacity: 0.55;
pointer-events: none;
}
.rx-home a,
.rx-home button,
.rx-home input,
.rx-home textarea,
.rx-home select {
touch-action: manipulation;
}
/* =========================================================
18. ANIMATION
========================================================= */
@keyframes rxHomeFadeUp {
from {
opacity: 0;
transform: translate3d(0, 1.25rem, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes rxHomeFloat {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -0.65rem, 0);
}
}
@keyframes rxHomePulse {
0% {
box-shadow: 0 0 0 0 rgba(7, 86, 200, 0.28);
}
70% {
box-shadow: 0 0 0 0.8rem rgba(7, 86, 200, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(7, 86, 200, 0);
}
}
.rx-home-animate-fade-up {
animation: rxHomeFadeUp 680ms ease both;
}
.rx-home-animate-float {
animation: rxHomeFloat 5s ease-in-out infinite;
}
.rx-home-animate-pulse {
animation: rxHomePulse 2s ease infinite;
}
.rx-home [data-rx-reveal] {
opacity: 0;
transform: translateY(1rem);
}
.rx-home [data-rx-reveal].is-visible {
animation: rxHomeFadeUp 650ms ease both;
}
@media (prefers-reduced-motion: reduce) {
.rx-home *,
.rx-home *::before,
.rx-home *::after {
scroll-behavior: auto !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* =========================================================
19. DARK MODE
========================================================= */
@media (prefers-color-scheme: dark) {
body:not(.rx-light-mode) .rx-home,
body.home:not(.rx-light-mode) {
--rx-home-bg: #07111f;
--rx-home-surface: #0e1a2b;
--rx-home-surface-soft: #132238;
--rx-home-border: rgba(148, 163, 184, 0.2);
--rx-home-text: #f8fafc;
--rx-home-text-soft: #cbd5e1;
--rx-home-text-muted: #94a3b8;
--rx-home-primary-soft: rgba(59, 130, 246, 0.16);
--rx-home-secondary-soft: rgba(20, 184, 166, 0.16);
--rx-home-danger-soft: rgba(239, 68, 68, 0.14);
--rx-home-success-soft: rgba(34, 197, 94, 0.14);
--rx-home-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
--rx-home-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
--rx-home-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.36);
--rx-home-shadow-xl: 0 30px 80px rgba(0, 0, 0, 0.42);
--rx-home-gradient-hero:
radial-gradient(circle at top left, rgba(15, 159, 143, 0.16), transparent 32rem),
radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 34rem),
linear-gradient(180deg, #07111f 0%, #0e1a2b 100%);
}
body:not(.rx-light-mode) .rx-home-hero-badge,
body:not(.rx-light-mode) .rx-home-hero-card,
body:not(.rx-light-mode) .rx-home-floating-card,
body:not(.rx-light-mode) .rx-home-stat-card,
body:not(.rx-light-mode) .rx-home-doctor-card {
background: rgba(14, 26, 43, 0.78);
}
body:not(.rx-light-mode) .rx-home-hero-metric,
body:not(.rx-light-mode) .rx-home-search-tag {
background: rgba(15, 23, 42, 0.66);
}
body:not(.rx-light-mode) .rx-home-search-form,
body:not(.rx-light-mode) .rx-home-newsletter-card,
body:not(.rx-light-mode) .rx-home-post-card,
body:not(.rx-light-mode) .rx-home-category-card {
background: var(--rx-home-surface);
}
}
body.rx-dark-mode .rx-home,
body.home.rx-dark-mode {
--rx-home-bg: #07111f;
--rx-home-surface: #0e1a2b;
--rx-home-surface-soft: #132238;
--rx-home-border: rgba(148, 163, 184, 0.2);
--rx-home-text: #f8fafc;
--rx-home-text-soft: #cbd5e1;
--rx-home-text-muted: #94a3b8;
}
/* =========================================================
20. RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
.rx-home-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rx-home-post-grid,
.rx-home .wp-block-query .wp-block-post-template {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rx-home-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.rx-home-hero-grid,
.rx-home-featured-grid,
.rx-home-doctor-card,
.rx-home-newsletter-card,
.rx-home-library-layout,
.rx-home-cta-inner {
grid-template-columns: 1fr;
}
.rx-home-hero-title {
max-width: 15ch;
}
.rx-home-library-sidebar {
position: static;
}
.rx-home-alert-grid {
grid-template-columns: 1fr;
}
.rx-home-alert-icon {
width: 2.75rem;
height: 2.75rem;
}
.rx-home-floating-card {
position: relative;
right: auto;
bottom: auto;
max-width: none;
margin-top: 1rem;
}
}
@media (max-width: 760px) {
.rx-home-category-grid,
.rx-home-post-grid,
.rx-home-library-grid,
.rx-home .wp-block-query .wp-block-post-template {
grid-template-columns: 1fr;
}
.rx-home-featured-card {
grid-template-columns: 6.5rem minmax(0, 1fr);
}
.rx-home-featured-card-thumb img {
min-height: 6.5rem;
}
.rx-home-doctor-points {
grid-template-columns: 1fr;
}
.rx-home-search-form,
.rx-home-newsletter-form {
flex-direction: column;
align-items: stretch;
border-radius: var(--rx-home-radius-xl);
}
.rx-home-search-submit,
.rx-home-search button[type="submit"],
.rx-home-newsletter-form button,
.rx-home-newsletter-submit {
width: 100%;
}
.rx-home-hero-actions {
align-items: stretch;
}
.rx-home-btn {
width: 100%;
}
}
@media (max-width: 560px) {
.rx-home-container,
.rx-home .container,
body.home .site-main > .container,
.rx-home-container-wide {
width: min(100% - 1.25rem, var(--rx-home-max-width));
}
.rx-home-section {
padding-block: 2.75rem;
}
.rx-home-hero {
padding-block: 3.25rem;
}
.rx-home-hero-card-header,
.rx-home-hero-card-body {
padding: 1rem;
}
.rx-home-hero-metric {
grid-template-columns: auto 1fr;
}
.rx-home-hero-metric-tag {
grid-column: 2;
justify-self: start;
}
.rx-home-stats-grid {
grid-template-columns: 1fr;
}
.rx-home-featured-main,
.rx-home-featured-main .rx-post-thumbnail,
.rx-home-featured-main img {
min-height: 26rem;
}
.rx-home-featured-card {
grid-template-columns: 1fr;
}
.rx-home-featured-card-thumb {
aspect-ratio: 16 / 10;
}
.rx-home-cta-inner,
.rx-home-newsletter-card,
.rx-home-doctor-card {
padding: 1.25rem;
}
}
/* =========================================================
21. PRINT
========================================================= */
@media print {
.rx-home {
background: #ffffff !important;
color: #000000 !important;
}
.rx-home-hero,
.rx-home-section,
.rx-home-categories,
.rx-home-featured,
.rx-home-latest,
.rx-home-doctor,
.rx-home-library,
.rx-home-faq {
background: #ffffff !important;
padding-block: 1.5rem !important;
}
.rx-home-search,
.rx-home-hero-actions,
.rx-home-newsletter,
.rx-home-cta,
.rx-home-btn,
.rx-home-read-more,
.rx-home-view-all,
.rx-home-floating-card {
display: none !important;
}
.rx-home-post-card,
.rx-home-category-card,
.rx-home-condition-card,
.rx-home-faq-item,
.rx-home-doctor-card {
break-inside: avoid;
box-shadow: none !important;
border-color: #cccccc !important;
}
.rx-home a {
color: #000000 !important;
text-decoration: underline !important;
}
.rx-home img {
max-width: 100% !important;
filter: grayscale(100%);
}
}Best placement:
rx-theme/
└── assets/
└── static/
└── static-css/
└── pages/
└── home.cssThen enqueue only on homepage:
if ( is_front_page() || is_home() ) {
wp_enqueue_style(
'rx-home',
get_template_directory_uri() . '/assets/static/static-css/pages/home.css',
array(),
wp_get_theme()->get( 'Version' )
);
}