/* Odyssey Behavioral Health: editorial content, lists and inline links. */
/* 3. TEXT EDITOR RICH-TEXT SYSTEM ======================== */
/* ---------------------------------------------------------
Base inheritance
--------------------------------------------------------- */
.elementor-widget-text-editor > .elementor-widget-container {
color: inherit;
}
.elementor-widget-text-editor > .elementor-widget-container p,
.elementor-widget-text-editor > .elementor-widget-container ul,
.elementor-widget-text-editor > .elementor-widget-container ol,
.elementor-widget-text-editor > .elementor-widget-container li,
.elementor-widget-text-editor > .elementor-widget-container h2,
.elementor-widget-text-editor > .elementor-widget-container h3,
.elementor-widget-text-editor > .elementor-widget-container h4,
.elementor-widget-text-editor > .elementor-widget-container h5,
.elementor-widget-text-editor > .elementor-widget-container h6,
.elementor-widget-text-editor > .elementor-widget-container strong,
.elementor-widget-text-editor > .elementor-widget-container b,
.elementor-widget-text-editor > .elementor-widget-container em {
color: inherit;
}
/* ---------------------------------------------------------
Frontend rich-text margin reset
--------------------------------------------------------- */
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h2,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h3,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h4,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h5,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h6 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------
Paragraph / list spacing
--------------------------------------------------------- */
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + ol,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + ol {
margin-top: var(--obh-content-gap) !important;
}
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + ol {
margin-top: var(--obh-list-gap) !important;
}
/* ---------------------------------------------------------
Heading spacing inside rich text
--------------------------------------------------------- */
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h2 + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h2 + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h2 + ol,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h3 + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h3 + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h3 + ol,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h4 + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h4 + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h4 + ol,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h5 + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h5 + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h5 + ol,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h6 + p,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h6 + ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > h6 + ol,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + h2,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + h3,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + h4,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + h5,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > p + h6,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + h2,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + h3,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + h4,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + h5,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ul + h6,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + h2,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + h3,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + h4,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + h5,
body:not(.elementor-editor-active)
.elementor-widget-text-editor > .elementor-widget-container > ol + h6 {
margin-top: var(--obh-heading-gap) !important;
}
/* ---------------------------------------------------------
DEFAULT UNORDERED LIST
Applies to ordinary Elementor Text Editor widgets.
obh-body-copy overrides this system below.
--------------------------------------------------------- */
body:not(.elementor-editor-active)
.elementor-widget-text-editor:not(.obh-body-copy)
> .elementor-widget-container > ul {
list-style: none !important;
margin-left: 8px !important;
margin-right: 0 !important;
padding-left: 0 !important;
}
body:not(.elementor-editor-active)
.elementor-widget-text-editor:not(.obh-body-copy)
> .elementor-widget-container > ul > li {
position: relative;
list-style: none !important;
margin: 0 0 var(--obh-list-gap) !important;
padding-left: calc(1.05rem + 6px) !important;
}
body:not(.elementor-editor-active)
.elementor-widget-text-editor:not(.obh-body-copy)
> .elementor-widget-container > ul > li:last-child {
margin-bottom: 0 !important;
}
body:not(.elementor-editor-active)
.elementor-widget-text-editor:not(.obh-body-copy)
> .elementor-widget-container > ul > li::before {
content: "+" !important;
position: absolute;
top: 0.2em;
left: 0;
width: 0.8rem;
color: var(--obh-accent);
font:
600
1.17rem / 1.13
var(--obh-font-body);
}
/* ---------------------------------------------------------
DEFAULT ORDERED LIST
--------------------------------------------------------- */
body:not(.elementor-editor-active)
.elementor-widget-text-editor
> .elementor-widget-container > ol {
list-style-position: outside;
margin-left: 8px !important;
margin-right: 0 !important;
padding-left: 1.6rem !important;
}
body:not(.elementor-editor-active)
.elementor-widget-text-editor
> .elementor-widget-container > ol > li {
margin: 0 0 var(--obh-list-gap) !important;
}
body:not(.elementor-editor-active)
.elementor-widget-text-editor
> .elementor-widget-container > ol > li:last-child {
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------
Nested lists
--------------------------------------------------------- */
body:not(.elementor-editor-active)
.elementor-widget-text-editor
> .elementor-widget-container li > ul,
body:not(.elementor-editor-active)
.elementor-widget-text-editor
> .elementor-widget-container li > ol {
margin-top: var(--obh-list-gap) !important;
}
/* =========================================================
OBH BODY COPY / WYSIWYG CONTENT
Class: obh-body-copy
Applied to Elementor Text Editor widgets displaying
ACF WYSIWYG content.
Standard paragraphs retain normal body typography.
Unordered lists use the visual treatment of the
special-icon-list component.
========================================================= */
/* ---------------------------------------------------------
1. BASE WIDGET
--------------------------------------------------------- */
.obh-body-copy {
font-family: var(--obh-font-body) !important;
}
/* ---------------------------------------------------------
2. PARAGRAPHS
--------------------------------------------------------- */
.obh-body-copy p {
margin-top: 0 !important;
margin-bottom: 24px !important;
font-family: "LT Superior", sans-serif !important;
font-size: 1.17rem !important;
font-weight: 400 !important;
line-height: 1.55em !important;
letter-spacing: -0.25px !important;
}
.obh-body-copy p:last-child {
margin-bottom: 0 !important;
}
/* ---------------------------------------------------------
3. UNORDERED LIST
Special icon-list visual treatment
--------------------------------------------------------- */
.obh-body-copy ul {
list-style: none !important;
margin: 32px 0 !important;
padding: 0 !important;
}
/* Remove native browser / Elementor bullets */
.obh-body-copy ul > li {
position: relative !important;
display: block !important;
list-style: none !important;
margin: 0 !important;
padding: 0 0 0 calc(0.95em + 10px) !important;
font-family: var(--obh-font-heading) !important;
font-size: clamp(1.17rem, 1.5vw, 1.2rem) !important;
font-weight: var(--obh-type-shippori-subhead-weight) !important;
line-height: 1.35 !important;
letter-spacing: -0.8px !important;
}
.obh-body-copy ul > li::marker {
content: "" !important;
}
/* Space between list items */
.obh-body-copy ul > li:not(:last-child) {
margin-bottom: 16px !important;
}
/* ---------------------------------------------------------
4. CUSTOM PLUS MARKER
Same visual marker used by special-icon-list
--------------------------------------------------------- */
.obh-body-copy ul > li::before {
content: "" !important;
position: absolute !important;
top: 0.15em !important;
left: 0 !important;
width: 0.7em !important;
height: 0.7em !important;
background-color: #2799DE !important;
-webkit-mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3V21M3 12H21' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat;
mask:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3V21M3 12H21' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E")
center / contain no-repeat;
}
/* ---------------------------------------------------------
5. LINKS INSIDE LIST ITEMS
List-item links use the Odyssey content-link blue.
Typography inherits from the parent list item.
--------------------------------------------------------- */
.obh-body-copy ul > li a {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: #176FA8 !important;
}
/* ---------------------------------------------------------
BODY COPY — LIGHT LINKS ON DARK BACKGROUNDS
--------------------------------------------------------- */
.obh-body-copy.obh-body-copy--light-links a,
.obh-body-copy.obh-body-copy--light-links ul > li a,
.obh-body-copy.obh-body-copy--light-links ol > li a {
color: #A2DAF4 !important;
}
.obh-body-copy.obh-body-copy--light-links a:hover,
.obh-body-copy.obh-body-copy--light-links a:focus-visible,
.obh-body-copy.obh-body-copy--light-links ul > li a:hover,
.obh-body-copy.obh-body-copy--light-links ul > li a:focus-visible,
.obh-body-copy.obh-body-copy--light-links ol > li a:hover,
.obh-body-copy.obh-body-copy--light-links ol > li a:focus-visible {
color: #A2DAF4 !important;
}
/* ---------------------------------------------------------
6. ORDERED LISTS
Keep normal numbering while matching the larger,
lighter list typography.
--------------------------------------------------------- */
.obh-body-copy ol {
margin: 20px 0 !important;
padding-left: 1.5em !important;
}
.obh-body-copy ol > li {
margin: 0 !important;
font-family: var(--obh-font-body) !important;
font-size: clamp(1.17rem, 1.5vw, 1.2rem) !important;
font-weight: 300 !important;
line-height: 1.35 !important;
}
.obh-body-copy ol > li:not(:last-child) {
margin-bottom: 16px !important;
}
.obh-body-copy ol > li a {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* ---------------------------------------------------------
7. FIRST / LAST ELEMENT SPACING
Prevent WYSIWYG content from creating unwanted space
against the top or bottom of its Elementor widget.
--------------------------------------------------------- */
.obh-body-copy > :first-child {
margin-top: 0 !important;
}
.obh-body-copy > :last-child {
margin-bottom: 0 !important;
}
/* 4. LINKS =============================================== */
.elementor-widget-text-editor a,
.elementor-text-editor a {
font-weight: inherit;
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition:
color var(--obh-transition-fast),
text-decoration-thickness var(--obh-transition-fast);
}
.elementor-widget-text-editor a:hover,
.elementor-widget-text-editor a:focus-visible,
.elementor-text-editor a:hover,
.elementor-text-editor a:focus-visible {
text-decoration-thickness: 1.5px;
}
.elementor-widget-text-editor a:focus-visible,
.elementor-text-editor a:focus-visible {
outline: 2px solid var(--obh-accent);
outline-offset: 3px;
}
/* =========================================================
SHARED HEADING STACK
Global vertical rhythm for the recurring Odyssey pattern:
eyebrow -> serif subhead -> supporting copy
RULE:
- 24px between consecutive stacked content elements,
supplied by --obh-section-eyebrow-gap in 01-foundation.css.
- 56px between separate content/section groups,
supplied separately by --obh-section-note-gap.
Usage:
Eyebrow visual styling remains owned exclusively by
.obh-eyebrow / .obh-eyebrow-light below.
========================================================= */
.obh-heading-stack {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
gap: var(--obh-section-eyebrow-gap);
}
/*
* Direct children contribute no external vertical margins.
* The parent gap is the single source of truth for spacing.
*/
.obh-heading-stack > .obh-eyebrow,
.obh-heading-stack > .obh-kicker,
.obh-heading-stack > .obh-faq-kicker,
.obh-heading-stack > .obh-type-shippori-subhead,
.obh-heading-stack > .obh-type-smaller-h2,
.obh-heading-stack > .obh-heading-stack__subhead,
.obh-heading-stack > .obh-heading-stack__copy {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Normalize common WYSIWYG wrappers used as direct stack items. */
.obh-heading-stack > .obh-heading-stack__subhead > :first-child,
.obh-heading-stack > .obh-heading-stack__copy > :first-child {
margin-top: 0 !important;
}
.obh-heading-stack > .obh-heading-stack__subhead > :last-child,
.obh-heading-stack > .obh-heading-stack__copy > :last-child {
margin-bottom: 0 !important;
}
/* 5. SITEWIDE DECORATIVE ELEMENTS ======================== */
/* ---------------------------------------------------------
GRADIENT EYEBROW
Semantic eyebrow heading.
Eyebrows must always use an H2.
Standard:
...
Dark background:
...
Elementor compatibility:
Apply obh-eyebrow to an Elementor Heading widget and
set the widget HTML tag to H2.
SPACING RULE:
The eyebrow itself contributes no external spacing.
Spacing between an eyebrow and the serif subhead beneath
it must be controlled by --obh-section-eyebrow-gap.
--------------------------------------------------------- */
/* ---------------------------------------------------------
SHARED EYEBROW LAYOUT
Works when .obh-eyebrow is applied directly to an H2
or to an Elementor Heading widget wrapper.
--------------------------------------------------------- */
.obh-eyebrow,
.obh-kicker,
.obh-faq-kicker,
.obh-find-treatment-preheader {
display: inline-block;
width: fit-content;
margin: 0;
padding: 0;
}
/* ---------------------------------------------------------
STANDARD EYEBROW
Typography uses Odyssey design tokens.
Gradient/font/color styling remains centralized here.
Explicit margin reset prevents browser, Hello Elementor,
Elementor Kit, or global H2 margins from adding space.
--------------------------------------------------------- */
body h2.obh-eyebrow,
body .obh-kicker,
body .obh-faq-kicker,
body .obh-find-treatment-preheader,
body .elementor-widget-heading.obh-eyebrow h2.elementor-heading-title {
margin: 0;
padding: 0;
font-family: var(--obh-type-accent-preheader-family);
font-size: var(--obh-type-accent-preheader-size);
font-weight: var(--obh-type-accent-preheader-weight);
line-height: var(--obh-type-accent-preheader-line-height);
letter-spacing: var(--obh-type-accent-preheader-letter-spacing);
text-transform: var(--obh-type-accent-preheader-transform);
background: linear-gradient(
90deg,
#1079B8 0%,
#9F6DA9 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* =========================================================
EYEBROW - LIGHT GRADIENT FOR DARK BACKGROUNDS
Use only on dark backgrounds:
...
Elementor:
Apply both classes to the Heading widget:
obh-eyebrow obh-eyebrow-light
This variant changes only the gradient.
Layout, typography, and spacing continue to come from
the standard .obh-eyebrow rules above.
========================================================= */
body h2.obh-eyebrow.obh-eyebrow-light,
body .elementor-widget-heading.obh-eyebrow.obh-eyebrow-light h2.elementor-heading-title {
background-image: linear-gradient(
90deg,
#6FD3FF 0%,
#D9A6FF 100%
);
}
/* ---------------------------------------------------------
Gradient divider
Elementor Divider widget
CSS class: obh-divider
--------------------------------------------------------- */
.obh-divider {
padding-top: 8px;
}
.obh-divider .elementor-divider-separator {
border: 0 !important;
height: 2px;
width: 112px !important;
background: linear-gradient(
90deg,
#258FE8 0%,
#B05ACB 100%
);
}
/* ---------------------------------------------------------
BODY COPY LIST — INLINE EDITOR SPAN NORMALIZATION
Prevent TinyMCE/WYSIWYG inline styles from overriding the
approved list-item typography.
--------------------------------------------------------- */
.obh-body-copy ul > li > span,
.obh-body-copy ul > li span {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
color: inherit;
}
/* ==========================================================
OBH BODY COPY — AUTHORED H2 / H3
Applies to normal obh-body-copy WYSIWYG content.
Semantic H2:
Uses the existing Smaller H2 typography system.
Semantic H3:
Uses the existing Shippori Subhead typography system.
Dedicated FAQ question/answer styling remains controlled
independently by 08-faq.css and is not changed here.
========================================================== */
/* ---------------------------------------------------------
H2 — SMALLER H2 TYPOGRAPHY
--------------------------------------------------------- */
.obh-body-copy:not(.obh-faq-answer) h2 {
font-family: var(--obh-type-smaller-h2-family) !important;
font-size: var(--obh-type-smaller-h2-size) !important;
font-weight: var(--obh-type-smaller-h2-weight) !important;
line-height: var(--obh-type-smaller-h2-line-height) !important;
letter-spacing: var(--obh-type-smaller-h2-letter-spacing) !important;
}
/* ---------------------------------------------------------
H3 — SHIPPORI SUBHEAD TYPOGRAPHY
--------------------------------------------------------- */
.obh-body-copy:not(.obh-faq-answer) h3 {
font-family: var(--obh-type-shippori-subhead-family) !important;
font-size: var(--obh-type-shippori-subhead-size) !important;
font-weight: var(--obh-type-shippori-subhead-weight) !important;
line-height: var(--obh-type-shippori-subhead-line-height) !important;
letter-spacing: var(--obh-type-shippori-subhead-letter-spacing) !important;
}
/* ---------------------------------------------------------
H2 / H3 — INLINE EDITOR SPAN NORMALIZATION
TinyMCE can insert markup such as:
...
Force those inline spans to inherit the approved heading
typography instead.
--------------------------------------------------------- */
.obh-body-copy:not(.obh-faq-answer) h2 span,
.obh-body-copy:not(.obh-faq-answer) h3 span {
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
letter-spacing: inherit !important;
color: inherit;
}
/* ==========================================================
CUSTOM TYPOGRAPHY UTILITIES — DESCENDANT NORMALIZATION
Prevent TinyMCE / ACF WYSIWYG inline typography such as
and generic paragraph rules
from overriding Odyssey typography tokens.
========================================================== */
.obh-type-smaller-h2,
.obh-type-smaller-h2 p,
.obh-type-smaller-h2 span,
.obh-type-smaller-h2 strong,
.obh-type-smaller-h2 em {
font-family: var(--obh-type-smaller-h2-family) !important;
font-size: var(--obh-type-smaller-h2-size) !important;
font-weight: var(--obh-type-smaller-h2-weight) !important;
line-height: var(--obh-type-smaller-h2-line-height) !important;
letter-spacing: var(--obh-type-smaller-h2-letter-spacing) !important;
}
.obh-type-shippori-subhead,
.obh-type-shippori-subhead p,
.obh-type-shippori-subhead span,
.obh-type-shippori-subhead strong,
.obh-type-shippori-subhead em {
font-family: var(--obh-type-shippori-subhead-family) !important;
font-size: var(--obh-type-shippori-subhead-size) !important;
font-weight: var(--obh-type-shippori-subhead-weight) !important;
line-height: var(--obh-type-shippori-subhead-line-height) !important;
letter-spacing: var(--obh-type-shippori-subhead-letter-spacing) !important;
}
/* ==========================================================
WYSIWYG SHORTCODE DIVIDER SPACING
Adds the standard 24px design-system spacing after an
[obh_divider] shortcode rendered inside obh-body-copy.
========================================================== */
.obh-body-copy .obh-divider {
margin-bottom: var(--obh-section-eyebrow-gap);
}
/* ---------------------------------------------------------
BLUE → PURPLE GRADIENT TEXT
For Elementor Text Editor widgets containing raw text.
--------------------------------------------------------- */
.elementor-widget-text-editor.obh-gradient-text {
display: inline-block;
width: fit-content;
background: linear-gradient(
90deg,
#1079B8 0%,
#9F6DA9 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}