markup so no JS is required inside articles.
======================================== */
.single-post .entry-content .tilt-faq,
.single-post .et_pb_post_content .tilt-faq {
margin: 2.5rem 0;
}.single-post .entry-content .tilt-faq details {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 1rem;
overflow: hidden;
}.single-post .entry-content .tilt-faq details:last-child {
margin-bottom: 0;
}.single-post .entry-content .tilt-faq summary {
cursor: pointer;
padding: 1.25rem 3rem 1.25rem 1.5rem;
font-family: 'Open Sans', sans-serif;
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-dark);
list-style: none;
position: relative;
line-height: 1.4;
transition: background 0.2s ease;
}.single-post .entry-content .tilt-faq summary::-webkit-details-marker {
display: none;
}.single-post .entry-content .tilt-faq summary:hover {
background: var(--bg-light);
}.single-post .entry-content .tilt-faq summary:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
border-radius: 8px;
}/* css-drawn chevron, rotates when open */
.single-post .entry-content .tilt-faq summary::after {
content: '';
position: absolute;
right: 1.5rem;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: translateY(-70%) rotate(45deg);
transition: transform 0.3s ease;
}.single-post .entry-content .tilt-faq details[open] summary::after {
transform: translateY(-30%) rotate(-135deg);
}/* if author wraps the question in an h3, neutralize the heading chrome */
.single-post .entry-content .tilt-faq summary h3 {
display: inline;
margin: 0;
padding: 0;
border: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
color: inherit;
line-height: inherit;
}.single-post .entry-content .tilt-faq-answer {
padding: 0 1.5rem 1.25rem;
font-size: 1.0625rem;
line-height: 1.65;
color: #374151;
}.single-post .entry-content .tilt-faq-answer p:last-child {
margin-bottom: 0;
}/* ========================================
AUTHOR CARD - .tilt-author
======================================== */
.single-post .entry-content .tilt-author,
.single-post .et_pb_post_content .tilt-author {
display: grid;
grid-template-columns: 80px 1fr;
column-gap: 1.25rem;
align-items: center;
margin: 3rem 0 0;
padding: 1.5rem;
background: var(--bg-light);
border-radius: var(--radius-md);
border: 1px solid var(--border);
}.single-post .entry-content .tilt-author-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
margin: 0;
}.single-post .entry-content .tilt-author-name {
font-family: 'Open Sans', sans-serif;
font-size: 1.125rem;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 0.125rem;
line-height: 1.3;
}.single-post .entry-content .tilt-author-role {
font-size: 0.9375rem;
color: var(--text-muted);
margin: 0 0 0.5rem;
line-height: 1.4;
}.single-post .entry-content .tilt-author-link {
font-size: 0.875rem;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}.single-post .entry-content .tilt-author-link:hover {
text-decoration: underline;
}/* ========================================
IMAGES + FIGURES
======================================== */
.single-post .entry-content figure,
.single-post .et_pb_post_content figure {
margin: 2.5rem 0;
}.single-post .entry-content img,
.single-post .et_pb_post_content img {
border-radius: var(--radius-sm);
border: 1px solid var(--border);
margin: 0;
max-width: 100%;
height: auto;
}.single-post .entry-content figcaption,
.single-post .entry-content .wp-caption-text {
font-size: 0.875rem;
color: var(--text-muted);
text-align: center;
margin-top: 0.625rem;
font-style: italic;
line-height: 1.45;
}.single-post .entry-content .wp-caption {
max-width: 100%;
margin: 2.5rem 0;
}/* avatar override (inside .tilt-author the border-radius should be circular, not radius-sm) */
.single-post .entry-content img.tilt-author-avatar {
border-radius: 50%;
}/* wpautop may wrap the bare ![]()
in; treat that wrapper as the grid child */
.single-post .entry-content .tilt-author > p {
display: contents;
margin: 0;
}/* ========================================
TABLES
======================================== */
.single-post .entry-content table,
.single-post .et_pb_post_content table {
width: 100%;
margin: 2rem 0;
border-collapse: collapse;
font-size: 0.9375rem;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
overflow: hidden;
}.single-post .entry-content th,
.single-post .et_pb_post_content th {
background: var(--primary);
color: #fff;
font-weight: 600;
padding: 0.875rem 1rem;
text-align: left;
border: none;
}.single-post .entry-content td,
.single-post .et_pb_post_content td {
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--border);
border-left: none;
border-right: none;
border-top: none;
}.single-post .entry-content tr:last-child td {
border-bottom: none;
}.single-post .entry-content tbody tr:nth-child(even) td {
background: rgba(248, 249, 250, 0.6);
}.single-post .entry-content tbody tr:hover td {
background: var(--bg-light);
}/* ========================================
CODE
======================================== */
.single-post .entry-content code,
.single-post .et_pb_post_content code {
font-family: 'Fira Code', 'Consolas', monospace;
font-size: 0.875em;
background: #f3f4f6;
padding: 0.15em 0.4em;
border-radius: 4px;
color: var(--primary);
}.single-post .entry-content pre,
.single-post .et_pb_post_content pre {
background: var(--text-dark);
color: #e5e7eb;
padding: 1.5rem;
border-radius: var(--radius-sm);
overflow-x: auto;
margin: 2rem 0;
}.single-post .entry-content pre code {
background: transparent;
padding: 0;
color: #e5e7eb;
}/* ========================================
HR
======================================== */
.single-post .entry-content hr,
.single-post .et_pb_post_content hr {
border: none;
border-top: 1px solid var(--border);
margin: 3rem 0;
}/* ========================================
POST TAGS (footer)
======================================== */
.single-post .post-tags,
.single-post .et_post_tags {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}.single-post .post-tags a,
.single-post .et_post_tags a {
display: inline-block;
background: #f3f4f6;
color: #374151;
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.8125rem;
margin: 0.25rem 0.25rem 0.25rem 0;
text-decoration: none;
transition: all 0.2s ease;
}.single-post .post-tags a:hover,
.single-post .et_post_tags a:hover {
background: var(--primary);
color: #fff;
}/* ========================================
TABLE OF CONTENTS - .tilt-toc
Auto-generated by tilt-divi-scripts.html (only on posts with >= 4 H2s).
Inline at top of article on smaller viewports; fixed sticky sidebar on >= 1366px.
======================================== */
.single-post .tilt-toc {
/* the floating panel's geometry, in px so the script can read these straight
off the element and decide whether the panel clears the article column.
one source of truth: change the layout here, not in the script. */
--tilt-toc-left: 24px;
--tilt-toc-width: 240px;
--tilt-toc-gap: 32px;
margin: 0 0 2.5rem;
padding: 1.25rem 1.5rem;
background: var(--bg-light);
/* no border: the accent bar belongs to the active item below, which is the
one place on the page where it carries information */
border: none;
border-radius: var(--radius-sm);
font-size: 0.9375rem;
line-height: 1.5;
}.single-post .tilt-toc-label {
font-family: 'Open Sans', sans-serif;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--primary);
margin: 0 0 0.75rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
display: block;
}.single-post .tilt-toc ol {
list-style: none !important;
margin: 0;
padding: 0;
counter-reset: tilt-toc;
}.single-post .tilt-toc li {
counter-increment: tilt-toc;
margin: 0;
padding: 0;
list-style: none !important;
}.single-post .tilt-toc li::marker {
content: none;
}.single-post .tilt-toc a {
display: block;
padding: 0.375rem 0 0.375rem 1.875rem;
text-decoration: none;
color: var(--text-muted);
position: relative;
border-left: 2px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease;
}.single-post .tilt-toc a::before {
content: counter(tilt-toc, decimal-leading-zero);
position: absolute;
left: 0.625rem;
top: 0.4rem;
font-size: 0.6875rem;
font-weight: 600;
color: var(--text-muted);
opacity: 0.55;
}.single-post .tilt-toc a:hover {
color: var(--text-dark);
}.single-post .tilt-toc a.is-active {
color: var(--primary-dark);
font-weight: 600;
border-left-color: var(--primary);
}.single-post .tilt-toc a.is-active::before {
color: var(--primary);
opacity: 1;
}/* Fixed sticky sidebar, applied by tilt-divi-scripts.html only when the panel
actually clears the article column. A viewport breakpoint cannot decide this:
the column starts at 143px on some posts and 257px on others at the same
viewport, so a single width overlapped the text on one and not the other. */
.single-post .tilt-toc.tilt-toc--float {
position: fixed;
top: 50%;
left: var(--tilt-toc-left);
transform: translateY(-50%);
width: var(--tilt-toc-width);
max-height: 72vh;
overflow-y: auto;
margin: 0;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
/* without the border the floating panel loses its edge; depth replaces it */
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
font-size: 0.8125rem;
z-index: 50;
}@media (prefers-reduced-motion: reduce) {
.single-post .entry-content *,
.single-post .entry-content *::before,
.single-post .entry-content *::after,
.single-post .tilt-toc,
.single-post .tilt-toc *,
.single-post .tilt-toc *::before {
transition: none !important;
animation: none !important;
}
}/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 768px) {
/* 80% would leave too little measure on a phone; go full width with padding */
.single-post .et_pb_post,
.single-post article.post {
width: 100%;
padding: 0 1rem;
}.single-post h1.entry-title,
.single-post .et_pb_title_container h1 {
font-size: 1.875rem;
}.single-post .entry-content h2,
.single-post .et_pb_post_content h2 {
font-size: 1.5rem;
margin-top: 1.5rem;
}.single-post .entry-content h3,
.single-post .et_pb_post_content h3 {
font-size: 1.1875rem;
}.single-post .entry-content blockquote.tilt-pullquote {
font-size: 1.25rem;
margin: 2rem 0;
padding-left: 2.5rem;
}.single-post .entry-content blockquote.tilt-pullquote::before {
font-size: 3.5rem;
}.single-post .entry-content .tilt-takeaways {
padding: 1.125rem 0 1.25rem;
}.single-post .entry-content .tilt-article-cta {
padding: 1.125rem 1.25rem;
}.single-post .entry-content .tilt-callout {
padding: 1rem 1.125rem;
}.single-post .entry-content .tilt-article-stat {
padding: 1.5rem 1.125rem;
}.single-post .entry-content .tilt-author {
grid-template-columns: 64px 1fr;
column-gap: 1rem;
padding: 1.25rem;
}.single-post .entry-content .tilt-author-avatar {
width: 64px;
height: 64px;
}.single-post .entry-content .tilt-faq summary {
padding-right: 2rem;
}
}
