/* RankwellPress Pro bundle: pro-single */
/* --- premium-single.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Premium Single Post Layout
File: assets/css/premium-single.css
═══════════════════════════════════════════════════════════ */
/* =========================================================
0. DESIGN TOKENS
========================================================= */
.rwp-premium-single {
--rwp-radius-sm: 8px;
--rwp-radius-md: 12px;
--rwp-radius-lg: 16px;
--rwp-radius-pill: 999px;
--rwp-space-1: 8px;
--rwp-space-2: 12px;
--rwp-space-3: 16px;
--rwp-space-4: 24px;
--rwp-space-5: 32px;
--rwp-space-6: 48px;
--rwp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--rwp-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.08);
--rwp-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
--rwp-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* =========================================================
1. LAYOUT — Mobile-first Flex, desktop row
========================================================= */
.rwp-premium-single {
display: flex;
flex-direction: column;
gap: var(--rwp-space-5);
margin: 32px auto 80px;
padding-left: var(--wp--style--root--padding-left, max(20px, env(safe-area-inset-left)));
padding-right: var(--wp--style--root--padding-right, max(20px, env(safe-area-inset-right)));
width: 100%;
max-width: var(--wp--style--global--wide-size, 1280px);
box-sizing: border-box;
position: relative;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.rwp-premium-single__article {
min-width: 0;
width: 100%;
box-sizing: border-box;
position: relative;
}
.rwp-premium-single__sidebar {
min-width: 0;
width: 100%;
box-sizing: border-box;
align-self: start;
}
@media (min-width: 769px) {
.rwp-premium-single {
padding-left: 0;
padding-right: 0;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--rwp-space-5);
}
.rwp-premium-single__article {
flex: 1 1 0%;
min-width: 0;
}
.rwp-premium-single__sidebar {
flex: 0 0 var(--rw-sidebar-width, 320px);
max-width: var(--rw-sidebar-width, 320px);
}
.rwp-premium-single.has-sidebar-none {
flex-direction: column;
align-items: center;
}
.rwp-premium-single.has-sidebar-none .rwp-premium-single__article {
flex: 0 1 auto;
width: 100%;
max-width: 840px;
}
}
@media (min-width: 992px) {
.rwp-premium-single.has-sidebar-right,
.rwp-premium-single.has-sidebar-left {
gap: 60px;
}
.rwp-premium-single__sidebar.rwp-sidebar-sticky {
position: sticky;
top: 90px;
max-height: calc(100vh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
padding-right: 8px;
}
.rwp-premium-single__sidebar.rwp-sidebar-sticky::-webkit-scrollbar { width: 4px; }
.rwp-premium-single__sidebar.rwp-sidebar-sticky::-webkit-scrollbar-thumb {
background: var(--rw-border-light, #e5e7eb);
border-radius: var(--rwp-radius-pill);
}
}
/* =========================================================
2. HEADER
========================================================= */
.rwp-premium-single__header { margin-bottom: 24px; }
.rwp-premium-single__title {
font-size: clamp(2rem, 5vw + 1rem, 3.5rem);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 12px 0 16px;
color: var(--rw-text-heading, #111827);
overflow-wrap: break-word;
word-wrap: break-word;
text-rendering: optimizeLegibility;
}
.rwp-premium-single__deck {
font-size: clamp(1.05rem, 2vw + 0.5rem, 1.25rem);
line-height: 1.55;
color: var(--rw-text-muted, #4b5563);
margin: 0 0 16px;
max-width: 68ch;
font-weight: 400;
}
.rwp-premium-single .meta-reading-time {
padding: 4px 12px;
background: color-mix(in srgb, var(--rw-color-primary, #0d7c3e) 10%, transparent);
color: var(--rw-color-primary, #0d7c3e);
border-radius: var(--rwp-radius-pill);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
}
.rwp-tts-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid var(--rw-border-light, #e5e7eb);
background: var(--rw-bg-content, #ffffff);
color: var(--rw-text-muted, #6b7280);
border-radius: 50%;
cursor: pointer;
box-shadow: var(--rwp-shadow-sm);
transition: all var(--rwp-transition);
flex-shrink: 0;
}
.rwp-tts-btn:hover,
.rwp-tts-btn:focus-visible {
color: var(--rw-color-primary, #0d7c3e);
border-color: var(--rw-color-primary, #0d7c3e);
background: color-mix(in srgb, var(--rw-color-primary, #0d7c3e) 4%, var(--rw-bg-content, #ffffff));
transform: translateY(-2px);
box-shadow: var(--rwp-shadow-md);
}
.rwp-tts-btn[aria-pressed="true"] {
background: var(--rw-color-primary, #0d7c3e);
color: #ffffff;
border-color: var(--rw-color-primary, #0d7c3e);
}
.rwp-tts-btn svg { width: 12px; height: 12px; }
/* =========================================================
3. HERO IMAGE
========================================================= */
.rwp-premium-single__hero { margin: 0 0 24px; padding: 0; }
.rwp-premium-single__hero-frame {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--rwp-radius-lg);
background: var(--rw-bg-alt, #f3f4f6);
box-shadow: var(--rwp-shadow-md);
transform: translateZ(0);
}
.rwp-premium-single__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
padding: 0;
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.rwp-premium-single__hero:hover .rwp-premium-single__hero-img { transform: scale(1.03); }
.rwp-premium-single__hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.4) 100%);
pointer-events: none;
}
.rwp-premium-single__hero-caption {
font-size: 0.875rem;
line-height: 1.5;
color: var(--rw-color-primary, #0d7c3e);
margin-top: 8px;
padding: 0 8px;
border-left: 4px solid var(--rw-color-primary, #0d7c3e);
}
/* =========================================================
4. ARTICLE BODY
========================================================= */
.rwp-premium-single__body {
font-family: var(--rw-font-article, var(--rw-font-body));
font-size: var(--rw-article-size, 1.125rem);
font-weight: var(--rw-font-article-weight, 400);
line-height: var(--rw-article-lh, 1.85);
color: var(--rw-text-body, #374151);
overflow-wrap: break-word;
word-wrap: break-word;
text-rendering: optimizeLegibility;
}
.rwp-premium-single__body p { margin: 0 0 var(--rw-article-paragraph-spacing, 1.6em); }
.rwp-premium-single__body a:link,
.rwp-premium-single__body a:visited {
color: var(--rw-color-link, var(--rw-color-primary, #0d7c3e));
text-decoration: none;
box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--rw-color-primary, #0d7c3e) 30%, transparent);
transition: box-shadow var(--rwp-transition), color var(--rwp-transition);
}
.rwp-premium-single__body a:hover,
.rwp-premium-single__body a:focus {
color: var(--rw-color-link-hover, var(--rw-color-accent, #0f1e33));
box-shadow: inset 0 -1.5em 0 color-mix(in srgb, var(--rw-color-primary, #0d7c3e) 15%, transparent);
}
.rwp-premium-single__body img,
.rwp-premium-single__body iframe,
.rwp-premium-single__body video,
.rwp-premium-single__body pre {
max-width: 100%;
height: auto;
box-sizing: border-box;
border-radius: var(--rwp-radius-sm);
}
.rwp-premium-single__body table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-collapse: collapse;
border-radius: var(--rwp-radius-sm);
}
.rwp-premium-single__body h2 {
font-size: var(--rw-h2-size, 2rem);
font-weight: 800;
line-height: 1.25;
margin: 2em 0 0.6em;
color: var(--rw-text-heading, #111827);
scroll-margin-top: 120px;
letter-spacing: -0.02em;
}
.rwp-premium-single__body h3 {
font-size: var(--rw-h3-size, 1.5rem);
font-weight: 700;
line-height: 1.3;
margin: 1.6em 0 0.5em;
color: var(--rw-text-heading, #111827);
scroll-margin-top: 120px;
}
.rwp-premium-single__body blockquote {
position: relative;
border-left: 0;
padding: 20px 28px;
margin: 2em 0;
font-size: 1.15em;
font-style: italic;
font-weight: 500;
color: var(--rw-text-heading, #111827);
background: linear-gradient(135deg, var(--rw-bg-alt, #f9fafb), var(--rw-bg-content, #ffffff));
border-radius: var(--rwp-radius-md);
box-shadow: var(--rwp-shadow-sm);
}
.rwp-premium-single__body blockquote::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--rw-color-primary, #0d7c3e);
border-radius: var(--rwp-radius-md) 0 0 var(--rwp-radius-md);
}
.rwp-premium-single__body pre {
background: #111827;
color: #e5e7eb;
padding: 20px;
border-radius: var(--rwp-radius-md);
overflow-x: auto;
font-size: 0.9em;
line-height: 1.7;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.rwp-premium-single__body code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.85em;
}
.rwp-premium-single__body :not(pre) > code {
background: var(--rw-bg-alt, #f3f4f6);
padding: 4px 8px;
border-radius: 6px;
color: var(--rw-color-primary, #0d7c3e);
font-weight: 600;
}
.rwp-premium-single__body ul,
.rwp-premium-single__body ol {
margin: 0 0 1.6em;
padding-left: 1.2em;
}
.rwp-premium-single__body li { margin-bottom: 0.5em; }
.rwp-premium-single__body li::marker {
color: var(--rw-color-primary, #0d7c3e);
font-weight: bold;
}
/* =========================================================
5. READING PROGRESS BAR
========================================================= */
.rwp-reading-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 4px;
background: transparent;
z-index: 9999;
pointer-events: none;
}
.rwp-reading-progress__bar {
height: 100%;
width: 0;
background: linear-gradient(90deg,
var(--rw-color-primary, #0d7c3e),
color-mix(in srgb, var(--rw-color-primary, #0d7c3e) 40%, var(--rw-color-accent, #0f1e33)));
transition: width 0.1s ease-out;
box-shadow: 0 0 10px color-mix(in srgb, var(--rw-color-primary, #0d7c3e) 50%, transparent);
}
/* =========================================================
6. TABLE OF CONTENTS — container only
========================================================= */
.rwp-toc {
margin: 24px 0;
padding: 20px 24px;
background: rgba(249, 250, 251, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--rw-border-light, #e5e7eb);
border-radius: var(--rwp-radius-md);
box-shadow: var(--rwp-shadow-sm);
}
/* =========================================================
7. NEWSLETTER CTA
========================================================= */
.rwp-newsletter-cta { margin: 24px 0; }
/* =========================================================
8. EXTENDED SHARE BUTTONS
========================================================= */
.rwp-share-extended-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: var(--rw-bg-alt, #f3f4f6);
color: var(--rw-text-body, #374151);
border: 1px solid var(--rw-border-light, #e5e7eb);
border-radius: var(--rwp-radius-pill);
text-decoration: none;
font-size: 0.9rem;
font-weight: 700;
transition: all var(--rwp-transition);
}
.rwp-share-extended-btn:hover {
background: var(--rw-color-primary, #0d7c3e);
color: #ffffff;
border-color: var(--rw-color-primary, #0d7c3e);
transform: translateY(-2px);
box-shadow: var(--rwp-shadow-sm);
}
.rwp-share-extended-btn svg { width: 18px; height: 18px; }
.rwp-share-copy { cursor: pointer; }
/* =========================================================
9. COMMENTS WRAPPER
========================================================= */
.rwp-premium-single__comments {
margin: 32px 0 3rem;
padding-top: 32px;
border-top: 1px solid var(--rw-border-light, #e5e7eb);
}
/* =========================================================
10. DARK MODE — base layout only
========================================================= */
html[data-theme="dark"] .rwp-premium-single__title,
html[data-theme="dark"] .rwp-premium-single__body h2,
html[data-theme="dark"] .rwp-premium-single__body h3 {
color: #f8fafc;
}
html[data-theme="dark"] .rwp-premium-single__deck { color: #94a3b8; }
html[data-theme="dark"] .rwp-premium-single__body { color: #cbd5e1; }
html[data-theme="dark"] .rwp-premium-single__body blockquote {
background: linear-gradient(135deg, #1e293b, #0f172a);
color: #e2e8f0;
}
html[data-theme="dark"] .rwp-premium-single__body pre {
background: #020617;
box-shadow: inset 0 0 0 1px #334155;
}
html[data-theme="dark"] .rwp-premium-single__body :not(pre) > code {
background: #1e293b;
color: #4ade80;
}
html[data-theme="dark"] .rwp-toc {
background: rgba(30, 41, 59, 0.7);
border-color: #334155;
}
html[data-theme="dark"] .rwp-tts-btn {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
html[data-theme="dark"] .rwp-share-extended-btn {
background: #1e293b;
border-color: #334155;
color: #cbd5e1;
}
html[data-theme="dark"] .rwp-premium-single .meta-reading-time {
background: color-mix(in srgb, var(--rw-color-primary, #4ade80) 15%, transparent);
color: var(--rw-color-primary, #4ade80);
}
/* =========================================================
11. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rwp-premium-single__hero-img,
.rwp-share-rail__btn {
transition: none !important;
}
.rwp-premium-single__hero:hover .rwp-premium-single__hero-img {
transform: none !important;
}
}
/* =========================================================
12. PRINT
========================================================= */
@media print {
.rwp-reading-progress,
.rwp-share-rail,
.rwp-tts-btn,
.rwp-newsletter-cta,
.rwp-share-extended-btn {
display: none !important;
}
.rwp-premium-single {
display: block;
margin: 0;
padding: 0;
}
.rwp-premium-single__title { font-size: 24pt; color: #000; }
.rwp-premium-single__body { font-size: 12pt; line-height: 1.6; color: #000; }
.rwp-premium-related,
.rwp-premium-trending {
display: none;
}
}
/* =========================================================
13. FONT SIZE ADJUSTER — token override
========================================================= */
.rwp-premium-single__body.rwp-content-text-sm {
--rw-article-size: 0.9375rem;
--rw-article-lh: 1.7;
}
.rwp-premium-single__body.rwp-content-text-md {
--rw-article-size: 1.0625rem;
--rw-article-lh: 1.85;
}
.rwp-premium-single__body.rwp-content-text-lg {
--rw-article-size: 1.1875rem;
--rw-article-lh: 1.9;
}
.rwp-premium-single__body.rwp-content-text-xl {
--rw-article-size: 1.3125rem;
--rw-article-lh: 1.95;
}
@media (max-width: 768px) {
.rwp-premium-single__body.rwp-content-text-sm { --rw-article-size: 0.9rem; }
.rwp-premium-single__body.rwp-content-text-md { --rw-article-size: 1rem; }
.rwp-premium-single__body.rwp-content-text-lg { --rw-article-size: 1.1rem; }
.rwp-premium-single__body.rwp-content-text-xl { --rw-article-size: 1.225rem; }
}
/* =========================================================
14. AD LABEL
========================================================= */
.rwp-ad-wrapper .rwp-ad-label {
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rw-text-muted, #9ca3af);
text-align: center;
margin: 0 0 8px;
padding: 0;
line-height: 1;
}
html[data-theme="dark"] .rwp-ad-wrapper .rwp-ad-label { color: #94a3b8; }
/* --- premium/key-takeaways.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Key Takeaways
File: assets/css/premium/key-takeaways.css
═══════════════════════════════════════════════════════════ */
.rwp-key-takeaways {
margin: 40px 0;
padding: 28px 32px;
background: var(--rw-bg-alt, #f9fafb);
border: 0;
border-left: 4px solid var(--rw-color-primary, #dc2626);
border-radius: 0 var(--rwp-radius-md, 12px) var(--rwp-radius-md, 12px) 0;
box-shadow: none;
position: relative;
overflow: hidden;
}
.rwp-key-takeaways__title {
font-size: 0.85rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.14em;
margin: 0 0 20px;
color: var(--rw-color-primary, #dc2626);
display: flex;
align-items: center;
gap: 10px;
line-height: 1;
}
.rwp-key-takeaways__title::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background: var(--rw-color-primary, #dc2626);
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
flex-shrink: 0;
}
.rwp-key-takeaways__list {
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 1;
}
.rwp-key-takeaways__list li {
position: relative;
margin-bottom: 14px;
padding-left: 24px;
line-height: 1.65;
color: var(--rw-text-body, #374151);
font-weight: 500;
font-size: 1.02rem;
}
.rwp-key-takeaways__list li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--rw-color-primary, #dc2626);
transform: translateY(-50%);
}
.rwp-key-takeaways__list li:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
.rwp-key-takeaways { padding: 24px 20px; margin: 32px 0; }
.rwp-key-takeaways__title { font-size: 0.78rem; margin-bottom: 16px; }
.rwp-key-takeaways__list li { font-size: 0.98rem; margin-bottom: 12px; padding-left: 22px; }
}
html[data-theme="dark"] .rwp-key-takeaways {
background: rgba(255, 255, 255, 0.03);
border: 0;
border-left: 4px solid var(--rw-color-primary, #ef4444);
}
html[data-theme="dark"] .rwp-key-takeaways__title { color: var(--rw-color-primary, #ef4444); }
html[data-theme="dark"] .rwp-key-takeaways__title::before { background: var(--rw-color-primary, #ef4444); }
html[data-theme="dark"] .rwp-key-takeaways__list li { color: #cbd5e1; }
html[data-theme="dark"] .rwp-key-takeaways__list li::before { background: var(--rw-color-primary, #ef4444); }
/* --- premium/fact-check.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Fact Check Box
File: assets/css/premium/fact-check.css
═══════════════════════════════════════════════════════════ */
.rwp-fact-check {
margin: 32px 0;
padding: 28px;
background: var(--rw-bg-alt, #f9fafb);
border: 1px solid rgba(229, 231, 235, 0.6);
border-radius: var(--rwp-radius-md, 12px);
box-shadow: none;
}
/* ── Title ───────────────────────────────────────────────── */
.rwp-fact-check__title {
font-size: 1.15rem;
font-weight: 800;
margin: 0 0 14px;
color: var(--rw-text-heading, #111827);
display: flex;
align-items: center;
gap: 12px;
}
.rwp-fact-check__title::before {
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #0d7c3e;
color: #ffffff;
font-size: 14px;
font-weight: 800;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(13, 124, 62, 0.4);
}
/* ── Verdict line ────────────────────────────────────────── */
.rwp-fact-check__verdict {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 14px;
line-height: 1.4;
}
.rwp-fact-check__verdict-label {
display: inline-flex;
align-items: center;
padding: 3px 9px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rw-text-muted, #6b7280);
background: var(--rw-bg-content, #ffffff);
border: 1px solid rgba(229, 231, 235, 0.7);
border-radius: 6px;
line-height: 1;
}
.rwp-fact-check__verdict-value {
font-size: 1.05rem;
font-weight: 800;
color: var(--rw-text-heading, #111827);
line-height: 1;
transition: color 0.2s ease;
}
/* ── Verdict colour coding ─────────────────────────────── */
.rwp-fact-check__verdict-value[data-verdict="verified"],
.rwp-fact-check__verdict-value[data-verdict="true"],
.rwp-fact-check__verdict-value[data-verdict="accurate"],
.rwp-fact-check__verdict-value[data-verdict^="verified-"],
.rwp-fact-check__verdict-value[data-verdict^="true-"] {
color: #0d7c3e;
}
.rwp-fact-check__verdict-value[data-verdict="false"],
.rwp-fact-check__verdict-value[data-verdict="hoax"],
.rwp-fact-check__verdict-value[data-verdict="debunked"],
.rwp-fact-check__verdict-value[data-verdict="fake"],
.rwp-fact-check__verdict-value[data-verdict="fake-news"],
.rwp-fact-check__verdict-value[data-verdict^="false-"],
.rwp-fact-check__verdict-value[data-verdict^="fake-"] {
color: #b32d2e;
}
.rwp-fact-check__verdict-value[data-verdict="misleading"],
.rwp-fact-check__verdict-value[data-verdict="missing-context"],
.rwp-fact-check__verdict-value[data-verdict="partly-true"],
.rwp-fact-check__verdict-value[data-verdict="half-true"],
.rwp-fact-check__verdict-value[data-verdict^="misleading-"],
.rwp-fact-check__verdict-value[data-verdict^="missing-context"] {
color: #b45309;
}
/* ── Evidence paragraph ──────────────────────────────────── */
.rwp-fact-check__evidence {
margin: 0 0 20px;
line-height: 1.65;
color: var(--rw-text-body, #374151);
font-size: 0.95rem;
}
/* ── Sources ─────────────────────────────────────────────── */
.rwp-fact-check__sources {
margin: 0;
padding: 16px 0 0;
border-top: 1px dashed rgba(209, 213, 219, 0.6);
}
.rwp-fact-check__sources-label {
display: block;
margin: 0 0 10px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rw-text-muted, #9ca3af);
}
.rwp-fact-check__sources-list {
list-style: none;
margin: 0;
padding: 0;
}
.rwp-fact-check__sources-list li {
display: flex;
align-items: baseline;
gap: 6px;
padding: 4px 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--rw-text-body, #4b5563);
}
.rwp-fact-check__sources-list li::before {
content: "→";
color: #0d7c3e;
font-weight: 700;
flex-shrink: 0;
}
.rwp-fact-check__sources-list a {
color: var(--rw-text-heading, #111827);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
text-decoration-color: rgba(209, 213, 219, 0.7);
transition: text-decoration-color 0.22s ease;
word-break: break-word;
}
.rwp-fact-check__sources-list a:hover,
.rwp-fact-check__sources-list a:focus-visible {
text-decoration-color: #0d7c3e;
}
/* ── Dark mode ───────────────────────────────────────────── */
html[data-theme="dark"] .rwp-fact-check {
background: #1e293b;
border-color: rgba(51, 65, 85, 0.6);
}
html[data-theme="dark"] .rwp-fact-check__title,
html[data-theme="dark"] .rwp-fact-check__evidence,
html[data-theme="dark"] .rwp-fact-check__sources-list li {
color: #e2e8f0;
}
html[data-theme="dark"] .rwp-fact-check__title::before {
background: #0d7c3e;
box-shadow: 0 2px 6px rgba(13, 124, 62, 0.5);
}
html[data-theme="dark"] .rwp-fact-check__verdict-label {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(51, 65, 85, 0.7);
color: #94a3b8;
}
html[data-theme="dark"] .rwp-fact-check__verdict-value {
color: #f1f5f9;
}
/* Dark mode verdict colours */
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="verified"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="true"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="accurate"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict^="verified-"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict^="true-"] {
color: #4ade80;
}
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="false"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="hoax"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="debunked"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="fake"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="fake-news"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict^="false-"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict^="fake-"] {
color: #f87171;
}
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="misleading"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="missing-context"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="partly-true"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict="half-true"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict^="misleading-"],
html[data-theme="dark"] .rwp-fact-check__verdict-value[data-verdict^="missing-context"] {
color: #fbbf24;
}
html[data-theme="dark"] .rwp-fact-check__sources {
border-top-color: rgba(51, 65, 85, 0.6);
}
html[data-theme="dark"] .rwp-fact-check__sources-label {
color: #94a3b8;
}
html[data-theme="dark"] .rwp-fact-check__sources-list li::before {
color: #4ade80;
}
html[data-theme="dark"] .rwp-fact-check__sources-list a {
color: #e2e8f0;
text-decoration-color: rgba(71, 85, 105, 0.7);
}
html[data-theme="dark"] .rwp-fact-check__sources-list a:hover,
html[data-theme="dark"] .rwp-fact-check__sources-list a:focus-visible {
text-decoration-color: #4ade80;
}
/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 640px) {
.rwp-fact-check {
padding: 20px;
margin: 24px 0;
}
.rwp-fact-check__title {
font-size: 1.05rem;
gap: 10px;
}
.rwp-fact-check__verdict-value {
font-size: 1rem;
}
.rwp-fact-check__sources-list li {
font-size: 0.88rem;
}
}
/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.rwp-fact-check__verdict-value,
.rwp-fact-check__sources-list a {
transition: none;
}
}
/* --- premium/author-expertise.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Author Expertise Card
File: assets/css/premium/author-expertise.css
═══════════════════════════════════════════════════════════ */
.rwp-author-expertise {
margin: 32px 0;
padding: 24px;
background: transparent;
border: 1px solid rgba(229, 231, 235, 0.6);
border-radius: var(--rwp-radius-md, 12px);
box-shadow: none;
display: grid;
grid-template-columns: 90px 1fr;
gap: 24px;
align-items: center;
}
.rwp-author-expertise__avatar {
width: 90px;
height: 90px;
border-radius: 50%;
overflow: hidden;
background: var(--rw-bg-alt, #f3f4f6);
border: 2px solid rgba(229, 231, 235, 0.7);
}
.rwp-author-expertise__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rwp-author-expertise__body { min-width: 0; }
.rwp-author-expertise__label {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--rw-text-muted, #6b7280);
margin: 0 0 6px;
}
.rwp-author-expertise__name {
font-size: 1.35rem;
font-weight: 800;
margin: 0 0 8px;
color: var(--rw-text-heading, #111827);
}
.rwp-author-expertise__bio {
font-size: 1rem;
line-height: 1.6;
color: var(--rw-text-body, #4b5563);
margin: 0 0 10px;
}
.rwp-author-expertise__bio-toggle {
display: inline-block;
background: transparent;
border: 0;
padding: 0;
margin: 0 0 10px;
color: var(--rw-color-primary, #0d7c3e);
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: opacity 0.22s ease;
}
.rwp-author-expertise__bio-toggle:hover,
.rwp-author-expertise__bio-toggle:focus-visible {
opacity: 0.75;
text-decoration: underline;
text-underline-offset: 3px;
}
.rwp-author-expertise__bio-toggle:focus-visible {
outline: 2px solid var(--rw-color-primary, #0d7c3e);
outline-offset: 2px;
border-radius: 3px;
}
.rwp-author-expertise__expertise {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 14px;
}
.rwp-author-expertise__expertise-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rw-text-muted, #6b7280);
margin-right: 4px;
flex-shrink: 0;
}
.rwp-author-expertise__tag {
display: inline-block;
padding: 3px 10px;
font-size: 0.7rem;
font-weight: 700;
background: var(--rw-bg-alt, #f3f4f6);
color: var(--rw-text-body, #374151);
border-radius: var(--rwp-radius-pill, 999px);
border: 1px solid rgba(229, 231, 235, 0.7);
transition: all 0.22s ease;
white-space: nowrap;
line-height: 1.2;
}
.rwp-author-expertise__tag:hover {
background: var(--rw-color-primary, #0d7c3e);
color: #ffffff;
border-color: var(--rw-color-primary, #0d7c3e);
}
.rwp-author-expertise__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(229, 231, 235, 0.6);
}
.rwp-author-expertise__link {
font-size: 0.9rem;
font-weight: 700;
color: var(--rw-color-primary, #0d7c3e);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.22s ease;
white-space: nowrap;
}
.rwp-author-expertise__link:hover { text-decoration: underline; gap: 10px; }
.rwp-author-expertise__links {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 0.9rem;
color: var(--rw-text-muted, #6b7280);
}
.rwp-author-expertise__meta-link {
color: var(--rw-text-muted, #6b7280);
text-decoration: none;
font-weight: 600;
transition: color 0.22s ease;
white-space: nowrap;
}
.rwp-author-expertise__meta-link:hover,
.rwp-author-expertise__meta-link:focus-visible {
color: var(--rw-color-primary, #0d7c3e);
text-decoration: underline;
text-underline-offset: 3px;
}
.rwp-author-expertise__meta-sep { opacity: 0.4; }
@media (max-width: 640px) {
.rwp-author-expertise {
grid-template-columns: 1fr;
gap: 16px;
padding: 20px;
text-align: center;
align-items: center;
}
.rwp-author-expertise__avatar { width: 72px; height: 72px; margin: 0 auto; }
.rwp-author-expertise__expertise {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--rw-border-light, #cbd5e1) transparent;
padding-bottom: 6px;
margin-bottom: 10px;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
}
.rwp-author-expertise__expertise::-webkit-scrollbar { height: 4px; }
.rwp-author-expertise__expertise::-webkit-scrollbar-thumb {
background: var(--rw-border-light, #cbd5e1);
border-radius: 4px;
}
.rwp-author-expertise__tag,
.rwp-author-expertise__expertise-label {
flex-shrink: 0;
scroll-snap-align: start;
}
.rwp-author-expertise__footer {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
scrollbar-width: thin;
scrollbar-color: var(--rw-border-light, #cbd5e1) transparent;
padding-bottom: 6px;
gap: 12px;
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
}
.rwp-author-expertise__footer::-webkit-scrollbar { height: 4px; }
.rwp-author-expertise__footer::-webkit-scrollbar-thumb {
background: var(--rw-border-light, #cbd5e1);
border-radius: 4px;
}
.rwp-author-expertise__link,
.rwp-author-expertise__links {
flex-shrink: 0;
scroll-snap-align: start;
}
.rwp-author-expertise__links { flex-wrap: nowrap; white-space: nowrap; }
.rwp-author-expertise__meta-sep { display: inline; opacity: 0.4; }
}
html[data-theme="dark"] .rwp-author-expertise {
background: transparent;
border-color: rgba(51, 65, 85, 0.6);
}
html[data-theme="dark"] .rwp-author-expertise__avatar {
border-color: rgba(51, 65, 85, 0.7);
}
html[data-theme="dark"] .rwp-author-expertise__name,
html[data-theme="dark"] .rwp-author-expertise__label {
color: #f8fafc;
}
html[data-theme="dark"] .rwp-author-expertise__bio {
color: #cbd5e1;
}
html[data-theme="dark"] .rwp-author-expertise__bio-toggle {
color: var(--rw-color-primary, #4ade80);
}
html[data-theme="dark"] .rwp-author-expertise__expertise-label {
color: #94a3b8;
}
html[data-theme="dark"] .rwp-author-expertise__tag {
background: #334155;
border-color: rgba(71, 85, 105, 0.7);
color: #e2e8f0;
}
html[data-theme="dark"] .rwp-author-expertise__footer {
border-top-color: rgba(51, 65, 85, 0.6);
}
html[data-theme="dark"] .rwp-author-expertise__meta-link {
color: #94a3b8;
}
html[data-theme="dark"] .rwp-author-expertise__meta-link:hover {
color: var(--rw-color-primary, #4ade80);
}
html[data-theme="dark"] .rwp-author-expertise__expertise::-webkit-scrollbar-thumb,
html[data-theme="dark"] .rwp-author-expertise__footer::-webkit-scrollbar-thumb {
background: #334155;
}
/* --- premium/related-grid.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Related Posts Grid (premium single post)
File: assets/css/premium/related-grid.css
═══════════════════════════════════════════════════════════ */
.rwp-premium-related {
margin: 40px 0;
padding: 0;
box-sizing: border-box;
color: #111827;
}
html[data-theme="dark"] .rwp-premium-related { color: #f8fafc; }
.rwp-premium-related__title {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 24px;
color: #111827;
display: flex;
align-items: center;
gap: 16px;
}
html[data-theme="dark"] .rwp-premium-related__title { color: #f8fafc; }
.rwp-premium-related__title::after {
content: "";
flex: 1;
height: 1px;
background: var(--rw-border-light, #e5e7eb);
}
html[data-theme="dark"] .rwp-premium-related__title::after { background: #334155; }
.rwp-premium-related__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 900px) {
.rwp-premium-related__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
}
@media (max-width: 600px) {
.rwp-premium-related__grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* Card — flat, no shadow, no radius */
.rwp-premium-related__card {
position: relative;
display: flex;
flex-direction: column;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
color: #111827;
transition: none;
}
html[data-theme="dark"] .rwp-premium-related__card { color: #f8fafc; }
.rwp-premium-related__card:hover { transform: none; box-shadow: none; }
.rwp-premium-related__card:focus-within {
outline: 2px solid var(--rw-color-primary, #0d7c3e);
outline-offset: 4px;
}
.rwp-premium-related__thumb {
display: block;
aspect-ratio: 16 / 9;
max-height: 220px;
overflow: hidden;
background: var(--rw-bg-alt, #f3f4f6);
text-decoration: none;
border-radius: 0;
}
.rwp-premium-related__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.rwp-premium-related__card:hover .rwp-premium-related__thumb img { transform: scale(1.03); }
/* Frosted-glass text panel */
.rwp-premium-related__body {
position: relative;
margin-top: -12px;
padding: 16px 18px 18px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
isolation: isolate;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
border-top: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 0 0 var(--rwp-radius-md, 12px) var(--rwp-radius-md, 12px);
z-index: 1;
}
@supports not (backdrop-filter: blur(1px)) {
.rwp-premium-related__body { background: rgba(255, 255, 255, 0.92); }
}
.rwp-premium-related__category {
display: inline-block;
padding: 3px 10px;
font-size: 0.62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--rw-color-primary, #0d7c3e);
background: rgba(255, 255, 255, 0.7);
border: 1px solid color-mix(in srgb, var(--rw-color-primary, #0d7c3e) 22%, transparent);
border-radius: var(--rwp-radius-pill, 999px);
text-decoration: none;
width: fit-content;
line-height: 1.4;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: all var(--rwp-transition, 0.22s ease);
}
.rwp-premium-related__category:hover,
.rwp-premium-related__category:focus-visible {
background: var(--rw-color-primary, #0d7c3e);
color: #ffffff;
border-color: var(--rw-color-primary, #0d7c3e);
opacity: 1;
text-decoration: none;
}
html[data-theme="dark"] .rwp-premium-related__category {
background: rgba(30, 41, 59, 0.7);
color: var(--rw-color-primary, #4ade80);
border-color: color-mix(in srgb, var(--rw-color-primary, #4ade80) 30%, transparent);
}
html[data-theme="dark"] .rwp-premium-related__category:hover {
background: var(--rw-color-primary, #4ade80);
color: #0f172a;
border-color: var(--rw-color-primary, #4ade80);
}
.rwp-premium-related__heading {
font-size: 1.05rem;
font-weight: 800;
line-height: 1.4;
margin: 4px 0 0;
color: #111827;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rwp-premium-related__heading a,
.rwp-premium-related__heading a:link,
.rwp-premium-related__heading a:visited {
color: #111827;
text-decoration: none;
display: block;
transition: color var(--rwp-transition, 0.22s ease);
}
.rwp-premium-related__heading a:hover,
.rwp-premium-related__heading a:focus-visible {
color: var(--rw-color-primary, #0d7c3e);
}
html[data-theme="dark"] .rwp-premium-related__heading,
html[data-theme="dark"] .rwp-premium-related__heading a,
html[data-theme="dark"] .rwp-premium-related__heading a:link,
html[data-theme="dark"] .rwp-premium-related__heading a:visited {
color: #f8fafc;
}
html[data-theme="dark"] .rwp-premium-related__heading a:hover {
color: var(--rw-color-primary, #4ade80);
}
.rwp-premium-related__meta {
font-size: 0.72rem;
color: #6b7280;
font-weight: 600;
letter-spacing: 0.02em;
margin: 6px 0 0;
padding-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
line-height: 1.4;
}
html[data-theme="dark"] .rwp-premium-related__meta {
color: #94a3b8;
border-top-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .rwp-premium-related__body {
background: rgba(15, 23, 42, 0.65);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
@supports not (backdrop-filter: blur(1px)) {
html[data-theme="dark"] .rwp-premium-related__body { background: rgba(15, 23, 42, 0.92); }
}
@media (max-width: 600px) {
.rwp-premium-related__thumb { max-height: 200px; }
.rwp-premium-related__body { padding: 14px 16px 16px; gap: 5px; }
.rwp-premium-related__heading { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.rwp-premium-related__thumb img { transition: none !important; }
.rwp-premium-related__card:hover .rwp-premium-related__thumb img { transform: none !important; }
}
/* --- premium/trending-now.css --- */
/* =========================================================
RankwellPress Pro — Trending Now (Single Post Section)
Namespace: rkp-premium-trending-section
Horizontally scrolling carousel below the article.
This is the SINGLE-POST section, not the widget.
The widget version lives at rkp-premium-trending-widget__*.
========================================================= */
/* ── Section container ── */
.rkp-premium-trending-section {
--rkp-trending-accent: var(--rw-color-primary, #0d7c3e);
--rkp-trending-accent-soft: rgba(13, 124, 62, 0.08);
--rkp-trending-accent-line: rgba(13, 124, 62, 0.28);
--rkp-trending-heading: var(--rw-text-heading, #111827);
--rkp-trending-muted: var(--rw-text-muted, #6b7280);
--rkp-trending-surface: rgba(255, 255, 255, 0.72);
--rkp-trending-border: rgba(15, 23, 42, 0.06);
--rkp-trending-radius: var(--rwp-radius-md, 12px);
position: relative;
display: block;
width: 100%;
margin: 40px 0;
padding: 0;
box-sizing: border-box;
font-family: inherit;
color: inherit;
}
.rkp-premium-trending-section *,
.rkp-premium-trending-section *::before,
.rkp-premium-trending-section *::after {
box-sizing: border-box;
}
/* ── Header row: title + nav buttons ── */
.rkp-premium-trending-section__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 18px;
padding: 0;
}
.rkp-premium-trending-section__title {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--rkp-trending-heading);
}
/* ── Nav arrows (prev / next) ── */
.rkp-premium-trending-section__nav {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.rkp-premium-trending-section__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
margin: 0;
border: 1px solid var(--rkp-trending-accent-line);
border-radius: 50%;
background: var(--rkp-trending-surface);
color: var(--rkp-trending-accent);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition:
background 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
}
.rkp-premium-trending-section__nav-btn:hover,
.rkp-premium-trending-section__nav-btn:focus-visible {
background: var(--rkp-trending-accent);
color: #ffffff;
border-color: var(--rkp-trending-accent);
outline: none;
}
.rkp-premium-trending-section__nav-btn:active {
transform: scale(0.94);
}
.rkp-premium-trending-section__nav-btn[disabled],
.rkp-premium-trending-section__nav-btn.is-disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* ── Scroller track ── */
.rkp-premium-trending-section__scroller {
display: flex;
flex-wrap: nowrap;
gap: 16px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 4px 4px 14px;
margin: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--rkp-trending-accent-line) transparent;
}
/* Hide scrollbar on WebKit but keep functionality */
.rkp-premium-trending-section__scroller::-webkit-scrollbar {
height: 4px;
}
.rkp-premium-trending-section__scroller::-webkit-scrollbar-track {
background: transparent;
}
.rkp-premium-trending-section__scroller::-webkit-scrollbar-thumb {
background: var(--rkp-trending-accent-line);
border-radius: 4px;
}
.rkp-premium-trending-section__scroller::-webkit-scrollbar-thumb:hover {
background: var(--rkp-trending-accent);
}
/* ── Card ── */
.rkp-premium-trending-section__card {
flex: 0 0 240px;
width: 240px;
max-width: 240px;
scroll-snap-align: start;
display: flex;
flex-direction: column;
position: relative;
margin: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
transition: transform 0.25s ease;
}
.rkp-premium-trending-section__card:hover {
transform: translateY(-2px);
}
/* ── Card thumbnail ── */
.rkp-premium-trending-section__thumb {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: var(--rkp-trending-radius);
background: var(--rkp-trending-accent-soft);
text-decoration: none;
margin: 0;
}
.rkp-premium-trending-section__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
margin: 0;
padding: 0;
border: 0;
transition: transform 0.4s ease;
}
.rkp-premium-trending-section__card:hover .rkp-premium-trending-section__thumb img {
transform: scale(1.04);
}
/* ── Card body ── */
.rkp-premium-trending-section__body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 2px 0;
}
/* ── Category badge ── */
.rkp-premium-trending-section__cat {
display: inline-block;
align-self: flex-start;
font-size: 0.62rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--rkp-trending-accent);
text-decoration: none;
line-height: 1.3;
transition: opacity 0.2s ease;
}
.rkp-premium-trending-section__cat:hover,
.rkp-premium-trending-section__cat:focus-visible {
opacity: 0.75;
text-decoration: none;
}
/* ── Card heading ── */
.rkp-premium-trending-section__heading {
margin: 0;
padding: 0;
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--rkp-trending-heading);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rkp-premium-trending-section__heading a,
.rkp-premium-trending-section__heading a:link,
.rkp-premium-trending-section__heading a:visited {
color: inherit;
text-decoration: none;
display: block;
transition: color 0.2s ease;
}
.rkp-premium-trending-section__heading a:hover,
.rkp-premium-trending-section__heading a:focus-visible {
color: var(--rkp-trending-accent);
}
/* =========================================================
DARK MODE
========================================================= */
html[data-theme="dark"] .rkp-premium-trending-section {
--rkp-trending-accent: var(--rw-color-primary, #4ade80);
--rkp-trending-accent-soft: rgba(74, 222, 128, 0.10);
--rkp-trending-accent-line: rgba(74, 222, 128, 0.32);
--rkp-trending-heading: #f8fafc;
--rkp-trending-muted: #94a3b8;
--rkp-trending-surface: rgba(30, 41, 59, 0.55);
--rkp-trending-border: rgba(255, 255, 255, 0.08);
}
/* =========================================================
FOOTER CONTEXT
========================================================= */
.rwp-footer .rkp-premium-trending-section,
.rwp-footer-widgets .rkp-premium-trending-section {
--rkp-trending-accent: var(--rw-color-primary, #4ade80);
--rkp-trending-accent-soft: rgba(74, 222, 128, 0.10);
--rkp-trending-accent-line: rgba(74, 222, 128, 0.32);
--rkp-trending-heading: #f8fafc;
--rkp-trending-muted: #94a3b8;
--rkp-trending-surface: rgba(15, 23, 42, 0.6);
--rkp-trending-border: rgba(255, 255, 255, 0.08);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 768px) {
.rkp-premium-trending-section {
margin: 32px 0;
}
.rkp-premium-trending-section__title {
font-size: 1.1rem;
}
.rkp-premium-trending-section__nav {
display: none; /* Hide arrows on mobile — swipe is native */
}
.rkp-premium-trending-section__card {
flex: 0 0 220px;
width: 220px;
max-width: 220px;
}
}
@media (max-width: 480px) {
.rkp-premium-trending-section__card {
flex: 0 0 200px;
width: 200px;
max-width: 200px;
}
.rkp-premium-trending-section__heading {
font-size: 0.85rem;
-webkit-line-clamp: 2;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rkp-premium-trending-section__scroller {
scroll-behavior: auto;
}
.rkp-premium-trending-section__card,
.rkp-premium-trending-section__thumb img,
.rkp-premium-trending-section__nav-btn {
transition: none !important;
transform: none !important;
}
}
/* --- premium/hot-badge.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Hot Badge
File: assets/css/premium/hot-badge.css
═══════════════════════════════════════════════════════════ */
.rwp-hot-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 12px;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #ffffff;
background: linear-gradient(135deg, #ef4444, #b91c1c);
border-radius: var(--rwp-radius-pill, 999px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
z-index: 2;
pointer-events: none;
}
/* --- components/whatsapp-cta.css --- */
/* ============================================
* RankwellPress — Editorial CTA Banner (WhatsApp)
* Flat style — matches Newsletter CTA
* ============================================ */
.rwp-editorial-cta-box {
margin: 32px 0;
width: 100%;
padding: 18px 0;
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: nowrap;
/* Flat editorial — rules top + bottom, brand accent bar on left */
background: transparent;
border: 0;
border-top: 1px solid var(--rw-border-color, #e5e7eb);
border-bottom: 1px solid var(--rw-border-color, #e5e7eb);
border-left: 4px solid #25D366;
border-radius: 0;
box-shadow: none;
padding-left: 16px;
}
.rwp-cta-whatsapp {
background: transparent;
border: 0;
border-top: 1px solid var(--rw-border-color, #e5e7eb);
border-bottom: 1px solid var(--rw-border-color, #e5e7eb);
border-left: 4px solid #25D366;
border-radius: 0;
}
/* ── Text — small, matches newsletter heading ─── */
.rwp-editorial-cta-text {
color: var(--rw-text-heading, #111827);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.01em;
margin: 0;
flex: 1 1 auto;
min-width: 0;
}
/* ── Button — compact, horizontal ─── */
.rwp-editorial-cta-btn,
.rwp-editorial-cta-btn:link,
.rwp-editorial-cta-btn:visited {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #25D366 !important;
color: #ffffff !important;
padding: 8px 18px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0;
text-decoration: none !important;
transition:
background-color 0.18s ease,
transform 0.15s ease,
box-shadow 0.18s ease;
flex: 0 0 auto;
white-space: nowrap;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* WhatsApp icon in button */
.rwp-editorial-cta-btn::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
-webkit-mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
flex-shrink: 0;
}
.rwp-editorial-cta-btn:hover,
.rwp-editorial-cta-btn:focus-visible,
.rwp-editorial-cta-btn:active {
background: #1da851 !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
text-decoration: none !important;
outline: none;
}
/* ── Mobile — stack on very small screens only ── */
@media (max-width: 600px) {
.rwp-editorial-cta-box {
padding: 16px 0 16px 14px;
margin: 28px 0;
gap: 12px;
}
.rwp-editorial-cta-text {
font-size: 0.85rem;
line-height: 1.35;
}
.rwp-editorial-cta-btn {
padding: 8px 14px;
font-size: 0.78rem;
gap: 6px;
}
.rwp-editorial-cta-btn::before {
width: 14px;
height: 14px;
}
}
/* Extra small — stack vertically */
@media (max-width: 420px) {
.rwp-editorial-cta-box {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding: 14px 0 14px 14px;
}
.rwp-editorial-cta-text {
font-size: 0.82rem;
}
.rwp-editorial-cta-btn {
justify-content: center;
width: 100%;
}
}
/* ── Dark mode ───────────────────────────── */
html[data-theme="dark"] .rwp-editorial-cta-box,
html[data-theme="dark"] .rwp-cta-whatsapp {
background: transparent;
border-top-color: rgba(255, 255, 255, 0.1);
border-bottom-color: rgba(255, 255, 255, 0.1);
border-left: 4px solid #25D366;
}
html[data-theme="dark"] .rwp-editorial-cta-text {
color: #f1f5f9;
}
html[data-theme="dark"] .rwp-editorial-cta-btn,
html[data-theme="dark"] .rwp-editorial-cta-btn:link,
html[data-theme="dark"] .rwp-editorial-cta-btn:visited {
background: #25D366 !important;
color: #ffffff !important;
}
html[data-theme="dark"] .rwp-editorial-cta-btn:hover {
background: #1da851 !important;
color: #ffffff !important;
}
/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
.rwp-editorial-cta-btn {
transition: none !important;
}
.rwp-editorial-cta-btn:hover {
transform: none !important;
}
}
/* --- components/share-buttons.css --- */
/* =========================================================
* RankwellPress — Share Buttons (Perfect Horizontal Alignment)
* ========================================================= */
.rwp-share-buttons {
display: flex;
align-items: center;
gap: 8px;
margin: 16px 0;
flex-wrap: nowrap;
width: 100%;
max-width: 100%;
box-sizing: border-box;
line-height: 1;
}
.rwp-share-label {
font-size: 0.8rem;
font-weight: 700;
color: var(--rw-text-heading, #111827);
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
white-space: nowrap;
line-height: 34px;
display: inline-flex;
align-items: center;
height: 34px;
margin: 0;
padding: 0;
}
.rwp-share-icons {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
position: relative;
flex-shrink: 1;
min-width: 0;
line-height: 1;
overflow: visible;
margin: 0;
padding: 0;
}
.rwp-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
min-width: 34px;
min-height: 34px;
border-radius: 8px;
color: #ffffff;
transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
text-decoration: none;
border: none;
cursor: pointer;
flex-shrink: 0;
line-height: 1;
vertical-align: middle;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.rwp-share-btn svg {
width: 16px;
height: 16px;
display: block;
flex-shrink: 0;
}
/* Hover states */
.rwp-share-btn:hover {
transform: translateY(-2px);
box-shadow: var(--rw-shadow-md, 0 4px 12px rgba(0,0,0,0.15));
opacity: 0.9;
}
.rwp-share-btn:focus-visible {
outline: 2px solid var(--rw-color-primary, #0d7c3e);
outline-offset: 3px;
}
.rwp-share-btn:active {
transform: translateY(0) scale(0.95);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* =========================================================
* Brand Colors — All Platforms
* ========================================================= */
/* Primary */
.rwp-share-facebook { background-color: #1877F2; }
.rwp-share-twitter { background-color: #000000; }
.rwp-share-whatsapp { background-color: #25D366; }
.rwp-share-linkedin { background-color: #0A66C2; }
.rwp-share-telegram { background-color: #0088cc; }
/* Secondary — Extended */
.rwp-share-instagram { background-color: #E1306C; }
.rwp-share-tiktok { background-color: #000000; }
.rwp-share-threads { background-color: #000000; }
.rwp-share-lekeelekee { background-color: #FF6B00; }
.rwp-share-reddit { background-color: #FF4500; }
.rwp-share-pinterest { background-color: #BD081C; }
.rwp-share-email { background-color: #6B7280; }
.rwp-share-copy { background-color: #6B7280; }
/* New Platforms */
.rwp-share-bluesky { background-color: #0560FF; }
.rwp-share-mastodon { background-color: #6364FF; }
.rwp-share-flipboard { background-color: #E12828; }
.rwp-share-tumblr { background-color: #36465D; }
.rwp-share-pocket { background-color: #EF4056; }
.rwp-share-line { background-color: #00C300; }
.rwp-share-viber { background-color: #7360F2; }
.rwp-share-vk { background-color: #0077FF; }
.rwp-share-digg { background-color: #000000; }
.rwp-share-mix { background-color: #FF8226; }
/* More button */
.rwp-share-more {
background-color: var(--rw-bg-alt, #f3f4f6);
color: var(--rw-text-body, #4b5563);
border: none;
cursor: pointer;
}
.rwp-share-more:hover {
background-color: var(--rw-text-muted, #6b7280);
color: #ffffff;
}
/* Dropdown */
.rwp-share-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: var(--rw-bg-content, #ffffff);
border: 1px solid var(--rw-border-light, #e5e7eb);
border-radius: var(--rw-radius-md, 8px);
box-shadow: var(--rw-shadow-hover, 0 8px 24px rgba(0,0,0,0.12));
padding: 8px;
z-index: 1000;
flex-direction: column;
gap: 4px;
min-width: 200px;
max-height: 320px;
overflow-y: auto;
display: none;
}
.rwp-share-dropdown.active {
display: flex;
}
.rwp-share-extended-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
color: var(--rw-text-body, #4b5563);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
transition: background-color 0.2s ease;
border: none;
background: transparent;
cursor: pointer;
width: 100%;
text-align: left;
line-height: 1.4;
box-sizing: border-box;
}
.rwp-share-extended-btn:hover {
background-color: var(--rw-bg-alt, #f3f4f6);
}
.rwp-share-extended-btn:focus-visible {
outline: 2px solid var(--rw-color-primary, #0d7c3e);
outline-offset: -2px;
}
.share-dropdown-text {
white-space: nowrap;
}
/* Dropdown scrollbar */
.rwp-share-dropdown::-webkit-scrollbar {
width: 4px;
}
.rwp-share-dropdown::-webkit-scrollbar-track {
background: transparent;
}
.rwp-share-dropdown::-webkit-scrollbar-thumb {
background: var(--rw-border-light, #e5e7eb);
border-radius: 2px;
}
/* Dark Mode */
html[data-theme="dark"] .rwp-share-label {
color: var(--rw-text-heading, #f3f4f6);
}
html[data-theme="dark"] .rwp-share-more {
background-color: #2d2d2d;
color: #d1d5db;
}
html[data-theme="dark"] .rwp-share-more:hover {
background-color: #404040;
color: #ffffff;
}
html[data-theme="dark"] .rwp-share-dropdown {
background: #1a1a1a;
border-color: #404040;
}
html[data-theme="dark"] .rwp-share-extended-btn {
color: #d1d5db;
}
html[data-theme="dark"] .rwp-share-extended-btn:hover {
background-color: #2d2d2d;
}
html[data-theme="dark"] .rwp-share-dropdown::-webkit-scrollbar-thumb {
background: #404040;
}
/* Mobile */
@media (max-width: 480px) {
.rwp-share-buttons {
gap: 6px;
}
.rwp-share-label {
font-size: 0.7rem;
letter-spacing: 0.3px;
line-height: 30px;
height: 30px;
}
.rwp-share-icons {
gap: 4px;
}
.rwp-share-btn {
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
border-radius: 6px;
}
.rwp-share-btn svg {
width: 14px;
height: 14px;
}
.rwp-share-dropdown {
min-width: 180px;
max-height: 280px;
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.rwp-share-btn,
.rwp-share-extended-btn {
transition: none !important;
}
.rwp-share-btn:hover,
.rwp-share-btn:active {
transform: none !important;
}
}
/* =========================================================
* FONT ADJUSTER — inline in the top share bar
* Compact pill: [A- A+]
* ========================================================= */
.rwp-share-font-adjuster {
flex: 0 0 auto;
display: flex;
align-items: center;
margin-left: auto;
padding-left: 8px;
height: 34px;
}
.rwp-share-font-adjuster .rwp-font-adjuster {
display: inline-flex;
align-items: center;
gap: 2px;
padding: 2px 6px;
margin: 0;
background: var(--rw-bg-alt, #f3f4f6);
border: 1px solid var(--rw-border-light, #e5e7eb);
border-radius: 100px;
line-height: 1;
white-space: nowrap;
box-sizing: border-box;
height: 30px;
}
/* A- / A+ buttons */
.rwp-share-font-adjuster .font-btn {
width: 22px;
height: 22px;
padding: 0;
margin: 0;
border: none;
background: transparent;
color: var(--rw-text-body, #4b5563);
font-size: 0.7rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
line-height: 1;
}
.rwp-share-font-adjuster .font-btn:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.06);
color: var(--rw-color-primary, #0d7c3e);
}
.rwp-share-font-adjuster .font-btn:active:not(:disabled) {
background: rgba(0, 0, 0, 0.1);
transform: scale(0.95);
}
.rwp-share-font-adjuster .font-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.rwp-share-font-adjuster .font-btn:focus-visible {
outline: 2px solid var(--rw-color-primary, #0d7c3e);
outline-offset: 1px;
}
.rwp-share-font-adjuster .font-btn-icon {
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
display: inline-block;
}
/* Hide any leftover markup from old font adjuster versions */
.rwp-share-font-adjuster .font-adjuster-label,
.rwp-share-font-adjuster .font-size-indicator,
.rwp-share-font-adjuster .font-reset {
display: none !important;
}
/* Never show the font adjuster on the bottom share bar */
.rwp-share-location-bottom .rwp-share-font-adjuster,
.rwp-share-location-default .rwp-share-font-adjuster {
display: none !important;
}
/* Small screens */
@media (max-width: 480px) {
.rwp-share-font-adjuster {
padding-left: 4px;
}
.rwp-share-font-adjuster .rwp-font-adjuster {
padding: 2px 4px;
gap: 1px;
height: 28px;
}
.rwp-share-font-adjuster .font-btn {
width: 20px;
height: 20px;
font-size: 0.65rem;
}
.rwp-share-font-adjuster .font-btn-icon {
font-size: 0.65rem;
}
}
/* Dark mode */
html[data-theme="dark"] .rwp-share-font-adjuster .rwp-font-adjuster {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .rwp-share-font-adjuster .font-btn {
color: #e5e7eb;
}
html[data-theme="dark"] .rwp-share-font-adjuster .font-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
color: var(--rw-color-primary, #0d7c3e);
}
/* Clear separation between the "..." button and the font adjuster */
.rwp-share-icons {
padding-right: 8px;
}
.rwp-share-font-adjuster {
padding-left: 8px;
border-left: 1px solid var(--rw-border-light, #e5e7eb);
}
/* =========================================================
* LINK COLOR IMMUNITY — protects share buttons from
* global article link rules (.post-content a:link, etc.)
*
* All content link rules use specificity (0,2,1). This block
* uses (0,4,2) + !important so nothing can override it.
* ========================================================= */
/* Kill link colors, underline, and any external-link arrow
on every share button in every state. */
.rwp-share-btn,
.rwp-share-btn:link,
.rwp-share-btn:visited,
.rwp-share-btn:hover,
.rwp-share-btn:focus,
.rwp-share-btn:focus-visible,
.rwp-share-btn:active,
.post-content .rwp-share-btn,
.post-content .rwp-share-btn:link,
.post-content .rwp-share-btn:visited,
.post-content .rwp-share-btn:hover,
.post-content .rwp-share-btn:focus,
.post-content .rwp-share-btn:focus-visible,
.post-content .rwp-share-btn:active,
.entry-content .rwp-share-btn,
.entry-content .rwp-share-btn:link,
.entry-content .rwp-share-btn:visited,
.entry-content .rwp-share-btn:hover,
.single-content .rwp-share-btn,
.single-content .rwp-share-btn:link,
.single-content .rwp-share-btn:visited,
.rwp-article-body .rwp-share-btn,
.rwp-article-body .rwp-share-btn:link,
.rwp-article-body .rwp-share-btn:visited {
color: #ffffff !important;
text-decoration: none !important;
text-decoration-color: transparent !important;
text-decoration-line: none !important;
text-underline-offset: 0 !important;
background-image: none !important;
}
/* Kill the ↗ external-link arrow if the link has target="_blank" */
.rwp-share-btn[target="_blank"]::after,
.post-content .rwp-share-btn[target="_blank"]::after,
.entry-content .rwp-share-btn[target="_blank"]::after,
.single-content .rwp-share-btn[target="_blank"]::after,
.rwp-article-body .rwp-share-btn[target="_blank"]::after {
content: none !important;
display: none !important;
}
/* Lock in platform brand backgrounds — with !important so
nothing can override them either */
.rwp-share-btn.rwp-share-facebook,
.post-content .rwp-share-btn.rwp-share-facebook,
.entry-content .rwp-share-btn.rwp-share-facebook {
background-color: var(--rw-brand-facebook, #1877F2) !important;
}
.rwp-share-btn.rwp-share-twitter,
.rwp-share-btn.rwp-share-x,
.post-content .rwp-share-btn.rwp-share-twitter,
.post-content .rwp-share-btn.rwp-share-x {
background-color: var(--rw-brand-twitter, #000000) !important;
}
.rwp-share-btn.rwp-share-whatsapp,
.post-content .rwp-share-btn.rwp-share-whatsapp {
background-color: var(--rw-brand-whatsapp, #25D366) !important;
}
.rwp-share-btn.rwp-share-linkedin,
.post-content .rwp-share-btn.rwp-share-linkedin {
background-color: var(--rw-brand-linkedin, #0A66C2) !important;
}
.rwp-share-btn.rwp-share-telegram,
.post-content .rwp-share-btn.rwp-share-telegram {
background-color: var(--rw-brand-telegram, #0088cc) !important;
}
.rwp-share-btn.rwp-share-instagram,
.post-content .rwp-share-btn.rwp-share-instagram {
background-color: var(--rw-brand-instagram, #E1306C) !important;
}
.rwp-share-btn.rwp-share-youtube,
.post-content .rwp-share-btn.rwp-share-youtube {
background-color: var(--rw-brand-youtube, #FF0000) !important;
}
.rwp-share-btn.rwp-share-reddit,
.post-content .rwp-share-btn.rwp-share-reddit {
background-color: #FF4500 !important;
}
.rwp-share-btn.rwp-share-pinterest,
.post-content .rwp-share-btn.rwp-share-pinterest {
background-color: #BD081C !important;
}
.rwp-share-btn.rwp-share-email,
.post-content .rwp-share-btn.rwp-share-email {
background-color: #6B7280 !important;
}
.rwp-share-btn.rwp-share-copy,
.post-content .rwp-share-btn.rwp-share-copy {
background-color: #6B7280 !important;
}
/* The "..." more button stays neutral, even inside content */
.rwp-share-more,
.post-content .rwp-share-more,
.entry-content .rwp-share-more {
background-color: var(--rw-bg-alt, #f3f4f6) !important;
color: var(--rw-text-body, #4b5563) !important;
}
.rwp-share-more:hover,
.post-content .rwp-share-more:hover {
background-color: var(--rw-text-muted, #6b7280) !important;
color: #ffffff !important;
}
/* Extended buttons inside dropdown — no underline, no link color */
.rwp-share-extended-btn,
.rwp-share-extended-btn:link,
.rwp-share-extended-btn:visited,
.rwp-share-extended-btn:hover,
.rwp-share-extended-btn:focus,
.post-content .rwp-share-extended-btn,
.post-content .rwp-share-extended-btn:link,
.post-content .rwp-share-extended-btn:visited,
.post-content .rwp-share-extended-btn:hover {
color: var(--rw-text-body, #4b5563) !important;
text-decoration: none !important;
text-decoration-line: none !important;
background-image: none !important;
}
/* Dark mode — same protections */
html[data-theme="dark"] .rwp-share-btn,
html[data-theme="dark"] .rwp-share-btn:link,
html[data-theme="dark"] .rwp-share-btn:visited,
html[data-theme="dark"] .post-content .rwp-share-btn,
html[data-theme="dark"] .post-content .rwp-share-btn:link,
html[data-theme="dark"] .post-content .rwp-share-btn:visited {
color: #ffffff !important;
text-decoration: none !important;
}
html[data-theme="dark"] .rwp-share-more,
html[data-theme="dark"] .post-content .rwp-share-more {
background-color: #2d2d2d !important;
color: #d1d5db !important;
}
html[data-theme="dark"] .rwp-share-more:hover,
html[data-theme="dark"] .post-content .rwp-share-more:hover {
background-color: #404040 !important;
color: #ffffff !important;
}
html[data-theme="dark"] .rwp-share-extended-btn,
html[data-theme="dark"] .rwp-share-extended-btn:link,
html[data-theme="dark"] .rwp-share-extended-btn:visited {
color: #d1d5db !important;
text-decoration: none !important;
}
/* --- components/newsletter-cta.css --- */
/* =========================================================
* RankwellPress Pro — Newsletter CTA
* File: assets/css/components/newsletter-cta.css
*
* Flat editorial layout — no card, no glass, no shadow.
* Just a horizontal row with rules above/below, matching
* the flat TOC and other editorial components.
* ========================================================= */
.rwp-newsletter-cta {
display: block;
width: 100%;
margin: 32px 0;
padding: 18px 0;
box-sizing: border-box;
/* Flat — no card, no glass, no shadow */
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 0;
border-top: 1px solid var(--rw-border-color, #e5e7eb);
border-bottom: 1px solid var(--rw-border-color, #e5e7eb);
border-radius: 0;
box-shadow: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.rwp-newsletter-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
width: 100%;
flex-wrap: nowrap;
}
.rwp-newsletter-copy {
flex: 1 1 auto;
min-width: 0;
color: var(--rw-text-heading, #111827);
overflow: hidden;
}
.rwp-newsletter-heading {
display: block;
margin: 0;
padding: 0;
color: var(--rw-text-heading, #111827);
font-size: 0.9rem;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rwp-newsletter-text {
display: block;
margin: 3px 0 0;
padding: 0;
color: var(--rw-text-muted, #6b7280);
font-size: 0.78rem;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Form ─────────────────────────────────────────────── */
.rwp-newsletter-form {
display: flex;
flex: 0 0 auto;
flex-direction: row;
align-items: center;
gap: 8px;
min-width: 0;
max-width: none;
}
.rwp-newsletter-input {
flex: 1 1 auto;
min-width: 0;
width: 200px;
height: 36px;
padding: 6px 12px;
border: 1px solid var(--rw-border-color, #e5e7eb);
border-radius: 6px;
background: #ffffff;
color: var(--rw-text-heading, #111827);
font-family: inherit;
font-size: 0.82rem;
line-height: 1.3;
outline: none;
box-sizing: border-box;
box-shadow: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.rwp-newsletter-input::placeholder {
color: #9ca3af;
opacity: 1;
}
.rwp-newsletter-input:focus {
border-color: var(--rw-color-primary, #dc2626);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-color-primary, #dc2626) 15%, transparent);
}
.rwp-newsletter-submit {
flex: 0 0 auto;
height: 36px;
padding: 6px 18px;
border: 1px solid var(--rw-color-primary, #dc2626);
border-radius: 6px;
background: var(--rw-color-primary, #dc2626);
color: #ffffff;
font-family: inherit;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.3;
cursor: pointer;
white-space: nowrap;
box-shadow: none;
transition: background 0.18s ease, color 0.18s ease;
}
.rwp-newsletter-submit:hover,
.rwp-newsletter-submit:focus-visible {
background: color-mix(in srgb, var(--rw-color-primary, #dc2626) 85%, #000000);
border-color: color-mix(in srgb, var(--rw-color-primary, #dc2626) 85%, #000000);
color: #ffffff;
outline: none;
}
.rwp-newsletter-submit:active {
background: color-mix(in srgb, var(--rw-color-primary, #dc2626) 75%, #000000);
}
/* ── Dark mode ────────────────────────────────────────── */
html[data-theme="dark"] .rwp-newsletter-cta {
background: transparent;
border-top-color: rgba(255, 255, 255, 0.1);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .rwp-newsletter-copy,
html[data-theme="dark"] .rwp-newsletter-heading {
color: #f1f5f9;
}
html[data-theme="dark"] .rwp-newsletter-text {
color: #94a3b8;
}
html[data-theme="dark"] .rwp-newsletter-input {
background: #1e293b;
color: #f1f5f9;
border-color: #334155;
}
html[data-theme="dark"] .rwp-newsletter-input::placeholder {
color: #64748b;
}
html[data-theme="dark"] .rwp-newsletter-input:focus {
border-color: var(--rw-color-primary, #ef4444);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rw-color-primary, #ef4444) 20%, transparent);
}
html[data-theme="dark"] .rwp-newsletter-submit {
background: var(--rw-color-primary, #ef4444);
border-color: var(--rw-color-primary, #ef4444);
color: #ffffff;
}
html[data-theme="dark"] .rwp-newsletter-submit:hover,
html[data-theme="dark"] .rwp-newsletter-submit:focus-visible {
background: color-mix(in srgb, var(--rw-color-primary, #ef4444) 85%, #ffffff);
border-color: color-mix(in srgb, var(--rw-color-primary, #ef4444) 85%, #ffffff);
}
/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 700px) {
.rwp-newsletter-cta {
margin: 24px 0;
padding: 14px 0;
}
.rwp-newsletter-inner {
gap: 10px;
}
.rwp-newsletter-heading {
font-size: 0.82rem;
}
.rwp-newsletter-text {
display: none;
}
.rwp-newsletter-input {
width: 140px;
height: 32px;
font-size: 0.75rem;
}
.rwp-newsletter-submit {
height: 32px;
padding: 5px 12px;
font-size: 0.75rem;
}
}
@media (max-width: 420px) {
.rwp-newsletter-cta {
padding: 12px 0;
}
.rwp-newsletter-heading {
font-size: 0.75rem;
}
.rwp-newsletter-input {
width: 120px;
height: 30px;
font-size: 0.7rem;
padding: 5px 8px;
}
.rwp-newsletter-submit {
height: 30px;
padding: 5px 10px;
font-size: 0.7rem;
}
}
/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.rwp-newsletter-input,
.rwp-newsletter-submit {
transition: none;
}
.rwp-newsletter-submit:hover {
transform: none;
}
}
/* Let heading show fully on light background */
.rwp-newsletter-heading {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.rwp-newsletter-text {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* --- toc.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Table of Contents
File: assets/css/toc.css
Version: 3.0.0 (Flat editorial — no card)
═══════════════════════════════════════════════════════════ */
/* ── Container — flat, no card ────────────────────── */
.rankwellpress-toc {
background: transparent;
border: 0;
border-top: 1px solid var(--rw-border-color, #e5e7eb);
border-bottom: 1px solid var(--rw-border-color, #e5e7eb);
border-radius: 0;
margin: 28px 0;
font-size: 15px;
overflow: hidden;
box-shadow: none;
}
/* ── Header — clickable row ───────────────────────── */
.rankwellpress-toc .toc-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
background: transparent;
cursor: pointer;
user-select: none;
transition: opacity 0.2s ease;
}
.rankwellpress-toc .toc-header:hover {
opacity: 0.75;
}
/* ── Icon ─────────────────────────────────────────── */
.rankwellpress-toc .toc-icon {
flex-shrink: 0;
color: var(--rw-color-primary, #dc2626);
}
/* ── Title ────────────────────────────────────────── */
.rankwellpress-toc .toc-title {
margin: 0;
font-size: 0.85rem;
font-weight: 800;
flex: 1;
color: var(--rw-text-heading, #111827);
line-height: 1.3;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ── Hide chevron toggle (redundant — row is clickable) ── */
.rankwellpress-toc .toc-toggle {
display: none !important;
}
/* ── Content ──────────────────────────────────────── */
.rankwellpress-toc .toc-content {
padding: 0 0 18px;
transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
max-height: 2000px;
opacity: 1;
overflow: hidden;
}
.rankwellpress-toc .toc-content.collapsed {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
visibility: hidden;
}
/* ── List ─────────────────────────────────────────── */
.rankwellpress-toc .toc-list {
list-style: none;
margin: 0;
padding: 0;
}
.rankwellpress-toc .toc-item {
margin: 0;
padding: 0;
list-style: none;
}
.rankwellpress-toc .toc-list-level-2 > .toc-item-h2 {
margin-bottom: 2px;
}
.rankwellpress-toc .toc-list-level-3 {
padding-left: 22px;
margin: 2px 0 6px;
}
/* ── Links ────────────────────────────────────────── */
.rankwellpress-toc .toc-link {
display: block;
padding: 6px 0 6px 20px;
color: var(--rw-text-body, #4b5563);
text-decoration: none;
transition: color 0.15s ease, padding-left 0.15s ease;
line-height: 1.45;
font-size: 14.5px;
position: relative;
}
/* Bullet dot */
.rankwellpress-toc .toc-link::before {
content: "";
position: absolute;
left: 0;
top: 0.85em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--rw-color-primary, #dc2626);
transform: translateY(-50%);
transition: background 0.15s ease;
}
.rankwellpress-toc .toc-link:hover,
.rankwellpress-toc .toc-link:focus-visible {
color: var(--rw-color-primary, #dc2626);
padding-left: 24px;
outline: none;
}
.rankwellpress-toc .toc-link:hover::before,
.rankwellpress-toc .toc-link:focus-visible::before {
background: var(--rw-color-primary, #dc2626);
}
.rankwellpress-toc .toc-link.is-active {
color: var(--rw-color-primary, #dc2626);
font-weight: 600;
}
/* H2 — bold, main items */
.rankwellpress-toc .toc-link-h2 {
font-weight: 700;
color: var(--rw-text-heading, #111827);
}
/* H3 — smaller, muted, sub-items */
.rankwellpress-toc .toc-link-h3 {
font-weight: 400;
font-size: 13.5px;
color: var(--rw-text-muted, #6b7280);
padding-left: 34px;
}
.rankwellpress-toc .toc-link-h3::before {
left: 16px;
width: 4px;
height: 4px;
background: var(--rw-text-muted, #9ca3af);
}
/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 767px) {
.rankwellpress-toc {
font-size: 14px;
margin: 22px 0;
}
.rankwellpress-toc .toc-header {
gap: 10px;
padding: 12px 0;
}
.rankwellpress-toc .toc-title {
font-size: 0.78rem;
letter-spacing: 0.1em;
}
.rankwellpress-toc .toc-content {
padding: 0 0 14px;
}
.rankwellpress-toc .toc-link {
padding: 5px 0 5px 18px;
font-size: 14px;
}
.rankwellpress-toc .toc-link-h3 {
padding-left: 30px;
}
.rankwellpress-toc .toc-link-h3::before {
left: 14px;
}
}
/* ── Dark mode ────────────────────────────────────── */
html[data-theme="dark"] .rankwellpress-toc {
background: transparent;
border-top-color: rgba(255, 255, 255, 0.1);
border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .rankwellpress-toc .toc-icon {
color: var(--rw-color-primary, #ef4444);
}
html[data-theme="dark"] .rankwellpress-toc .toc-title {
color: #f1f5f9;
}
html[data-theme="dark"] .rankwellpress-toc .toc-link {
color: #cbd5e1;
}
html[data-theme="dark"] .rankwellpress-toc .toc-link:hover,
html[data-theme="dark"] .rankwellpress-toc .toc-link.is-active {
color: var(--rw-color-primary, #ef4444);
}
html[data-theme="dark"] .rankwellpress-toc .toc-link::before {
background: var(--rw-color-primary, #ef4444);
}
html[data-theme="dark"] .rankwellpress-toc .toc-link-h2 {
color: #f1f5f9;
}
html[data-theme="dark"] .rankwellpress-toc .toc-link-h3 {
color: #94a3b8;
}
html[data-theme="dark"] .rankwellpress-toc .toc-link-h3::before {
background: #64748b;
}
/* ── Reduced motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.rankwellpress-toc,
.rankwellpress-toc .toc-header,
.rankwellpress-toc .toc-content,
.rankwellpress-toc .toc-link,
.rankwellpress-toc .toc-link::before {
transition: none !important;
}
}
/* --- tts.css --- */
/* =========================================================
* RankwellPress — Read Aloud Button (Icon + Text Pill)
*
* Layout: [🔊 Listen] → [⏸ Pause] → [▶ Resume]
*
* States:
* - idle → green outline pill, green speaker icon + "Listen"
* - hover → green fill, white icon + "Listen"
* - loading → grey pill, spinner + "Loading…"
* - playing → red pill, pulse animation, pause icon + "Pause"
* - paused → navy pill, play icon + "Resume"
*
* The label text is set by JS (assets/js/read-aloud.js).
* This stylesheet only handles visuals.
*
* @package RankwellPress
* @since 3.5.3
* ========================================================= */
/* =========================================================
* BASE BUTTON
* ========================================================= */
.rwp-read-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 14px;
margin: 0;
min-height: 32px;
box-sizing: border-box;
border: 1px solid var(--rw-color-primary, #0d7c3e);
border-radius: 100px;
background-color: transparent;
color: var(--rw-color-primary, #0d7c3e);
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.15s ease;
-webkit-tap-highlight-color: transparent;
}
/* =========================================================
* ICONS — one visible at a time, controlled by JS
* ========================================================= */
.rwp-read-btn .rwp-read-icon {
display: none;
width: 16px;
height: 16px;
flex-shrink: 0;
pointer-events: none;
}
/* Speaker icon shows by default (before JS runs) */
.rwp-read-btn .rwp-icon-speaker {
display: block;
}
/* =========================================================
* LABEL — text is set by JS, no ::before rules
* ========================================================= */
.rwp-read-btn .rwp-read-label {
display: inline-block;
line-height: 1;
}
/* =========================================================
* HOVER — idle only
* ========================================================= */
.rwp-read-btn:hover {
background-color: var(--rw-color-primary, #0d7c3e);
color: #ffffff;
border-color: var(--rw-color-primary, #0d7c3e);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 124, 62, 0.2);
}
.rwp-read-btn:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 2px 6px rgba(13, 124, 62, 0.15);
}
.rwp-read-btn:focus-visible {
outline: 2px solid var(--rw-color-primary, #0d7c3e);
outline-offset: 3px;
}
/* =========================================================
* STATE — LOADING
* ========================================================= */
.rwp-read-btn.is-loading {
background-color: var(--rw-bg-alt, #f3f4f6);
color: var(--rw-text-muted, #6b7280);
border-color: var(--rw-border-light, #e5e7eb);
cursor: wait;
pointer-events: none;
box-shadow: none;
transform: none;
}
.rwp-read-btn.is-loading .rwp-icon-loading {
animation: rwp-read-spin 1s linear infinite;
}
@keyframes rwp-read-spin {
to { transform: rotate(360deg); }
}
/* =========================================================
* STATE — PLAYING
* ========================================================= */
.rwp-read-btn.is-reading {
background-color: #c92a2a;
color: #ffffff;
border-color: #c92a2a;
animation: rwp-read-pulse 2s ease-in-out infinite;
}
.rwp-read-btn.is-reading:hover {
background-color: #a81f1f;
border-color: #a81f1f;
transform: none;
box-shadow: none;
}
@keyframes rwp-read-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(201, 42, 42, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(201, 42, 42, 0); }
}
/* =========================================================
* STATE — PAUSED
* ========================================================= */
.rwp-read-btn.is-paused {
background-color: var(--rw-color-accent, #0f1e33);
color: #ffffff;
border-color: var(--rw-color-accent, #0f1e33);
animation: none;
}
.rwp-read-btn.is-paused:hover {
background-color: #1a2b44;
border-color: #1a2b44;
transform: none;
box-shadow: none;
}
/* =========================================================
* DISABLED
* ========================================================= */
.rwp-read-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* =========================================================
* DARK MODE
* ========================================================= */
html[data-theme="dark"] .rwp-read-btn {
background-color: transparent;
color: #34d399;
border-color: #34d399;
}
html[data-theme="dark"] .rwp-read-btn:hover {
background-color: #34d399;
color: #0a0a0a;
border-color: #34d399;
}
html[data-theme="dark"] .rwp-read-btn.is-reading {
background-color: #ef4444;
color: #ffffff;
border-color: #ef4444;
}
html[data-theme="dark"] .rwp-read-btn.is-reading:hover {
background-color: #dc2626;
border-color: #dc2626;
}
html[data-theme="dark"] .rwp-read-btn.is-paused {
background-color: #ffffff;
color: #0a0a0a;
border-color: #ffffff;
}
html[data-theme="dark"] .rwp-read-btn.is-paused:hover {
background-color: #e5e7eb;
border-color: #e5e7eb;
}
html[data-theme="dark"] .rwp-read-btn.is-loading {
background-color: rgba(255, 255, 255, 0.08);
color: #94a3b8;
border-color: rgba(255, 255, 255, 0.12);
}
/* =========================================================
* MOBILE — smaller pill
* ========================================================= */
@media (max-width: 480px) {
.rwp-read-btn {
padding: 5px 10px;
min-height: 28px;
font-size: 0.75rem;
gap: 5px;
}
.rwp-read-btn .rwp-read-icon {
width: 14px;
height: 14px;
}
}
/* =========================================================
* VERY SMALL — icon-only
* ========================================================= */
@media (max-width: 359px) {
.rwp-read-btn {
padding: 6px;
width: 30px;
height: 30px;
min-height: 30px;
justify-content: center;
}
.rwp-read-btn .rwp-read-label {
display: none;
}
}
/* =========================================================
* REDUCED MOTION
* ========================================================= */
@media (prefers-reduced-motion: reduce) {
.rwp-read-btn {
transition: none;
}
.rwp-read-btn.is-reading {
animation: none;
}
.rwp-read-btn.is-loading .rwp-icon-loading {
animation: none;
}
.rwp-read-btn:hover {
transform: none;
}
}
/* --- ad-manager.css --- */
/* ═══════════════════════════════════════════════════════════
RankwellPress Pro — Ad Manager
File: assets/css/ad-manager.css
═══════════════════════════════════════════════════════════ */
.rankwellpress-pro-ad {
margin: 20px 0;
padding: 0;
display: block;
clear: both;
text-align: center;
overflow: hidden;
}
.rankwellpress-pro-ad--header {
margin: 16px 0 24px;
}
.rankwellpress-pro-ad--inline {
margin: 24px 0;
}
.rankwellpress-pro-ad--after_content {
margin: 32px 0 24px;
}
.rankwellpress-pro-ad--matched_content {
margin: 32px 0 16px;
}
.rankwellpress-pro-ad-label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--rw-text-muted, #9ca3af);
text-align: center;
margin-bottom: 6px;
font-weight: 500;
}
.rankwellpress-pro-ad-content {
display: block;
margin: 0 auto;
max-width: 100%;
overflow: hidden;
min-height: 1px;
}
.rankwellpress-pro-ad-content ins,
.rankwellpress-pro-ad-content iframe {
max-width: 100%;
margin: 0 auto;
display: block;
}
.rankwellpress-pro-ad-content img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
/* Prevent layout shift while ads load */
.rankwellpress-pro-ad--header .rankwellpress-pro-ad-content {
min-height: 90px;
}
.rankwellpress-pro-ad--before_content .rankwellpress-pro-ad-content,
.rankwellpress-pro-ad--inline .rankwellpress-pro-ad-content,
.rankwellpress-pro-ad--after_content .rankwellpress-pro-ad-content {
min-height: 250px;
}
@media (max-width: 767px) {
.rankwellpress-pro-ad {
margin: 16px 0;
}
.rankwellpress-pro-ad--header .rankwellpress-pro-ad-content,
.rankwellpress-pro-ad--before_content .rankwellpress-pro-ad-content,
.rankwellpress-pro-ad--inline .rankwellpress-pro-ad-content,
.rankwellpress-pro-ad--after_content .rankwellpress-pro-ad-content {
min-height: auto;
}
}