/* ==========================================================================
Domirel — blog-editorial.css (v1, 2026-07-02)
Premium editorial layer. Load AFTER agent-articles.css:
Deploy to BOTH prime_core/public/css/ and public_html/css/ (07_deploy.sh).
SCOPE ▸ Replace `.ppp-sp-content` below with the real article container class
found by 02_audit_live.sh step [1] (one find-and-replace, nothing else).
Written entirely with logical properties — Arabic/Farsi RTL needs no
extra rules. No !important anywhere (house rule).
========================================================================== */
:root {
/* palette — white article canvas, ink text, restrained gold accent only
for links/CTA, never as a background fill (per premium spec: white,
not cream, article background across every language). */
--dm-paper: #FFFFFF;
--dm-ink: #211F1B;
--dm-ink-2: #57534A; /* secondary text, AA on white */
--dm-gold: #9C6B24; /* links/accents — darkened slightly for AA on white */
--dm-gold-2: #C9A96E; /* hairline flourishes only, never text */
--dm-line: #E5E1D8;
--dm-note-bg: #FAF8F4; /* used ONLY inside the CTA card, nowhere else */
--dm-font-display: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
--dm-font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--dm-measure: 74ch; /* wider reading column — was 68ch */
/* modular scale (1.25), bumped up a notch for long-form readability */
--dm-fs-0: clamp(1.05rem, 1rem + 0.3vw, 1.1875rem);
--dm-fs-1: calc(var(--dm-fs-0) * 1.25);
--dm-fs-2: calc(var(--dm-fs-0) * 1.563);
--dm-fs-3: calc(var(--dm-fs-0) * 1.85);
--dm-fs-4: clamp(2rem, 1.2rem + 3.2vw, 3.2rem);
--dm-space: clamp(1.25rem, 1rem + 1vw, 2rem);
}
[dir="rtl"] {
--dm-font-display: "Cairo", "Playfair Display", serif;
--dm-font-body: "Cairo", "Inter", sans-serif;
}
[dir="rtl"] .ppp-sp-content { letter-spacing: 0; }
/* --------------------------------------------------------------------------
Article canvas & rhythm — plain white, wider column, identical in every
language (only text-direction changes via [dir]).
-------------------------------------------------------------------------- */
.ppp-sp-content {
background: var(--dm-paper);
color: var(--dm-ink);
font-family: var(--dm-font-body);
font-size: var(--dm-fs-0);
line-height: 1.8;
}
[dir="rtl"] .ppp-sp-content { line-height: 1.95; } /* Arabic needs more vertical air */
.ppp-sp-content { max-width: 820px; } /* override legacy 760px constraint — wider desktop column */
.ppp-sp-content p,
.ppp-sp-content ul,
.ppp-sp-content ol {
max-inline-size: var(--dm-measure);
margin-block: 0 1.5em;
}
.ppp-sp-content > * + h2 { margin-block-start: calc(var(--dm-space) * 2.2); }
/* Headings — unboxed, editorial, clear hierarchy step between levels */
.ppp-sp-content h1, .ppp-sp-content h2, .ppp-sp-content h3, .ppp-sp-content h4 {
font-family: var(--dm-font-display);
color: var(--dm-ink);
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
max-inline-size: 26ch;
text-wrap: balance;
}
.ppp-sp-content h1 { font-size: var(--dm-fs-4); font-weight: 800; }
.ppp-sp-content h2 {
font-size: var(--dm-fs-3);
margin-block-end: 0.7em;
padding-block-start: calc(var(--dm-space) * 1.1);
border-block-start: 1px solid var(--dm-line);
color: var(--dm-ink);
}
.ppp-sp-content h3 {
font-size: var(--dm-fs-1);
font-weight: 700;
margin-block-end: 0.55em;
color: var(--dm-ink);
}
.ppp-sp-content strong, .ppp-sp-content b { color: var(--dm-ink); font-weight: 700; }
/* Links — AA gold, understated underline that confirms on hover */
.ppp-sp-content a {
color: var(--dm-gold);
text-decoration: underline;
text-decoration-color: var(--dm-gold-2);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: text-decoration-color 160ms ease;
}
.ppp-sp-content a:hover { text-decoration-color: var(--dm-gold); }
/* --------------------------------------------------------------------------
SIGNATURE ▸ the investor aside — ONE rule, consolidated. (Previously two
separate rules existed for .insight/.advisory-box and for paragraphs
containing .dm-note-label; they conflicted in CSS specificity and the
older, heavier one was winning. Removed the duplicate — this is now the
only rule touching these asides.) Clean, neutral, no color fill.
-------------------------------------------------------------------------- */
.dm-note-label {
display: block;
font-family: var(--dm-font-body);
font-size: 0.78em;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dm-ink-2);
margin-block-end: 0.3em;
}
/* --------------------------------------------------------------------------
SIGNATURE ▸ the investor aside. Unifies .insight (was completely unstyled
→ browser default) with .advisory-box (was already styled) into ONE
consistent premium treatment. Also styles .dm-note-label for posts already
classed by the content sweep. Pure CSS — applies to all 54 posts, all 5
languages, and every future post automatically; no database change needed.
-------------------------------------------------------------------------- */
.ppp-sp-content .insight,
.ppp-sp-content .advisory-box,
.prime-article .insight,
.prime-article .advisory-box,
.ppp-sp-content .prime-article .insight,
.ppp-sp-content .prime-article .advisory-box {
background: transparent;
border: 0;
border-inline-start: 2px solid var(--dm-line);
border-radius: 0;
padding-inline-start: 16px;
padding-block: 2px;
margin-block: 1.3em;
font-size: 0.94em;
line-height: 1.65;
color: var(--dm-ink-2);
}
.ppp-sp-content .insight p,
.ppp-sp-content .advisory-box p { margin: 0 0 0.5em; }
.ppp-sp-content .insight p:last-child,
.ppp-sp-content .advisory-box p:last-child { margin-bottom: 0; }
.ppp-sp-content .insight strong,
.ppp-sp-content .advisory-box strong,
.ppp-sp-content .insight b,
.ppp-sp-content .advisory-box b { color: var(--dm-ink); font-weight: 700; }
.ppp-sp-content .insight + .insight,
.ppp-sp-content .advisory-box + .insight {
margin-block-start: 0.9em;
}
/* the final CTA — modest card, not a slab. Proportionate padding, no oversized fill. */
.ppp-sp-content .advisory-box.cta-block {
background: var(--dm-note-bg);
border: 1px solid var(--dm-line);
border-inline-start: 3px solid var(--dm-gold);
border-radius: 3px;
padding: 22px 26px;
max-width: 560px;
}
.ppp-sp-content .advisory-box.cta-block h2 {
font-size: var(--dm-fs-1);
margin-block-end: 0.35em;
border: 0;
padding: 0;
max-inline-size: none;
}
.ppp-sp-content .advisory-box.cta-block p { font-size: 0.9em; }
/* --------------------------------------------------------------------------
Author bio photo — clean circle, no double framing. Overrides the legacy
square gradient container (.ppp-sp-author-bio-logo) when it holds a real
photo instead of a placeholder logo.
-------------------------------------------------------------------------- */
.ppp-sp-author-bio-logo:has(img) {
background: none;
padding: 0;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--dm-line);
}
/* CTA row buttons — brand-consistent instead of raw WhatsApp green /
mismatched gold. Keeps recognizable icons via ::before, unifies color. */
.ppp-sp-content .cta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-block: calc(var(--dm-space) * 0.8);
}
.ppp-sp-content .cta-whatsapp,
.ppp-sp-content .cta-email {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 20px;
border-radius: 3px;
font-weight: 600;
font-size: 0.85em;
letter-spacing: 0.01em;
text-decoration: none;
transition: opacity 160ms ease, transform 160ms ease;
}
.ppp-sp-content .cta-whatsapp {
background: #1F7A4D;
color: #fff;
}
.ppp-sp-content .cta-email {
background: transparent;
color: var(--dm-ink);
border: 1px solid var(--dm-line);
}
.ppp-sp-content .cta-whatsapp:hover,
.ppp-sp-content .cta-email:hover { opacity: 0.85; text-decoration: none; }
.ppp-sp-content .cta-whatsapp:focus-visible,
.ppp-sp-content .cta-email:focus-visible { outline: 2px solid var(--dm-gold); outline-offset: 2px; }
/* Blockquotes & pull quotes */
.ppp-sp-content blockquote {
font-family: var(--dm-font-display);
font-size: var(--dm-fs-1);
line-height: 1.45;
color: var(--dm-ink);
border-inline-start: 2px solid var(--dm-gold-2);
margin-inline: 0;
padding-inline-start: var(--dm-space);
max-inline-size: var(--dm-measure);
}
/* --------------------------------------------------------------------------
Tables — editorial data, mobile-safe
-------------------------------------------------------------------------- */
.ppp-sp-content table {
inline-size: 100%;
border-collapse: collapse;
font-size: 0.92em;
font-variant-numeric: tabular-nums;
background: var(--dm-paper);
}
.ppp-sp-content table th {
font-family: var(--dm-font-body);
font-size: 0.78em;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: start;
color: var(--dm-ink-2);
background: transparent; /* no dark header fills, ever */
border-block-end: 2px solid var(--dm-ink);
padding: 0.7em 0.9em;
}
.ppp-sp-content table td {
padding: 0.8em 0.9em;
border-block-end: 1px solid var(--dm-line);
text-align: start;
}
.ppp-sp-content table tr:hover td { background: var(--dm-note-bg); }
.ppp-sp-content .table-scroll,
.ppp-sp-content div:has(> table) { /* existing scroll wrapper or bare */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-block: var(--dm-space);
}
@media (max-width: 640px) {
.ppp-sp-content table { font-size: 0.85em; }
.ppp-sp-content table th, .ppp-sp-content table td { padding: 0.55em 0.6em; }
}
/* --------------------------------------------------------------------------
Imagery — large-format, uniform crop, no borders
-------------------------------------------------------------------------- */
.ppp-sp-content img {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: 2px;
background: var(--dm-line); /* CLS-friendly placeholder tone */
margin-block: var(--dm-space);
}
.ppp-sp-content figure { margin-inline: 0; margin-block: var(--dm-space); }
.ppp-sp-content figcaption {
font-size: 0.82em;
color: var(--dm-ink-2);
padding-block-start: 0.5em;
border-block-end: 1px solid var(--dm-line);
padding-block-end: 0.75em;
}
/* --------------------------------------------------------------------------
Listing & related cards (shared card grammar for grid/related/further-reading)
-------------------------------------------------------------------------- */
.dm-card, .ppp-sp-related-item {
background: var(--dm-paper);
border: 1px solid var(--dm-line);
border-radius: 2px;
overflow: hidden;
transition: border-color 180ms ease, transform 180ms ease;
}
.dm-card:hover, .ppp-sp-related-item:hover {
border-color: var(--dm-gold-2);
transform: translateY(-2px);
}
.dm-card img, .ppp-sp-related-item img { aspect-ratio: 3 / 2; margin-block: 0; border-radius: 0; }
.dm-card .dm-card-kicker {
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--dm-gold);
}
.dm-card h3, .ppp-sp-related-item h3, .ppp-sp-related-title {
font-family: var(--dm-font-display);
font-size: 1.15rem; line-height: 1.3; border: 0; padding: 0;
}
.dm-card .dm-card-meta { font-size: 0.8rem; color: var(--dm-ink-2); }
/* --------------------------------------------------------------------------
Quality floor — never announced, always present
-------------------------------------------------------------------------- */
.ppp-sp-content :focus-visible,
.dm-card :focus-visible {
outline: 2px solid var(--dm-gold);
outline-offset: 3px;
border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
.ppp-sp-content *, .dm-card, .ppp-sp-related-item {
transition-duration: 0.01ms;
animation-duration: 0.01ms;
animation-iteration-count: 1;
scroll-behavior: auto;
}
}
@media print {
.ppp-sp-content { background: #fff; font-size: 11pt; }
.ppp-sp-content a { color: var(--dm-ink); text-decoration: none; }
.ppp-sp-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: var(--dm-ink-2); }
}