/* StyleSeat Blog — base.css Typography + WordPress body-content styles. Scope: add class "ssb" to via the child theme (body_class filter). All selectors are class-scoped so they override Elementor defaults by specificity, not !important. */ .ssb { background: var(--ssb-bg); color: var(--ssb-text); font-family: var(--ssb-font-text); font-size: var(--ssb-body-size); line-height: var(--ssb-body-lh); -webkit-font-smoothing: antialiased; } /* ---------- Headings (real h1–h4 everywhere; one h1 per page) ---------- */ .ssb h1, .ssb .ssb-h1 { font-size: var(--ssb-h1-size); font-weight: var(--ssb-h1-weight); line-height: var(--ssb-h1-lh); letter-spacing: var(--ssb-h1-ls); margin: var(--ssb-h1-mt) 0 var(--ssb-h1-mb); text-wrap: pretty; } .ssb h2, .ssb .ssb-h2 { font-size: var(--ssb-h2-size); font-weight: var(--ssb-h2-weight); line-height: var(--ssb-h2-lh); letter-spacing: var(--ssb-h2-ls); margin: var(--ssb-h2-mt) 0 var(--ssb-h2-mb); text-wrap: pretty; } .ssb h3, .ssb .ssb-h3 { font-size: var(--ssb-h3-size); font-weight: var(--ssb-h3-weight); line-height: var(--ssb-h3-lh); margin: var(--ssb-h3-mt) 0 var(--ssb-h3-mb); } .ssb h4, .ssb .ssb-h4 { font-size: var(--ssb-h4-size); font-weight: var(--ssb-h4-weight); line-height: var(--ssb-h4-lh); margin: var(--ssb-h4-mt) 0 var(--ssb-h4-mb); } /* ---------- Focus (every interactive element) ---------- */ .ssb a:focus-visible, .ssb button:focus-visible, .ssb summary:focus-visible, .ssb input:focus-visible { outline: 2px solid var(--ssb-focus); outline-offset: 2px; border-radius: 4px; } /* ---------- Links: chrome vs body ---------- Chrome links (nav, cards, footer) inherit color, no underline. Body-content links are underlined — distinct by more than color. */ .ssb a { color: inherit; text-decoration: none; } /* ---------- Article body (.ssb-content wraps the_content()) ---------- */ .ssb .ssb-content { color: var(--ssb-text-body); max-width: var(--ssb-article-width); } .ssb .ssb-content h2, .ssb .ssb-content h3, .ssb .ssb-content h4 { color: var(--ssb-text); } .ssb .ssb-content p { margin: 0 0 var(--ssb-body-mb); orphans: 3; widows: 3; } .ssb .ssb-content a { color: var(--ssb-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .ssb .ssb-content a:hover { color: var(--ssb-link-hover); text-decoration-thickness: 2px; } .ssb .ssb-content a:visited { color: var(--ssb-link-visited); } .ssb .ssb-content strong, .ssb .ssb-content b { font-weight: 600; color: var(--ssb-text); } .ssb .ssb-content em, .ssb .ssb-content i { font-style: italic; } /* Lists, incl. nested */ .ssb .ssb-content ul, .ssb .ssb-content ol { margin: 0 0 var(--ssb-body-mb); padding-left: 24px; } .ssb .ssb-content li { margin-bottom: 6px; } .ssb .ssb-content li > ul, .ssb .ssb-content li > ol { margin: 6px 0 0; } .ssb .ssb-content ul { list-style: disc; } .ssb .ssb-content ul ul { list-style: circle; } .ssb .ssb-content ol { list-style: decimal; } .ssb .ssb-content ol ol { list-style: lower-alpha; } /* Images + captions (WP figure markup) */ .ssb .ssb-content img { max-width: 100%; height: auto; border-radius: var(--ssb-radius-card); display: block; } .ssb .ssb-content figure, .ssb .ssb-content .wp-block-image { margin: var(--ssb-sp-5) 0; } .ssb .ssb-content figcaption { font-size: var(--ssb-caption-size); line-height: var(--ssb-caption-lh); color: var(--ssb-text-muted); margin-top: var(--ssb-sp-2); text-align: left; } /* Galleries (WP block gallery) */ .ssb .ssb-content .wp-block-gallery, .ssb .ssb-content .ssb-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ssb-sp-3); margin: var(--ssb-sp-5) 0; padding: 0; list-style: none; } .ssb .ssb-content .wp-block-gallery img, .ssb .ssb-content .ssb-gallery img { border-radius: var(--ssb-radius-tile); width: 100%; object-fit: cover; } @media (max-width: 767px) { .ssb .ssb-content .wp-block-gallery, .ssb .ssb-content .ssb-gallery { grid-template-columns: repeat(2, 1fr); } } /* Tables */ .ssb .ssb-content table { width: 100%; border-collapse: collapse; margin: var(--ssb-sp-5) 0; font-size: 14px; border: 1px solid var(--ssb-border); border-radius: var(--ssb-radius-tile); overflow: hidden; } .ssb .ssb-content th { background: var(--ssb-bg-alt); color: var(--ssb-text); font-weight: 500; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--ssb-border); } .ssb .ssb-content td { padding: 12px 16px; border-bottom: 1px solid var(--ssb-border-soft); } .ssb .ssb-content tr:last-child td { border-bottom: 0; } /* Blockquote */ .ssb .ssb-content blockquote { margin: var(--ssb-sp-5) 0; padding: var(--ssb-sp-4) var(--ssb-sp-5); background: var(--ssb-bg-alt); border-radius: var(--ssb-radius-tile); color: var(--ssb-text); font-size: 18px; line-height: 1.5; } .ssb .ssb-content blockquote p:last-child { margin-bottom: 0; } .ssb .ssb-content blockquote cite { display: block; margin-top: var(--ssb-sp-2); font-size: var(--ssb-small-size); font-style: normal; color: var(--ssb-text-muted); } /* HR */ .ssb .ssb-content hr { border: 0; border-top: 1px solid var(--ssb-border); margin: var(--ssb-sp-6) 0; } /* Inline code */ .ssb .ssb-content code { font-family: 'Space Grotesk', monospace; font-size: .9em; background: var(--ssb-bg-alt); border: 1px solid var(--ssb-border); border-radius: 4px; padding: 1px 6px; color: var(--ssb-text); } /* Mid-article button / CTA block (also styles WP button block) */ .ssb .ssb-content .wp-block-button__link, .ssb .ssb-btn { display: inline-block; background: var(--ssb-brand); color: #FFFFFF; font-family: var(--ssb-font-text); font-size: 14px; font-weight: 500; padding: 12px 24px; border-radius: var(--ssb-radius-btn); text-decoration: none; border: 0; cursor: pointer; text-align: center; } .ssb .ssb-content .wp-block-button__link:hover, .ssb .ssb-btn:hover { background: var(--ssb-brand-hover); color: #FFFFFF; } .ssb .ssb-content .wp-block-button__link:visited { color: #FFFFFF; } /* FAQ / accordion — native

, no JS, crawlable */ .ssb .ssb-content .ssb-faq { border: 1px solid var(--ssb-border); border-radius: var(--ssb-radius-tile); margin: var(--ssb-sp-5) 0; overflow: hidden; } .ssb .ssb-content .ssb-faq details { border-bottom: 1px solid var(--ssb-border-soft); } .ssb .ssb-content .ssb-faq details:last-child { border-bottom: 0; } .ssb .ssb-content .ssb-faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; font-weight: 500; color: var(--ssb-text); } .ssb .ssb-content .ssb-faq summary::after { content: "+"; margin-left: auto; color: var(--ssb-text-muted); font-size: 18px; } .ssb .ssb-content .ssb-faq details[open] summary::after { content: "–"; } .ssb .ssb-content .ssb-faq .ssb-faq-a { padding: 0 20px 16px; } .ssb .ssb-content .ssb-faq .ssb-faq-a p:last-child { margin-bottom: 0; }