/* ========================================================================== Succes News — content.css Long-read prose typography (.sn-prose), Gutenberg core blocks, block styles, editorial pattern classes (.sn-faq, .sn-timeline, .sn-pros-cons, .sn-expert, .sn-quote--big), paginated post links, dark-mode nuances and print. Loaded on every singular view (posts, pages, attachments). Tokens come from main.css + the inline #sn-vars block (colors, fonts, widths). ========================================================================== */ /* -------------------------------------------------------------------------- 0. Measure & layout inside the page layouts -------------------------------------------------------------------------- */ .sn-prose { --sn-ok: #16a34a; --sn-bad: #dc2626; --sn-prose-space: 1.35em; font-family: var(--sn-font-body); font-size: var(--sn-fs-article); line-height: var(--sn-lh-body); color: var(--sn-text); overflow-wrap: break-word; hyphens: manual; } .sn-prose--m { font-size: 1.0625rem; } .sn-prose--l { font-size: 1.125rem; } .sn-prose--xl { font-size: 1.1875rem; } /* Defensive: Setup adds sn-layout--* classes to ; the grid rules in main.css target .sn-layout--no-sidebar and must never narrow the body. */ body.sn-layout--no-sidebar { max-width: none; margin-inline: 0; } /* Without a sidebar the text column is limited to the configured measure and centered; wide/full alignments break out of it (computed below). */ .sn-layout--no-sidebar .sn-prose, .sn-layout--full-width .sn-prose { max-width: var(--sn-content-width); margin-inline: auto; --sn-wide-w: min(100% + 120px, 100vw - var(--sn-gutter) * 2, var(--sn-container) - var(--sn-gutter) * 2); --sn-full-w: min(100vw - var(--sn-gutter) * 2, var(--sn-container) - var(--sn-gutter) * 2); } .sn-layout--full-width .sn-prose { --sn-wide-w: min(100% + 240px, 100vw - var(--sn-gutter) * 2); --sn-full-w: calc(100vw - var(--sn-gutter) * 2); } .sn-prose > .alignwide, .sn-prose > .alignfull { max-width: none; width: 100%; margin-inline: 0; } .sn-layout--no-sidebar .sn-prose > .alignwide, .sn-layout--full-width .sn-prose > .alignwide { width: var(--sn-wide-w); margin-left: calc(50% - var(--sn-wide-w) / 2); margin-right: 0; } .sn-layout--no-sidebar .sn-prose > .alignfull, .sn-layout--full-width .sn-prose > .alignfull { width: var(--sn-full-w); margin-left: calc(50% - var(--sn-full-w) / 2); margin-right: 0; } /* With a sidebar the main column is single-column below 1024px: full-width blocks may bleed into the page gutters. */ @media (max-width: 1023px) { .sn-layout--sidebar-right .sn-prose > .alignfull, .sn-layout--sidebar-left .sn-prose > .alignfull { width: calc(100% + var(--sn-gutter) * 2); margin-inline: calc(-1 * var(--sn-gutter)); } .sn-prose > .alignfull .wp-block-cover, .sn-prose > .alignfull img { border-radius: 0; } } /* -------------------------------------------------------------------------- 1. Flow & vertical rhythm -------------------------------------------------------------------------- */ .sn-prose > * { margin-top: 0; margin-bottom: var(--sn-prose-space); } .sn-prose > :first-child { margin-top: 0; } .sn-prose > :last-child { margin-bottom: 0; } .sn-prose p { margin: 0 0 var(--sn-prose-space); } .sn-prose p:empty { display: none; } .sn-prose .has-drop-cap:not(:focus)::first-letter { font-family: var(--sn-font-heading); color: var(--sn-primary); font-weight: 800; } /* Headings — scale tuned for articles (smaller than page-level h2/h3). */ .sn-prose h1, .sn-prose h2, .sn-prose h3, .sn-prose h4, .sn-prose h5, .sn-prose h6 { font-family: var(--sn-font-heading); font-weight: var(--sn-heading-weight); letter-spacing: var(--sn-heading-ls); line-height: var(--sn-lh-snug); color: var(--sn-heading); margin: 1.9em 0 .65em; scroll-margin-top: calc(var(--sn-sticky-h) + 1.25rem); text-wrap: balance; } .sn-prose h1 { font-size: calc(var(--sn-fs-3xl) * var(--sn-headline-scale)); } .sn-prose h2 { font-size: calc(1.55em * var(--sn-headline-scale)); } .sn-prose h3 { font-size: calc(1.28em * var(--sn-headline-scale)); } .sn-prose h4 { font-size: 1.1em; } .sn-prose h5 { font-size: 1em; text-transform: var(--sn-label-tt); letter-spacing: .04em; font-family: var(--sn-font-ui); } .sn-prose h6 { font-size: .9em; text-transform: var(--sn-label-tt); letter-spacing: .06em; font-family: var(--sn-font-ui); color: var(--sn-text-muted); } .sn-prose > h2:first-child, .sn-prose > h3:first-child, .sn-prose > h4:first-child { margin-top: 0; } .sn-prose h2 + h3, .sn-prose h3 + h4 { margin-top: .75em; } .sn-prose h2 a, .sn-prose h3 a, .sn-prose h4 a { color: inherit; text-decoration: none; } /* Links */ .sn-prose a { color: var(--sn-link); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--sn-link) 45%, transparent); text-underline-offset: .18em; transition: color var(--sn-dur), text-decoration-color var(--sn-dur); } .sn-prose a:hover { color: var(--sn-link-hover); text-decoration-color: currentColor; } .sn-prose a:focus-visible { outline-offset: 3px; border-radius: 2px; } /* Inline text */ .sn-prose strong, .sn-prose b { font-weight: 700; color: var(--sn-heading); } .sn-prose em, .sn-prose i { font-style: italic; } .sn-prose small { font-size: .85em; } .sn-prose sub, .sn-prose sup { font-size: .7em; line-height: 0; } .sn-prose abbr[title] { text-decoration: underline dotted; text-underline-offset: .15em; cursor: help; } .sn-prose mark { background: color-mix(in srgb, var(--sn-accent) 35%, transparent); color: inherit; padding: 0 .15em; border-radius: 2px; } .sn-prose kbd { font-family: var(--sn-font-mono); font-size: .8em; padding: .1em .4em; border: 1px solid var(--sn-border-strong); border-bottom-width: 2px; border-radius: var(--sn-radius-sm); background: var(--sn-surface); } .sn-prose hr, .sn-prose .wp-block-separator { border: 0; border-top: 1px solid var(--sn-border); margin: calc(var(--sn-prose-space) * 1.8) auto; max-width: 120px; } .sn-prose .wp-block-separator.is-style-wide, .sn-prose .wp-block-separator.alignwide, .sn-prose .wp-block-separator.alignfull { max-width: none; } .sn-prose .wp-block-separator.is-style-dots { border: 0; text-align: center; max-width: none; line-height: 1; } .sn-prose .wp-block-separator.is-style-dots::before { content: "···"; color: var(--sn-text-muted); font-size: 1.6em; letter-spacing: 1em; padding-left: 1em; font-family: serif; } .sn-prose .wp-block-separator.has-background { border-top-color: currentColor; } /* Lists */ .sn-prose ul, .sn-prose ol { margin: 0 0 var(--sn-prose-space); padding-left: 1.5em; } .sn-prose li { margin: 0 0 .45em; } .sn-prose li > ul, .sn-prose li > ol { margin: .45em 0 0; } .sn-prose li::marker { color: var(--sn-primary); font-weight: 600; } .sn-prose ul { list-style: disc; } .sn-prose ul ul { list-style: circle; } .sn-prose ol { list-style: decimal; } .sn-prose ol ol { list-style: lower-alpha; } .sn-prose .wp-block-list.is-style-sn-checklist, .sn-prose ul.sn-checklist { list-style: none; padding-left: 0; } .sn-prose .is-style-sn-checklist > li, .sn-prose ul.sn-checklist > li { position: relative; padding-left: 1.8em; } .sn-prose .is-style-sn-checklist > li::before, .sn-prose ul.sn-checklist > li::before { content: ""; position: absolute; left: .35em; top: .38em; width: .45em; height: .8em; border-right: 2.5px solid var(--sn-ok); border-bottom: 2.5px solid var(--sn-ok); transform: rotate(45deg); } .sn-prose dl { margin: 0 0 var(--sn-prose-space); } .sn-prose dt { font-weight: 700; color: var(--sn-heading); } .sn-prose dd { margin: 0 0 .75em 1.25em; } /* Dropcap (option: single_dropcap) */ .sn-prose--dropcap > p:first-of-type::first-letter { float: left; font-family: var(--sn-font-heading); font-size: 3.7em; line-height: .78; font-weight: 800; color: var(--sn-primary); padding: .1em .12em 0 0; margin-bottom: -.05em; } .sn-prose--dropcap > p:first-of-type::first-line { text-transform: none; } /* -------------------------------------------------------------------------- 2. Quotes -------------------------------------------------------------------------- */ .sn-prose blockquote, .sn-prose .wp-block-quote { margin: calc(var(--sn-prose-space) * 1.4) 0; padding: .35em 0 .35em 1.4em; border-left: 4px solid var(--sn-primary); font-size: 1.08em; line-height: 1.55; color: var(--sn-heading); } .sn-prose blockquote p { margin-bottom: .75em; } .sn-prose blockquote p:last-of-type { margin-bottom: 0; } .sn-prose blockquote cite, .sn-prose .wp-block-quote cite, .sn-prose .wp-block-quote .wp-block-quote__citation { display: block; margin-top: .7em; font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); font-style: normal; font-weight: 500; color: var(--sn-text-muted); } .sn-prose blockquote cite::before, .sn-prose .wp-block-quote__citation::before { content: "— "; } .sn-prose .wp-block-quote.is-style-plain { border: 0; padding-left: 0; font-style: italic; } .sn-prose .wp-block-quote.is-style-large, .sn-prose .wp-block-quote.is-large { border: 0; padding: 0; font-size: 1.35em; font-family: var(--sn-font-heading); line-height: 1.4; } .sn-prose .wp-block-quote.has-text-align-center { border: 0; padding: 0; text-align: center; } .sn-prose .wp-block-quote.has-text-align-right { border-left: 0; border-right: 4px solid var(--sn-primary); padding: .35em 1.4em .35em 0; text-align: right; } /* Block style: accent pull quote (register_block_style sn-pullquote-accent) */ .sn-prose .wp-block-quote.is-style-sn-pullquote-accent { border: 0; padding: 1.4em 1.6em; background: var(--sn-primary-soft); border-radius: var(--sn-radius-lg); font-family: var(--sn-font-heading); font-size: 1.25em; line-height: 1.4; position: relative; } .sn-prose .wp-block-quote.is-style-sn-pullquote-accent::before { content: "“"; position: absolute; top: -.15em; left: .35em; font-size: 3.5em; line-height: 1; color: var(--sn-primary); opacity: .3; font-family: Georgia, serif; } /* Pull quote */ .sn-prose .wp-block-pullquote { margin: calc(var(--sn-prose-space) * 1.8) 0; padding: 1.6em 0; border-top: 4px solid var(--sn-primary); border-bottom: 4px solid var(--sn-primary); text-align: center; position: relative; } .sn-prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; font-size: inherit; color: inherit; } .sn-prose .wp-block-pullquote p { font-family: var(--sn-font-heading); font-size: var(--sn-fs-2xl); font-weight: 600; line-height: 1.3; letter-spacing: var(--sn-heading-ls); color: var(--sn-heading); margin: 0 0 .5em; text-wrap: balance; } .sn-prose .wp-block-pullquote p::before { content: "“"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 2.6em; line-height: .6; color: var(--sn-primary); margin-bottom: .2em; } .sn-prose .wp-block-pullquote cite { display: block; font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--sn-text-muted); } .sn-prose .wp-block-pullquote.is-style-solid-color { border: 0; background: var(--sn-primary); color: var(--sn-on-primary); border-radius: var(--sn-radius-lg); padding: 2em 1.5em; } .sn-prose .wp-block-pullquote.is-style-solid-color p, .sn-prose .wp-block-pullquote.is-style-solid-color cite, .sn-prose .wp-block-pullquote.is-style-solid-color p::before { color: inherit; } .sn-prose .wp-block-pullquote.has-text-align-left { text-align: left; } .sn-prose .wp-block-pullquote.has-text-align-right { text-align: right; } @media (min-width: 768px) { .sn-prose .wp-block-pullquote.alignleft, .sn-prose .wp-block-pullquote.alignright { max-width: 46%; margin-top: .35em; margin-bottom: 1em; padding: 1em 0; } .sn-prose .wp-block-pullquote.alignleft { float: left; margin-right: var(--sn-space-8); text-align: left; } .sn-prose .wp-block-pullquote.alignright { float: right; margin-left: var(--sn-space-8); text-align: left; } .sn-prose .wp-block-pullquote.alignleft p, .sn-prose .wp-block-pullquote.alignright p { font-size: var(--sn-fs-xl); } } /* Big standalone quote (pattern) */ .sn-prose .sn-quote--big, .sn-quote--big { border: 0; padding: .5em 0 .25em; margin: calc(var(--sn-prose-space) * 1.6) auto; text-align: center; font-family: var(--sn-font-heading); font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); line-height: 1.35; font-weight: 600; color: var(--sn-heading); max-width: 32ch; } .sn-quote--big::before { content: "“"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 3em; line-height: .5; color: var(--sn-primary); opacity: .45; margin-bottom: .25em; } .sn-quote--big cite, .sn-quote--big footer { display: block; margin-top: .8em; font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); font-weight: 500; font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--sn-text-muted); } /* -------------------------------------------------------------------------- 3. Figures, images, galleries, media, embeds -------------------------------------------------------------------------- */ .sn-prose figure { margin: calc(var(--sn-prose-space) * 1.4) 0; } .sn-prose figure > a { display: block; } .sn-prose img { max-width: 100%; height: auto; display: block; border-radius: var(--sn-radius); } .sn-prose .wp-block-image img, .sn-prose .wp-block-media-text__media img, .sn-prose .wp-block-cover img { border-radius: var(--sn-radius); } .sn-prose .wp-block-image.is-style-rounded img, .sn-prose .wp-block-image.is-style-sn-rounded img { border-radius: var(--sn-radius-xl); } .sn-prose .wp-block-image.is-style-sn-shadow img { box-shadow: var(--sn-shadow-lg); } .sn-prose .wp-block-image.is-style-default img { border-radius: var(--sn-radius); } .sn-prose figcaption, .sn-prose .wp-element-caption, .sn-prose .wp-caption-text { font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); line-height: 1.5; color: var(--sn-text-muted); margin: .65em 0 0; text-align: left; } .sn-prose figcaption a { color: inherit; } .sn-prose .aligncenter { margin-left: auto; margin-right: auto; } .sn-prose .aligncenter img { margin-inline: auto; } .sn-prose .aligncenter figcaption { text-align: center; } .sn-prose .wp-block-image.aligncenter, .sn-prose .wp-block-image .aligncenter { display: table; } .sn-prose .wp-block-image.aligncenter > figcaption { display: table-caption; caption-side: bottom; } @media (min-width: 640px) { .sn-prose .alignleft, .sn-prose .wp-block-image .alignleft { float: left; margin: .35em var(--sn-space-8) var(--sn-space-4) 0; max-width: 50%; } .sn-prose .alignright, .sn-prose .wp-block-image .alignright { float: right; margin: .35em 0 var(--sn-space-4) var(--sn-space-8); max-width: 50%; } .sn-prose .wp-block-image.alignleft, .sn-prose .wp-block-image.alignright { display: table; } .sn-prose .wp-block-image.alignleft > figcaption, .sn-prose .wp-block-image.alignright > figcaption { display: table-caption; caption-side: bottom; } } @media (max-width: 639px) { .sn-prose .alignleft, .sn-prose .alignright, .sn-prose .wp-block-image .alignleft, .sn-prose .wp-block-image .alignright { float: none; margin-inline: 0; max-width: 100%; } .sn-prose .alignleft img, .sn-prose .alignright img { width: 100%; } } .sn-prose h2, .sn-prose h3, .sn-prose .wp-block-table, .sn-prose .wp-block-columns, .sn-prose .alignwide, .sn-prose .alignfull { clear: both; } .sn-prose .wp-block-image.alignfull img, .sn-prose .wp-block-cover.alignfull { border-radius: 0; } /* Legacy / core gallery */ .sn-prose .wp-block-gallery { gap: var(--sn-space-3); } .sn-prose .wp-block-gallery img, .sn-prose .wp-block-gallery .wp-block-image { border-radius: var(--sn-radius); } .sn-prose .wp-block-gallery .wp-block-image figcaption { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); } .sn-prose .gallery { display: grid; grid-template-columns: repeat(var(--sn-gallery-cols, 3), minmax(0, 1fr)); gap: var(--sn-space-3); margin: calc(var(--sn-prose-space) * 1.4) 0; } .sn-prose .gallery-columns-1 { --sn-gallery-cols: 1; } .sn-prose .gallery-columns-2 { --sn-gallery-cols: 2; } .sn-prose .gallery-columns-4 { --sn-gallery-cols: 4; } .sn-prose .gallery-columns-5 { --sn-gallery-cols: 5; } .sn-prose .gallery-columns-6 { --sn-gallery-cols: 6; } .sn-prose .gallery-item { margin: 0; } .sn-prose .gallery-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .sn-prose .gallery-caption { font-size: var(--sn-fs-xs); } @media (max-width: 639px) { .sn-prose .gallery { --sn-gallery-cols: 2 !important; } } /* Video / audio / file */ .sn-prose video, .sn-prose .wp-block-video video { width: 100%; height: auto; border-radius: var(--sn-radius); background: #000; } .sn-prose audio, .sn-prose .wp-block-audio audio { width: 100%; } .sn-prose .wp-block-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sn-space-3); padding: var(--sn-space-4) var(--sn-space-5); border: 1px solid var(--sn-border); border-radius: var(--sn-radius); background: var(--sn-surface); font-family: var(--sn-font-ui); } .sn-prose .wp-block-file .wp-block-file__button { margin-left: auto; background: var(--sn-button-bg); color: var(--sn-button-text); padding: .5em 1em; border-radius: var(--sn-radius); font-size: var(--sn-fs-sm); text-decoration: none; } /* Embeds — responsive (core handles .wp-has-aspect-ratio; fallbacks here) */ .sn-prose .wp-block-embed { margin: calc(var(--sn-prose-space) * 1.4) 0; } .sn-prose .wp-block-embed__wrapper { position: relative; } .sn-prose .wp-block-embed iframe, .sn-prose .wp-block-embed video { max-width: 100%; border-radius: var(--sn-radius); } .sn-prose .wp-block-embed.is-type-video:not(.wp-has-aspect-ratio) iframe, .sn-prose > iframe[src*="youtube"], .sn-prose > iframe[src*="youtu.be"], .sn-prose > iframe[src*="vimeo"], .sn-prose > iframe[src*="dailymotion"], .sn-prose > p > iframe[src*="youtube"], .sn-prose > p > iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; } .sn-embed { position: relative; width: 100%; aspect-ratio: var(--sn-embed-ratio, 16 / 9); margin: calc(var(--sn-prose-space) * 1.4) 0; border-radius: var(--sn-radius); overflow: hidden; background: var(--sn-surface-2); } .sn-embed > iframe, .sn-embed > embed, .sn-embed > object { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .sn-prose .wp-block-embed figcaption { margin-top: .65em; } .sn-prose .wp-block-embed.is-provider-twitter .wp-block-embed__wrapper, .sn-prose .wp-block-embed.is-provider-instagram .wp-block-embed__wrapper { display: flex; justify-content: center; } /* -------------------------------------------------------------------------- 4. Tables -------------------------------------------------------------------------- */ .sn-prose table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.5; border: 0; } .sn-prose th, .sn-prose td { padding: .65em .85em; border-bottom: 1px solid var(--sn-border); text-align: left; vertical-align: top; } .sn-prose thead th { font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); font-weight: 700; text-transform: var(--sn-label-tt); letter-spacing: .04em; color: var(--sn-heading); border-bottom: 2px solid var(--sn-border-strong); background: var(--sn-surface-2); } .sn-prose tbody th { font-weight: 600; color: var(--sn-heading); } .sn-prose tfoot td, .sn-prose tfoot th { border-top: 2px solid var(--sn-border-strong); border-bottom: 0; font-weight: 600; } .sn-prose .wp-block-table, .sn-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: calc(var(--sn-prose-space) * 1.4) 0; max-width: 100%; scrollbar-width: thin; } .sn-prose .wp-block-table table { margin: 0; } .sn-prose .wp-block-table.is-style-stripes, .sn-prose .wp-block-table.is-style-sn-striped { border-bottom: 0; } .sn-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd), .sn-prose .wp-block-table.is-style-sn-striped tbody tr:nth-child(odd), .sn-prose table.sn-table--striped tbody tr:nth-child(odd) { background: var(--sn-surface-2); } .sn-prose .wp-block-table.is-style-stripes td, .sn-prose .wp-block-table.is-style-stripes th, .sn-prose .wp-block-table.is-style-sn-striped td, .sn-prose .wp-block-table.is-style-sn-striped th { border-color: transparent; } .sn-prose .wp-block-table.is-style-stripes thead th { border-bottom-color: var(--sn-border-strong); } .sn-prose .wp-block-table figcaption { margin-top: .65em; } .sn-prose .wp-block-table.has-fixed-layout table { table-layout: fixed; } .sn-prose table.has-background th, .sn-prose table.has-background td { border-color: color-mix(in srgb, currentColor 18%, transparent); } .sn-prose .wp-block-table .has-text-align-center { text-align: center; } .sn-prose .wp-block-table .has-text-align-right { text-align: right; } /* -------------------------------------------------------------------------- 5. Code & preformatted -------------------------------------------------------------------------- */ .sn-prose code, .sn-prose kbd, .sn-prose samp { font-family: var(--sn-font-mono); font-size: .875em; } .sn-prose :not(pre) > code { background: var(--sn-surface-2); border: 1px solid var(--sn-border); padding: .12em .4em; border-radius: var(--sn-radius-sm); color: var(--sn-heading); overflow-wrap: anywhere; } .sn-prose pre, .sn-prose .wp-block-code, .sn-prose .wp-block-preformatted, .sn-prose .wp-block-verse { position: relative; background: var(--sn-surface-2); border: 1px solid var(--sn-border); border-radius: var(--sn-radius); padding: 1.1em 1.3em; overflow-x: auto; font-family: var(--sn-font-mono); font-size: .875em; line-height: 1.65; tab-size: 2; white-space: pre; color: var(--sn-text); scrollbar-width: thin; margin: 0 0 var(--sn-prose-space); } .sn-prose .wp-block-code code { display: block; background: none; border: 0; padding: 0; font-size: inherit; color: inherit; white-space: pre; } .sn-prose .wp-block-preformatted, .sn-prose .wp-block-verse { white-space: pre-wrap; font-family: var(--sn-font-mono); } .sn-prose .wp-block-verse { font-family: var(--sn-font-body); font-style: italic; background: transparent; border: 0; border-left: 3px solid var(--sn-border-strong); border-radius: 0; padding: .25em 0 .25em 1.25em; } .sn-code-copy { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; gap: .35em; padding: .3em .6em; border-radius: var(--sn-radius-sm); border: 1px solid var(--sn-border-strong); background: var(--sn-surface); color: var(--sn-text-muted); font-family: var(--sn-font-ui); font-size: var(--sn-fs-xs); font-weight: 600; line-height: 1; opacity: 0; transition: opacity var(--sn-dur), color var(--sn-dur), border-color var(--sn-dur); } .sn-prose pre:hover .sn-code-copy, .sn-prose pre:focus-within .sn-code-copy, .sn-code-copy:focus-visible, .sn-code-copy.is-copied { opacity: 1; } .sn-code-copy:hover { color: var(--sn-primary); border-color: var(--sn-primary); } .sn-code-copy.is-copied { color: var(--sn-ok); border-color: var(--sn-ok); } @media (hover: none) { .sn-code-copy { opacity: 1; } } /* -------------------------------------------------------------------------- 6. Buttons, columns, cover, group, media-text, details -------------------------------------------------------------------------- */ .sn-prose .wp-block-buttons { gap: var(--sn-space-3); margin: calc(var(--sn-prose-space) * 1.2) 0; } .sn-prose .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .7em 1.4em; border-radius: var(--sn-radius); border: 2px solid transparent; background: var(--sn-button-bg); color: var(--sn-button-text); font-family: var(--sn-font-ui); font-size: var(--sn-fs-md); font-weight: 600; line-height: 1.2; text-decoration: none; transition: background var(--sn-dur), color var(--sn-dur), border-color var(--sn-dur), transform var(--sn-dur); } .sn-prose .wp-block-button__link:hover { background: var(--sn-button-hover); color: var(--sn-button-text); transform: translateY(-1px); } .sn-prose .wp-block-button.is-style-outline .wp-block-button__link, .sn-prose .wp-block-button.is-style-sn-outline .wp-block-button__link { background: transparent; border-color: currentColor; color: var(--sn-primary); } .sn-prose .wp-block-button.is-style-outline .wp-block-button__link:hover, .sn-prose .wp-block-button.is-style-sn-outline .wp-block-button__link:hover { background: var(--sn-primary); border-color: var(--sn-primary); color: var(--sn-on-primary); } .sn-prose .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) { color: var(--sn-primary); } .sn-prose .wp-block-button__link.has-background:hover { filter: brightness(.92); } .sn-prose .wp-block-button.is-style-squared .wp-block-button__link { border-radius: 0; } .sn-prose .wp-block-button.is-style-rounded .wp-block-button__link, .sn-prose .wp-block-button.is-style-pill .wp-block-button__link { border-radius: var(--sn-radius-full); } .sn-prose .wp-block-columns { gap: var(--sn-space-6); margin: calc(var(--sn-prose-space) * 1.2) 0; } .sn-prose .wp-block-column > :first-child { margin-top: 0; } .sn-prose .wp-block-column > :last-child { margin-bottom: 0; } @media (max-width: 781px) { .sn-prose .wp-block-columns:not(.is-not-stacked-on-mobile) { gap: var(--sn-space-5); } } .sn-prose .wp-block-cover, .sn-prose .wp-block-cover-image { margin: calc(var(--sn-prose-space) * 1.4) 0; border-radius: var(--sn-radius-lg); overflow: hidden; min-height: 320px; } .sn-prose .wp-block-cover .wp-block-cover__inner-container { max-width: 70ch; } .sn-prose .wp-block-cover :is(h1, h2, h3, h4, p) { color: inherit; margin-top: 0; } .sn-prose .wp-block-cover a { color: inherit; } .sn-prose .wp-block-group.has-background { padding: var(--sn-space-6); border-radius: var(--sn-radius-lg); } .sn-prose .wp-block-group.has-background > :first-child { margin-top: 0; } .sn-prose .wp-block-group.has-background > :last-child { margin-bottom: 0; } .sn-prose .wp-block-group.is-style-sn-box, .sn-prose .wp-block-group.sn-box { padding: var(--sn-space-5) var(--sn-space-6); border-radius: var(--sn-radius-lg); background: var(--sn-surface-2); border: 1px solid var(--sn-border); } .sn-prose .wp-block-group.is-style-sn-box > :last-child { margin-bottom: 0; } .sn-prose .wp-block-media-text { margin: calc(var(--sn-prose-space) * 1.4) 0; border-radius: var(--sn-radius-lg); overflow: hidden; } .sn-prose .wp-block-media-text.has-background .wp-block-media-text__content { padding: var(--sn-space-6); } .sn-prose .wp-block-media-text .wp-block-media-text__content > :last-child { margin-bottom: 0; } /* Details / summary (core block + FAQ pattern) */ .sn-prose details, .sn-prose .wp-block-details { margin: 0 0 var(--sn-space-3); padding: 0 var(--sn-space-5); border: 1px solid var(--sn-border); border-radius: var(--sn-radius); background: var(--sn-surface); transition: border-color var(--sn-dur), box-shadow var(--sn-dur); } .sn-prose details[open] { border-color: color-mix(in srgb, var(--sn-primary) 40%, var(--sn-border)); box-shadow: var(--sn-shadow-sm); } .sn-prose summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-4); padding: .9em 0; margin: 0; cursor: pointer; font-family: var(--sn-font-ui); font-weight: 700; font-size: 1em; color: var(--sn-heading); list-style: none; user-select: none; } .sn-prose summary::-webkit-details-marker { display: none; } .sn-prose summary::marker { content: ""; } .sn-prose summary::after { content: ""; flex: 0 0 auto; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--sn-primary-soft); position: relative; transition: transform var(--sn-dur) var(--sn-ease), background var(--sn-dur); /* plus sign */ background-image: linear-gradient(var(--sn-primary), var(--sn-primary)), linear-gradient(var(--sn-primary), var(--sn-primary)); background-size: 50% 2px, 2px 50%; background-position: center; background-repeat: no-repeat; } .sn-prose details[open] > summary::after { transform: rotate(45deg); } .sn-prose details[open] > summary { border-bottom: 1px solid var(--sn-border); } .sn-prose summary:hover { color: var(--sn-primary); } .sn-prose summary:focus-visible { outline-offset: -2px; border-radius: var(--sn-radius); } .sn-prose details > *:not(summary) { font-size: .96em; } .sn-prose details > :nth-child(2) { padding-top: .9em; } .sn-prose details > :last-child:not(summary) { padding-bottom: .2em; margin-bottom: .9em; } .sn-prose .wp-block-details > *:not(summary) { margin-left: 0; margin-right: 0; } /* -------------------------------------------------------------------------- 7. Editorial boxes & patterns (.sn-box in main.css; extra spacing in prose) -------------------------------------------------------------------------- */ .sn-prose .sn-box { margin: calc(var(--sn-prose-space) * 1.2) 0; font-size: .96em; } .sn-prose .sn-box > :last-child, .sn-prose .sn-box p:last-child { margin-bottom: 0; } .sn-prose .sn-box ul, .sn-prose .sn-box ol { margin: 0; padding-left: 1.25em; } .sn-prose .sn-box li { margin-bottom: .35em; } .sn-prose .sn-box__title { margin-top: 0; } .sn-prose .sn-box--tldr p { font-size: 1.02em; color: var(--sn-heading); } .sn-prose .sn-box--sources ol { padding-left: 1.35em; } .sn-prose .sn-box--sources a { overflow-wrap: anywhere; } /* Source line ("Source: Reuters") under figures/tables/quotes */ .sn-source, .sn-prose .sn-source { display: block; font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); color: var(--sn-text-muted); margin: -.6em 0 var(--sn-prose-space); } .sn-prose figure + .sn-source, .sn-prose .wp-block-table + .sn-source { margin-top: calc(var(--sn-prose-space) * -1 + .4em); } .sn-source a { color: inherit; } /* FAQ */ .sn-faq { margin: calc(var(--sn-prose-space) * 1.4) 0; } .sn-faq__item { margin: 0 0 var(--sn-space-3); padding: 0 var(--sn-space-5); border: 1px solid var(--sn-border); border-radius: var(--sn-radius); background: var(--sn-surface); } .sn-faq__item[open] { border-color: color-mix(in srgb, var(--sn-primary) 40%, var(--sn-border)); box-shadow: var(--sn-shadow-sm); } .sn-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--sn-space-4); padding: .9em 0; cursor: pointer; font-family: var(--sn-font-ui); font-weight: 700; color: var(--sn-heading); list-style: none; } .sn-faq__q::-webkit-details-marker { display: none; } .sn-faq__q::marker { content: ""; } .sn-faq__q::after { content: ""; flex: 0 0 auto; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--sn-primary-soft); background-image: linear-gradient(var(--sn-primary), var(--sn-primary)), linear-gradient(var(--sn-primary), var(--sn-primary)); background-size: 50% 2px, 2px 50%; background-position: center; background-repeat: no-repeat; transition: transform var(--sn-dur) var(--sn-ease); } .sn-faq__item[open] > .sn-faq__q::after { transform: rotate(45deg); } .sn-faq__item[open] > .sn-faq__q { border-bottom: 1px solid var(--sn-border); } .sn-faq__q:hover { color: var(--sn-primary); } .sn-faq__a { padding: .9em 0 1em; font-size: .96em; } .sn-faq__a > :last-child { margin-bottom: 0; } .sn-faq__a p { margin-bottom: .75em; } /* Timeline */ .sn-timeline { position: relative; list-style: none; margin: calc(var(--sn-prose-space) * 1.4) 0; padding: 0 0 0 2.25rem; } .sn-timeline::before { content: ""; position: absolute; left: .55rem; top: .5em; bottom: .5em; width: 2px; background: linear-gradient(to bottom, var(--sn-primary), var(--sn-border)); border-radius: 2px; } .sn-timeline__item { position: relative; margin: 0; padding: 0 0 var(--sn-space-6); } .sn-timeline__item:last-child { padding-bottom: 0; } .sn-timeline__item::before { content: ""; position: absolute; left: calc(-2.25rem + .15rem); top: .35em; width: .85rem; height: .85rem; border-radius: 50%; background: var(--sn-primary); box-shadow: 0 0 0 4px var(--sn-bg), 0 0 0 5px color-mix(in srgb, var(--sn-primary) 30%, transparent); } .sn-timeline__date { display: inline-block; font-family: var(--sn-font-ui); font-size: var(--sn-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-primary); margin-bottom: .25em; } .sn-timeline__title { display: block; font-family: var(--sn-font-heading); font-weight: 700; font-size: 1.08em; line-height: 1.35; color: var(--sn-heading); margin: 0 0 .3em; } .sn-timeline__text { margin: 0; color: var(--sn-text); font-size: .96em; } .sn-timeline__text > :last-child { margin-bottom: 0; } /* Pros & cons */ .sn-pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sn-space-5); margin: calc(var(--sn-prose-space) * 1.4) 0; } @media (max-width: 639px) { .sn-pros-cons { grid-template-columns: 1fr; } } .sn-pros-cons__col { position: relative; padding: var(--sn-space-5) var(--sn-space-5) var(--sn-space-4); border: 1px solid var(--sn-border); border-top-width: 4px; border-radius: var(--sn-radius-lg); background: var(--sn-surface); font-size: .96em; } .sn-pros-cons__col--pros { border-top-color: var(--sn-ok); background: color-mix(in srgb, var(--sn-ok) 6%, var(--sn-surface)); } .sn-pros-cons__col--cons { border-top-color: var(--sn-bad); background: color-mix(in srgb, var(--sn-bad) 6%, var(--sn-surface)); } .sn-pros-cons__title, .sn-pros-cons__col > :is(h2, h3, h4, h5, p strong):first-child, .sn-pros-cons__col > p:first-child > strong:only-child { display: block; font-family: var(--sn-font-ui); font-size: var(--sn-fs-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .8em; } .sn-pros-cons__col--pros .sn-pros-cons__title, .sn-pros-cons__col--pros > :is(h2, h3, h4, h5):first-child, .sn-pros-cons__col--pros > p:first-child > strong { color: var(--sn-ok); } .sn-pros-cons__col--cons .sn-pros-cons__title, .sn-pros-cons__col--cons > :is(h2, h3, h4, h5):first-child, .sn-pros-cons__col--cons > p:first-child > strong { color: var(--sn-bad); } .sn-pros-cons__col ul, .sn-pros-cons__col ol { list-style: none; padding: 0; margin: 0; } .sn-pros-cons__col li { position: relative; padding-left: 1.6em; margin: 0 0 .45em; } .sn-pros-cons__col li::before { position: absolute; left: 0; top: 0; font-weight: 800; line-height: inherit; } .sn-pros-cons__col--pros li::before { content: "✓"; color: var(--sn-ok); } .sn-pros-cons__col--cons li::before { content: "✕"; color: var(--sn-bad); } .sn-pros-cons__col > :last-child { margin-bottom: 0; } /* Expert opinion */ .sn-expert { display: flex; flex-direction: column; gap: var(--sn-space-4); margin: calc(var(--sn-prose-space) * 1.4) 0; padding: var(--sn-space-6); border-radius: var(--sn-radius-lg); background: var(--sn-surface-2); border: 1px solid var(--sn-border); border-left: 4px solid var(--sn-accent); position: relative; } .sn-expert::before { content: "“"; position: absolute; top: .1em; right: .35em; font-family: Georgia, "Times New Roman", serif; font-size: 5em; line-height: 1; color: var(--sn-accent); opacity: .18; pointer-events: none; } .sn-expert__quote { margin: 0; font-family: var(--sn-font-heading); font-size: 1.12em; line-height: 1.5; color: var(--sn-heading); font-style: italic; border: 0; padding: 0; position: relative; } .sn-expert__quote > :last-child { margin-bottom: 0; } .sn-expert__author { display: flex; align-items: center; gap: var(--sn-space-3); font-family: var(--sn-font-ui); } .sn-expert__avatar, .sn-expert__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; margin: 0; } .sn-expert__name { display: block; font-weight: 700; color: var(--sn-heading); line-height: 1.3; } .sn-expert__role { display: block; font-size: var(--sn-fs-sm); color: var(--sn-text-muted); line-height: 1.3; } .sn-expert__name a { text-decoration: none; } /* Footnotes (core block + generic) */ .sn-prose .wp-block-footnotes, .sn-prose .sn-footnotes { margin-top: calc(var(--sn-prose-space) * 2); padding-top: var(--sn-space-5); border-top: 1px solid var(--sn-border); font-size: .85em; color: var(--sn-text-muted); } .sn-prose .wp-block-footnotes li, .sn-prose .sn-footnotes li { margin-bottom: .5em; } .sn-prose .wp-block-footnotes li:target, .sn-prose .sn-footnotes li:target { background: color-mix(in srgb, var(--sn-accent) 20%, transparent); border-radius: var(--sn-radius-sm); } .sn-prose sup.fn a, .sn-prose a.fn { text-decoration: none; font-weight: 600; padding: 0 .1em; } /* Paginated posts (wp_link_pages) */ .sn-page-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: calc(var(--sn-prose-space) * 1.6) 0 0; padding-top: var(--sn-space-5); border-top: 1px solid var(--sn-border); font-family: var(--sn-font-ui); clear: both; } .sn-page-links__label { font-size: var(--sn-fs-sm); font-weight: 700; color: var(--sn-text-muted); margin-right: .25rem; text-transform: var(--sn-label-tt); letter-spacing: .04em; } .sn-page-links .post-page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 .6em; border: 1px solid var(--sn-border); border-radius: var(--sn-radius); color: var(--sn-text); font-weight: 600; font-size: var(--sn-fs-sm); text-decoration: none; transition: border-color var(--sn-dur), color var(--sn-dur), background var(--sn-dur); } .sn-page-links a.post-page-numbers:hover { border-color: var(--sn-primary); color: var(--sn-primary); } .sn-page-links .post-page-numbers.current { background: var(--sn-primary); border-color: var(--sn-primary); color: var(--sn-on-primary); } /* Password form */ .sn-password-form { padding: var(--sn-space-6); border: 1px solid var(--sn-border); border-radius: var(--sn-radius-lg); background: var(--sn-surface-2); margin: var(--sn-space-6) 0; } .sn-password-form label { display: block; font-family: var(--sn-font-ui); font-weight: 600; font-size: var(--sn-fs-sm); margin-bottom: .5em; } .sn-password-form input[type="password"] { padding: .6em .8em; border: 1px solid var(--sn-border-strong); border-radius: var(--sn-radius); background: var(--sn-surface); color: var(--sn-text); min-width: 220px; margin-right: .5rem; } .sn-password-form input[type="submit"] { padding: .65em 1.2em; border: 0; border-radius: var(--sn-radius); background: var(--sn-button-bg); color: var(--sn-button-text); font-weight: 600; cursor: pointer; } /* More block, "read more" anchor */ .sn-prose .more-link { font-family: var(--sn-font-ui); font-weight: 600; } /* -------------------------------------------------------------------------- 8. Dark mode nuances (tokens already switch; only what needs a tweak) -------------------------------------------------------------------------- */ :root[data-theme="dark"] .sn-prose { --sn-ok: #4ade80; --sn-bad: #f87171; } :root[data-theme="dark"] .sn-prose img:not(.sn-thumb__img--placeholder) { filter: brightness(.93); } :root[data-theme="dark"] .sn-prose mark { background: color-mix(in srgb, var(--sn-accent) 45%, transparent); color: var(--sn-heading); } :root[data-theme="dark"] .sn-prose .wp-block-pullquote.is-style-solid-color { background: var(--sn-primary-soft); color: var(--sn-heading); } :root[data-theme="dark"] .sn-prose .wp-block-button__link:not(.has-background) { color: var(--sn-button-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sn-prose { --sn-ok: #4ade80; --sn-bad: #f87171; } :root:not([data-theme="light"]) .sn-prose img:not(.sn-thumb__img--placeholder) { filter: brightness(.93); } :root:not([data-theme="light"]) .sn-prose mark { background: color-mix(in srgb, var(--sn-accent) 45%, transparent); color: var(--sn-heading); } :root:not([data-theme="light"]) .sn-prose .wp-block-pullquote.is-style-solid-color { background: var(--sn-primary-soft); color: var(--sn-heading); } } /* -------------------------------------------------------------------------- 9. Reduced motion & print -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sn-prose summary::after, .sn-faq__q::after, .sn-code-copy, .sn-prose .wp-block-button__link { transition: none; } .sn-prose .wp-block-button__link:hover { transform: none; } } @media print { .sn-prose { font-size: 11pt; line-height: 1.55; color: #000; max-width: none; } .sn-prose a { color: #000; text-decoration: underline; } .sn-prose a[href^="http"]:not([href*="{{host}}"])::after { content: " (" attr(href) ")"; font-size: 85%; color: #444; word-break: break-all; } .sn-prose pre, .sn-prose .wp-block-code { white-space: pre-wrap; border: 1px solid #999; background: #fff; } .sn-prose img { max-width: 80%; break-inside: avoid; filter: none; } .sn-prose figure, .sn-prose table, .sn-prose blockquote, .sn-prose .sn-box, .sn-prose .sn-pros-cons, .sn-prose .sn-expert, .sn-prose details { break-inside: avoid; } .sn-prose h2, .sn-prose h3, .sn-prose h4 { break-after: avoid; } .sn-prose .wp-block-embed, .sn-embed, .sn-prose iframe, .sn-code-copy, .sn-page-links { display: none !important; } .sn-prose summary::after, .sn-faq__q::after { display: none; } .sn-prose .wp-block-button__link { border: 1px solid #000; color: #000; background: none; } .sn-prose .sn-box, .sn-faq__item, .sn-pros-cons__col, .sn-expert { border: 1px solid #999; background: none; } }