/**
* SheSpell — canonical quote, pattern + typography styles
*
* Sections:
* 1. Custom properties (brand colors, type)
* 2. Canonical quote (.wp-block-quote.is-style-shespell + legacy fallbacks)
* 3. Pull-quote
* 4. Pattern-specific niceties (Q&A, listicle, reflection)
* 5. Editorial typography — headings, body, lists, links, captions, strong/em
*/
/* ─────────── 1. Custom properties ─────────── */
:root {
--shespell-brand: #5B2A86;
--shespell-brand-soft: rgba(91, 42, 134, 0.08);
--shespell-ink: #222;
--shespell-ink-soft: #444;
--shespell-muted: #6b6b6b;
--shespell-rule: #e8e8e8;
--shespell-font-display: "Afacad Flux", "DM Sans", sans-serif;
--shespell-font-ui: "DM Sans", system-ui, sans-serif;
}
/* Dark mode (Authentic theme switches ``).
* Override the custom properties — the rest of the stylesheet uses
* `var(--…)` so colors auto-invert without further changes. */
:root[data-scheme="dark"] {
--shespell-brand: #b994e6; /* lifted brand purple, readable on dark bg */
--shespell-brand-soft: rgba(185, 148, 230, 0.14); /* soft tint with brand hue */
--shespell-ink: #e8e8e8; /* primary body text */
--shespell-ink-soft: #c4c4c4;
--shespell-muted: #9a9a9a;
--shespell-rule: #333;
}
/* ─────────── Canonical quote ─────────── */
.wp-block-quote,
.wp-block-quote.is-style-shespell {
margin: 28px 0;
padding: 18px 56px 18px 24px;
border: 0;
border-left: 3px solid var(--shespell-brand);
background: var(--shespell-brand-soft);
border-radius: 0 6px 6px 0;
position: relative;
color: var(--shespell-ink);
font-style: normal; /* reset Authentic theme italic on outer */
}
.wp-block-quote::before {
content: "\201C"; /* curly opening double quote */
position: absolute;
right: 18px;
top: 6px;
font-family: "Cormorant Garamond", "Times New Roman", serif;
font-size: 56px;
line-height: 1;
color: var(--shespell-brand);
opacity: 0.22;
pointer-events: none;
}
.wp-block-quote > p,
.wp-block-quote p:not(.has-text-align-right):not(.has-text-align-center) {
margin: 0 0 8px;
font-family: "Afacad Flux", "DM Sans", sans-serif;
font-style: italic;
font-weight: 300;
font-size: 22px;
line-height: 1.45;
color: var(--shespell-ink);
}
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
display: block;
margin-top: 10px;
font-family: "DM Sans", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--shespell-muted);
}
/* Override the legacy cyan-bg + white-text pattern that 17 older posts use,
so they unify with the canonical style without rewriting post_content. */
.wp-block-quote p.has-cyan-bluish-gray-background-color,
.wp-block-quote p.has-white-color,
.wp-block-quote p.has-background.has-text-color {
background: transparent !important;
color: var(--shespell-ink) !important;
padding: 0 !important;
font-family: "Afacad Flux", "DM Sans", sans-serif !important;
font-style: italic !important;
font-weight: 300 !important;
}
.wp-block-quote p.has-cyan-bluish-gray-background-color strong,
.wp-block-quote p.has-white-color strong {
font-weight: 600;
color: var(--shespell-ink);
}
/* Pullquote: same family but standalone, centered, larger */
.wp-block-pullquote {
border: 0;
border-top: 1px solid var(--shespell-brand);
border-bottom: 1px solid var(--shespell-brand);
padding: 28px 12px;
margin: 36px auto;
max-width: 720px;
text-align: center;
}
.wp-block-pullquote p {
font-family: "Afacad Flux", "DM Sans", sans-serif;
font-style: italic;
font-weight: 300;
font-size: 28px;
line-height: 1.35;
color: var(--shespell-ink);
margin: 0;
}
.wp-block-pullquote cite {
display: block;
margin-top: 14px;
font-family: "DM Sans", sans-serif;
font-style: normal;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--shespell-muted);
}
/* ─────────── Pattern-specific niceties ─────────── */
/* Q&A: bold "Q:" prompts have a brand-color underline accent */
.shespell-qa-question {
font-weight: 600;
color: var(--shespell-ink);
border-bottom: 2px solid var(--shespell-brand);
display: inline-block;
padding-bottom: 2px;
margin-bottom: 4px;
}
/* Listicle: H3 section headers get a subtle brand accent */
.shespell-listicle h3 {
position: relative;
padding-left: 14px;
}
.shespell-listicle h3::before {
content: "";
position: absolute;
left: 0;
top: 0.25em;
bottom: 0.25em;
width: 3px;
background: var(--shespell-brand);
}
/* Reflection: optional centered standalone line */
.shespell-reflection .has-text-align-center em {
font-family: "Cormorant Garamond", "Times New Roman", serif;
font-size: 24px;
color: var(--shespell-muted);
}
/* Editor-only: make the placeholder hints visible but quiet */
.editor-styles-wrapper .shespell-placeholder {
color: #999;
font-style: italic;
}
/* ─────────── 5. Editorial typography ───────────
*
* Scoped to `body.single-post` so the styles only apply when viewing a
* single blog post — NOT on the homepage, archives, search results, or
* category pages, where Authentic also wraps post-card excerpts in
* `.entry-content` and our rules would spill over to 65+ post-card titles.
*
* Targets:
* .entry-content — Authentic theme post body
* .elementor-widget-text-editor .elementor-widget-container — Elementor text widgets
* .editor-styles-wrapper — Gutenberg editor preview (admin only, no body class to scope to)
*
* Why three: 37/60 posts are Elementor-built, so post-body styles must reach
* inside Elementor widget containers, not just the theme's wrapper.
*/
/* ── Body paragraphs ── */
body.single-post .entry-content p,
body.single-post .elementor-widget-text-editor .elementor-widget-container p {
font-family: var(--shespell-font-display);
font-size: 17px;
font-weight: 400;
line-height: 1.7;
color: var(--shespell-ink) !important;
letter-spacing: normal;
}
/* Editor preview keeps the same body styles. */
.editor-styles-wrapper .wp-block-post-content p,
.block-editor-page .editor-styles-wrapper p {
font-family: var(--shespell-font-display);
font-size: 17px;
line-height: 1.7;
color: var(--shespell-ink);
}
/* ── Headings ── */
body.single-post .entry-content h2,
body.single-post .elementor-widget-text-editor .elementor-widget-container h2,
.editor-styles-wrapper h2 {
font-family: var(--shespell-font-display) !important;
font-size: 32px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: var(--shespell-brand) !important;
letter-spacing: -0.02em;
margin-top: 1.6em;
margin-bottom: 0.5em;
}
body.single-post .entry-content h3,
body.single-post .elementor-widget-text-editor .elementor-widget-container h3,
.editor-styles-wrapper h3 {
font-family: var(--shespell-font-display) !important;
font-size: 24px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: var(--shespell-ink) !important;
margin-top: 1.4em;
margin-bottom: 0.4em;
}
body.single-post .entry-content h4,
body.single-post .elementor-widget-text-editor .elementor-widget-container h4,
.editor-styles-wrapper h4 {
font-family: var(--shespell-font-display) !important;
font-size: 19px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: var(--shespell-ink) !important;
margin-top: 1.2em;
margin-bottom: 0.3em;
}
/* ── Lists ── */
body.single-post .entry-content ul,
body.single-post .entry-content ol,
body.single-post .elementor-widget-text-editor .elementor-widget-container ul,
body.single-post .elementor-widget-text-editor .elementor-widget-container ol {
padding-left: 1.5em;
margin: 0 0 1.5em;
font-family: var(--shespell-font-display);
font-size: 17px;
line-height: 1.7;
color: var(--shespell-ink);
}
body.single-post .entry-content ul {
list-style: disc;
}
body.single-post .entry-content li,
body.single-post .elementor-widget-text-editor .elementor-widget-container li {
margin-bottom: 0.4em;
}
body.single-post .entry-content ul li::marker,
body.single-post .entry-content ol li::marker {
color: var(--shespell-brand);
}
/* ── Links ── */
body.single-post .entry-content a,
body.single-post .elementor-widget-text-editor .elementor-widget-container a {
color: var(--shespell-brand);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
body.single-post .entry-content a:hover,
body.single-post .elementor-widget-text-editor .elementor-widget-container a:hover {
text-decoration-thickness: 2px;
}
/* ── Strong / em — normalize the 500/700 weight split ── */
body.single-post .entry-content strong,
body.single-post .elementor-widget-text-editor .elementor-widget-container strong,
.editor-styles-wrapper strong {
font-weight: 600;
color: inherit;
}
body.single-post .entry-content em,
body.single-post .elementor-widget-text-editor .elementor-widget-container em {
font-style: italic;
color: inherit;
}
/* ── Captions — kill the Aref Ruqaa uppercase 10px label-style ── */
body.single-post .entry-content figcaption,
body.single-post .entry-content .wp-element-caption,
body.single-post .entry-content .wp-caption-text,
body.single-post .elementor-widget-image figcaption,
body.single-post .elementor-widget-image .elementor-image-caption {
font-family: var(--shespell-font-ui) !important;
font-size: 13px !important;
font-weight: 500 !important;
font-style: italic !important;
line-height: 1.5 !important;
color: var(--shespell-muted) !important;
letter-spacing: normal !important;
text-transform: none !important;
margin-top: 8px;
}
/* ── Elementor text-editor "callout" widgets ──
*
* Some posts use Elementor's text-editor widget with a custom background
* color (yellow #D8BA62 across 6 widgets in 4 posts as of 2026-05-09) as
* a visual callout box. They aren't real blockquotes — just styled paragraphs.
*
* The migration script `_migrations/2026-05-09-callouts/` removes the
* per-widget background_color setting and adds the `shespell-callout` CSS
* class to those widgets. This rule then styles them consistently with the
* canonical blockquote treatment.
*/
.elementor-widget-text-editor.shespell-callout .elementor-widget-container,
.elementor-widget-text-editor .elementor-widget-container.shespell-callout {
background: var(--shespell-brand-soft) !important;
border-left: 3px solid var(--shespell-brand);
border-radius: 0 6px 6px 0;
padding: 22px 26px !important;
margin: 24px 0;
position: relative;
}
.elementor-widget-text-editor.shespell-callout .elementor-widget-container::before,
.elementor-widget-text-editor .elementor-widget-container.shespell-callout::before {
content: "\201C";
position: absolute;
right: 16px;
top: 4px;
font-family: "Cormorant Garamond", "Times New Roman", serif;
font-size: 48px;
line-height: 1;
color: var(--shespell-brand);
opacity: 0.22;
pointer-events: none;
}
.elementor-widget-text-editor.shespell-callout p,
.elementor-widget-text-editor.shespell-callout strong,
.elementor-widget-text-editor.shespell-callout em {
color: var(--shespell-ink) !important;
}
.elementor-widget-text-editor.shespell-callout strong {
font-weight: 600 !important;
}
/* ── Hide theme sections that don't earn their place ──
*
* `.post-author` — Authentic renders an author bio panel after every
* post. With author bios not yet populated, it shows a blank avatar
* and "admin" username. Hidden until/unless authors fill in profiles.
*
* `.section-related-posts` — the theme's auto-generated "You May Also
* Like" section duplicates content already surfaced by Featured / Hot
* Today / Newest Stories on the homepage and the right-sidebar
* categories on the post itself. Felt visually redundant after the post.
*
* Both are reversible — remove this rule when author profiles are
* populated or when the related-posts widget is wanted again.
*/
body.single-post section.post-author,
body.single-post section.section-related-posts {
display: none !important;
}
/* ── Reading time badge ── */
body.single-post .entry-content > p.shespell-reading-time:first-child,
body.single-post .shespell-reading-time {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 24px !important;
padding: 4px 12px;
background: var(--shespell-brand-soft);
border-radius: 999px;
font-family: var(--shespell-font-ui) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--shespell-brand) !important;
font-style: normal !important;
line-height: 1.6 !important;
}
body.single-post .shespell-reading-time__icon {
font-size: 14px;
line-height: 1;
}
/* ── Newsletter CTA at post end ── */
body.single-post .shespell-newsletter-cta {
margin: 48px 0 24px;
padding: 32px 28px;
background: var(--shespell-brand-soft);
border-radius: 8px;
border-left: 4px solid var(--shespell-brand);
}
body.single-post .shespell-newsletter-cta h3 {
margin: 0 0 6px !important;
font-family: var(--shespell-font-display) !important;
font-size: 22px !important;
font-weight: 600 !important;
color: var(--shespell-brand) !important;
}
body.single-post .shespell-newsletter-cta p {
margin: 0 0 16px !important;
font-size: 16px !important;
line-height: 1.55 !important;
color: var(--shespell-ink) !important;
}
body.single-post .shespell-newsletter-cta__fallback {
font-size: 13px !important;
color: var(--shespell-muted) !important;
}
body.single-post .shespell-newsletter-cta input[type="email"] {
width: 100%;
max-width: 360px;
padding: 10px 14px;
font-family: var(--shespell-font-ui);
font-size: 15px;
border: 1px solid var(--shespell-rule);
border-radius: 4px;
background: #fff;
}
body.single-post .shespell-newsletter-cta input[type="submit"] {
margin-left: 6px;
padding: 10px 18px;
font-family: var(--shespell-font-ui);
font-size: 15px;
font-weight: 600;
color: #fff;
background: var(--shespell-brand);
border: 0;
border-radius: 4px;
cursor: pointer;
}
body.single-post .shespell-newsletter-cta input[type="submit"]:hover {
background: #4a2370;
}
/* ── Utility class for legacy bold-paragraph "fake headings" ──
* Apply by adding class="shespell-section" to a in older posts where you
* want the bold paragraph to read as a section break without converting to
.
*/
.entry-content p.shespell-section,
.elementor-widget-text-editor .elementor-widget-container p.shespell-section {
font-family: var(--shespell-font-display);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
color: var(--shespell-ink);
margin-top: 1.4em;
margin-bottom: 0.4em;
}
.entry-content p.shespell-section strong,
.elementor-widget-text-editor .elementor-widget-container p.shespell-section strong {
font-weight: 600;
}