/**
* Blog post page (templates/single.html): os/blog-post-hero, os/blog-post-body with
* os/blog-sidebar, os/blog-post-author and os/blog-related. Loads where a block with an
* "os-post-" class renders (os_interactive_styles), after os-blog.css (author line, cards).
* Values from Figma (Qwality Kiosk): hero 11:18383, body 37:18689, author 50:785,
* related 37:18993. Each section keeps its own responsive rules.
*/
/* Section spacing on the post page is 40% tighter than Figma (user, 2026-10-03): hero 64 → 38,
body and author 80 → 48, related 100 → 60; on phones the site's 40px section spacing → 24. */
/* ---------- Hero (os/blog-post-hero) ---------- */
.os-post-hero {
padding-top: 38px;
padding-bottom: 38px;
border-bottom: 1px solid var(--wp--preset--color--line);
background: var(--wp--preset--color--white);
}
.os-post-hero > * { margin-block: 0; }
.os-post-hero > .os-post-hero__head { margin-top: 48px; }
.os-post-hero__head > * { margin: 0; }
/* Date / read time (Figma "Eyebrow M", text-tertiary). */
.os-post-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
line-height: 1.5;
letter-spacing: 1.15px;
text-transform: uppercase;
color: var(--wp--custom--color--tertiary);
}
.os-post-meta > * { margin: 0; }
.os-post-meta > .os-read-time::before { content: "/"; margin: 0 0.7em; }
.os-post-hero__head > .os-post-hero__title { margin-top: 8px; }
.os-post-hero__head > .os-post-hero__byline {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
margin-top: 32px;
}
.os-post-hero__byline > * { margin: 0; }
.os-post-hero__byline .os-author { color: var(--wp--preset--color--ink); }
.os-post-hero__actions {
display: flex;
align-items: center;
gap: 8px;
}
.os-post-hero__actions > * { margin: 0; }
/* Tags (post tags; also in the row under the post). */
.os-post-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.os-post-tags .wp-block-post-terms__separator { display: none; }
.os-post-tags a {
padding: 7px 14px;
border-radius: var(--wp--preset--border-radius--xs);
background: var(--wp--custom--color--tag);
font-size: 12.5px;
font-weight: 600;
line-height: normal;
color: var(--wp--preset--color--ink);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease);
}
.os-post-tags a:hover { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--white); }
.os-post-tags a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
/* Share icon (Figma share-android, 24px): opens the device share sheet where there is one
(os-post.js), otherwise jumps to the share links under the post. */
.os-post-hero__share .wp-block-button__link {
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin: -4px -4px -4px 4px;
padding: 0;
background: none;
font-size: 0;
color: var(--wp--custom--color--icon);
}
.os-post-hero__share .wp-block-button__link::after { display: none; }
.os-post-hero__share .wp-block-button__link::before {
content: "";
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("../images/ui/share.svg") center / 24px no-repeat;
mask: url("../images/ui/share.svg") center / 24px no-repeat;
transition: transform var(--os-base) var(--os-ease);
}
.os-post-hero__share .wp-block-button__link:hover { color: var(--wp--preset--color--brand); }
.os-post-hero__share .wp-block-button__link:hover::before { transform: scale(1.1); }
.os-post-hero__share .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 0; border-radius: 4px; }
@media (max-width: 880px) {
.os-post-hero__title { font-size: var(--wp--preset--font-size--title); }
}
@media (max-width: 768px) {
.os-post-hero { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
.os-post-hero > .os-post-hero__head { margin-top: 32px; }
.os-post-meta { font-size: var(--wp--preset--font-size--x-small); }
.os-post-hero__head > .os-post-hero__byline { margin-top: 24px; }
}
@media (max-width: 540px) {
.os-post-hero__title { font-size: var(--wp--preset--font-size--xx-large); }
}
/* ---------- Body (os/blog-post-body): article + sidebar ---------- */
.os-post-body {
padding-top: 48px;
padding-bottom: 48px;
background: var(--wp--preset--color--white);
}
.os-post-body > * { margin-block: 0; }
.os-post-body__grid {
display: grid;
grid-template-columns: minmax(0, 870px) 337px;
justify-content: space-between;
align-items: start;
gap: 64px;
}
.os-post-body__grid > * { margin: 0; }
.os-post-body__main > * { margin-block: 0; }
.os-post-body__image {
aspect-ratio: 870 / 602;
overflow: hidden;
border-radius: 8px;
background: var(--wp--preset--color--surface);
}
.os-post-body__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* OS Post without Featured Image: an Image block first in the content is the lead image,
moved above the table of contents (os_post_lead_mark). Its own size and shape, as wide as the
article at most, centred, with the featured image's corners. */
.os-post-lead img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: 8px; }
/* Table of contents (os_post_toc_*): not in Figma; designed from the system (user,
2026-10-03). Light brand surface with faint teal / violet glows (the home section washes),
a techniqk gradient hairline on top, numbered sections in two columns. On hover the number
ring fills with the brand gradient and the title turns brand and nudges right.
Placement (user, 2026-10-06): in the sidebar on desktop, above the article below 1100px
(.os-post-body__toc, see "Body: placement" below); its old place holds OS Key Facts. */
.os-post-body__toc:not(:has(.os-post-toc)) { display: none; }
.os-post-toc {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline;
gap: 0 24px;
overflow: hidden;
padding: 32px 32px 20px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--preset--border-radius--lg);
background:
radial-gradient(70% 140% at 100% 0%, rgb(20 199 180 / 0.08) 0, rgb(20 199 180 / 0) 60%),
radial-gradient(60% 120% at 0% 100%, rgb(108 92 231 / 0.07) 0, rgb(108 92 231 / 0) 60%),
var(--wp--custom--color--on-brand);
}
.os-post-toc::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: var(--wp--preset--gradient--techniqk);
}
.os-post-toc > * { margin: 0; }
.os-post-toc__label {
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
line-height: 1.5;
letter-spacing: 1.15px;
text-transform: uppercase;
color: var(--wp--preset--color--brand);
}
.os-post-toc__count {
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1.5;
color: var(--wp--custom--color--tertiary);
}
.os-post-toc__list {
grid-column: 1 / -1;
display: grid;
grid-template-rows: repeat(var(--os-toc-rows, 4), auto);
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
column-gap: 40px;
margin: 16px 0 0;
padding: 0;
list-style: none;
counter-reset: none;
}
.os-post-toc__list li { margin: 0; border-top: 1px solid rgb(0 80 158 / 0.1); }
.os-post-toc__list a {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
line-height: 1.45;
color: var(--wp--preset--color--ink);
text-decoration: none;
}
.os-post-toc__num {
position: relative;
flex-shrink: 0;
display: grid;
place-items: center;
width: 28px;
height: 28px;
margin-top: -2px;
border-radius: 50%;
background: var(--wp--preset--color--white);
box-shadow: inset 0 0 0 1px rgb(0 80 158 / 0.22);
font-family: var(--wp--preset--font-family--heading);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--wp--preset--color--brand);
transition: color var(--os-fast) var(--os-ease), box-shadow var(--os-base) var(--os-ease);
}
/* The gradient fill fades in (gradients can't transition; opacity can). */
.os-post-toc__num::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(135deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--electric) 100%);
opacity: 0;
transition: opacity var(--os-base) var(--os-ease);
}
.os-post-toc__num { z-index: 0; isolation: isolate; }
.os-post-toc__text {
transition: color var(--os-fast) var(--os-ease), transform var(--os-base) var(--os-ease);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.os-post-toc__list a:hover .os-post-toc__text,
.os-post-toc__list a:focus-visible .os-post-toc__text { color: var(--wp--preset--color--brand); transform: translateX(4px); }
.os-post-toc__list a:hover .os-post-toc__num,
.os-post-toc__list a:focus-visible .os-post-toc__num { color: var(--wp--preset--color--white); box-shadow: inset 0 0 0 1px transparent, 0 6px 14px rgb(23 72 232 / 0.25); }
.os-post-toc__list a:hover .os-post-toc__num::before,
.os-post-toc__list a:focus-visible .os-post-toc__num::before { opacity: 1; }
.os-post-toc__list a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; border-radius: 4px; }
/* The section being read (os-post.js). */
.os-post-toc__list a[aria-current] .os-post-toc__text { color: var(--wp--preset--color--brand); }
.os-post-toc__list a[aria-current] .os-post-toc__num { color: var(--wp--preset--color--white); box-shadow: inset 0 0 0 1px transparent; }
.os-post-toc__list a[aria-current] .os-post-toc__num::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.os-post-toc__list a:hover .os-post-toc__text,
.os-post-toc__list a:focus-visible .os-post-toc__text { transform: none; }
}
/* A section reached from the table of contents flashes its heading softly. */
@media (prefers-reduced-motion: no-preference) {
.os-post-content > h2:target { animation: os-toc-target 1.6s var(--os-ease); }
}
@keyframes os-toc-target {
0%, 30% { color: var(--wp--preset--color--brand); }
}
/* OS Key Facts (user, 2026-10-06; not in Figma, designed from the system like the table of
contents it replaced under the featured image): the same surface, glows and hairline, a
label in normal case (site rule) and the facts in two columns, each with the mega menu's
hover sparkle as its bullet (user, 2026-10-06: "instead of tick that star"). */
.os-post-content > .os-post-facts {
position: relative;
max-width: none;
overflow: hidden;
padding: 32px 32px 20px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--preset--border-radius--lg);
background:
radial-gradient(70% 140% at 100% 0%, rgb(20 199 180 / 0.08) 0, rgb(20 199 180 / 0) 60%),
radial-gradient(60% 120% at 0% 100%, rgb(108 92 231 / 0.07) 0, rgb(108 92 231 / 0) 60%),
var(--wp--custom--color--on-brand);
}
.os-post-facts::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
background: var(--wp--preset--gradient--techniqk);
}
.os-post-facts > * { margin: 0; }
.os-post-facts .os-post-facts__label {
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.2px;
color: var(--wp--preset--color--brand);
}
.os-post-facts .os-post-facts__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 40px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.os-post-facts .os-post-facts__list li {
position: relative;
margin: 0;
padding: 14px 0 14px 36px;
border-top: 1px solid rgb(0 80 158 / 0.1);
font-size: var(--wp--preset--font-size--medium);
font-weight: 500;
line-height: 1.5;
color: var(--wp--preset--color--ink);
}
/* Bullet: the sparkle that slides in beside mega menu links on hover (os-mega-menu.css), brand
colour, centred on the first line. */
.os-post-facts .os-post-facts__list li::before {
content: "";
position: absolute;
top: 12px;
left: 0;
width: 28px;
height: 28px;
background-color: var(--wp--preset--color--brand);
-webkit-mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
mask: url("../images/ui/sparkle.svg") center / contain no-repeat;
}
/* OS Post CTA: dark panel with a headline, a divider and a green button. */
.os-post-content > .os-post-cta { max-width: none; margin-top: 64px; }
.os-post-content > .os-post-cta + * { margin-top: 64px; }
.os-post-cta {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 48px;
overflow: hidden;
padding: 64px 48px;
border-radius: 8px;
background: var(--wp--preset--color--ink-deep);
color: var(--wp--preset--color--white);
}
.os-post-cta::before {
content: "";
position: absolute;
top: -71px;
right: -64px;
width: 460px;
height: 460px;
background: url("../images/post/cta-glow-1.svg") center / 100% 100% no-repeat;
pointer-events: none;
}
.os-post-cta > * { position: relative; margin: 0; }
.os-post-cta .os-post-cta__title {
max-width: 411px;
font-size: var(--wp--preset--font-size--title);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.5px;
color: var(--wp--preset--color--white);
}
.os-post-cta .os-post-cta__actions {
display: flex;
align-items: center;
align-self: stretch;
justify-content: center;
min-width: 190px;
padding-left: 48px;
}
.os-post-cta .os-post-cta__actions::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 90px;
transform: translateY(-50%);
background: linear-gradient(to bottom, rgb(255 255 255 / 0), rgb(255 255 255 / 0.2) 50%, rgb(255 255 255 / 0));
}
/* Where the table of contents was: 48px under the featured image, 64px before the first section. */
.os-post-body__main > .os-post-content:has(> .os-post-facts:first-child) { margin-top: 48px; }
.os-post-content > .os-post-facts + * { margin-top: 64px; }
/* Post content. Figma: text 842px wide; eyebrow → H2 (Home's head gap, user 2026-10-08; Figma
had 32) → 16 → text; paragraphs a blank
line apart (1.5em); 64px before each numbered section, 40px around H3s, images and tables. */
.os-post-body__main > .os-post-content { margin-top: 64px; }
.os-post-body__main > .os-post-content:first-child { margin-top: 0; }
.os-post-content {
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
line-height: 1.5;
color: var(--wp--preset--color--ink-deep);
}
.os-post-content > * { max-width: 842px; margin-block: 0; }
.os-post-content > :is(.wp-block-table, .alignwide, .alignfull) { max-width: none; }
.os-post-content > * + * { margin-top: 1.5em; }
.os-post-content > :first-child { margin-top: 0; }
/* H2 = the theme H2 as on Home, no line-height / letter-spacing override (user, 2026-10-08). */
.os-post-content > :is(h2, h3, h4, h5, h6) { color: var(--wp--preset--color--ink-deep); }
.os-post-content > :is(h3, h4, h5, h6) { letter-spacing: -0.5px; }
.os-post-content > h2 { margin-top: 64px; font-size: var(--wp--preset--font-size--section); }
.os-post-content > h3 { margin-top: 40px; font-size: var(--wp--preset--font-size--title); line-height: 1.4; }
.os-post-content > h4 { margin-top: 40px; font-size: var(--wp--preset--font-size--x-large); line-height: 1.4; }
.os-post-content > :is(h2, h3, h4, h5, h6) + * { margin-top: 16px; }
/* Section number ("01 — The thesis", OS Eyebrow as on Home since 2026-10-08; posts written with
OS Eyebrow Small get the same spacing) opens a section; its heading follows. */
.os-post-content > :is(.is-style-os-eyebrow, .is-style-os-eyebrow-sm) { margin-top: 64px; }
.os-post-content > :is(.is-style-os-eyebrow, .is-style-os-eyebrow-sm) + :is(h2, h3) { margin-top: var(--wp--custom--section-head-gap); }
.os-post-content > :is(h2, h3, h4) + :is(h2, h3, h4) { margin-top: 16px; }
.os-post-content > :where(figure, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-quote, .wp-block-pullquote),
.os-post-content > :where(figure, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-quote, .wp-block-pullquote) + * { margin-top: 40px; }
.os-post-content > :is(.is-style-os-eyebrow, .is-style-os-eyebrow-sm):first-child { margin-top: 0; }
.os-post-content a { color: var(--wp--preset--color--brand); text-underline-offset: 3px; }
.os-post-content a:hover { color: var(--wp--preset--color--brand-dark); }
.os-post-content strong { font-weight: 700; }
.os-post-content :is(ul, ol) { padding-left: 1.4em; }
.os-post-content li + li { margin-top: 0.5em; }
.os-post-content li::marker { color: var(--wp--preset--color--brand); }
.os-post-content img { display: block; max-width: 100%; height: auto; }
/* Images keep their own size, never stretched or cropped: as wide as the text column at most,
centred when narrower (user, 2026-10-03). Left/right alignment set in the editor still applies. */
.os-post-content > .wp-block-image:not(.alignleft, .alignright) img { margin-inline: auto; }
:is(.os-post-content, .os-post-lead) .wp-element-caption {
margin: 16px 0 0;
text-align: left;
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1.5;
color: var(--wp--custom--color--muted);
}
.os-post-content .wp-block-quote {
padding: 4px 0 4px 24px;
border-left: 3px solid var(--wp--preset--color--brand);
font-size: var(--wp--preset--font-size--x-large);
line-height: 1.4;
}
.os-post-content .wp-block-quote cite {
display: block;
margin-top: 12px;
font-size: var(--wp--preset--font-size--small);
font-style: normal;
color: var(--wp--custom--color--tertiary);
}
/* Tables (Figma 36:18556): brand header row with a hairline, open rows 32px apart. 3-column
tables use the Figma column widths. Stacked on phones (labels from os_table_labels). */
.os-post-content .wp-block-table { overflow-x: auto; }
.os-post-content .wp-block-table table {
width: 100%;
border-collapse: collapse;
font-size: inherit;
line-height: 1.5;
}
.os-post-content .wp-block-table :is(th, td) {
box-sizing: border-box;
padding: 0 24px 32px 0;
border: 0;
text-align: left;
vertical-align: top;
}
.os-post-content .wp-block-table :is(th, td):last-child { padding-right: 0; }
.os-post-content .wp-block-table tbody tr:last-child td { padding-bottom: 0; }
.os-post-content .wp-block-table thead { border-bottom: 1px solid var(--wp--preset--color--line); }
.os-post-content .wp-block-table thead th {
padding-bottom: 12px;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 1.15px;
text-transform: uppercase;
color: var(--wp--preset--color--brand);
}
.os-post-content .wp-block-table thead + tbody tr:first-child td { padding-top: 32px; }
.os-post-content .wp-block-table tr:has(> :nth-child(3)) > :first-child { width: 17.7%; }
.os-post-content .wp-block-table tr:has(> :nth-child(3)) > :nth-child(2) { width: 48.7%; padding-right: 62px; }
.os-post-content .wp-block-table tbody td :is(strong, b) { font-weight: 700; }
.os-post-content .wp-block-table .wp-element-caption { margin-top: 24px; }
/* Share and tag rows under the post (Figma 616:13438). */
.os-post-body__main > .os-post-share { margin-top: 48px; }
.os-post-share,
.os-post-tags-row {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.os-post-share { border-top: 1px solid var(--wp--preset--color--line); }
.os-post-share > *,
.os-post-tags-row > * { margin: 0; }
.os-post-tags-row:not(:has(.wp-block-post-terms a)) { display: none; }
.os-post-hero__actions:not(:has(.wp-block-post-terms a)) .os-post-tags { display: none; }
.os-post-share__label {
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1.5;
color: var(--wp--custom--color--tertiary);
}
.wp-block-social-links.os-post-share__links {
gap: 8px;
margin: 0;
font-size: 32px;
}
.os-post-share__links .wp-social-link { margin: 0; color: var(--wp--preset--color--ink); }
.os-post-share__links .wp-social-link a {
padding: 0;
border-radius: 4px;
transition: color var(--os-fast) var(--os-ease), transform var(--os-base) var(--os-ease);
}
.os-post-share__links .wp-social-link svg { width: 32px; height: 32px; }
.os-post-share__links .wp-social-link:hover { transform: none; }
.os-post-share__links .wp-social-link a:hover { color: var(--wp--preset--color--brand); transform: translateY(-2px); }
.os-post-share__links .wp-social-link a:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
/* Copy link: needs JavaScript, so it shows only once os-post.js has wired it up. */
.os-post-share__copy { display: none; margin: 0; padding-left: 24px; border-left: 1px solid var(--wp--custom--color--track); }
.os-post-share__copy.is-ready { display: flex; }
.os-post-share__copy .wp-block-button__link {
gap: 8px;
padding: 0;
background: none;
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1.5;
text-transform: none;
color: var(--wp--custom--color--tertiary);
cursor: pointer;
}
.os-post-share__copy .wp-block-button__link::after { display: none; }
.os-post-share__copy .wp-block-button__link::before {
content: "";
flex-shrink: 0;
width: 32px;
height: 32px;
background-color: var(--wp--custom--color--icon);
-webkit-mask: url("../images/ui/link.svg") center / 32px no-repeat;
mask: url("../images/ui/link.svg") center / 32px no-repeat;
transition: background-color var(--os-fast) var(--os-ease);
}
.os-post-share__copy .wp-block-button__link:hover { color: var(--wp--preset--color--brand); background-size: 0 1px; }
.os-post-share__copy .wp-block-button__link:hover::before,
.os-post-share__copy .is-copied::before { background-color: var(--wp--preset--color--brand); }
.os-post-share__copy .is-copied { color: var(--wp--preset--color--brand); }
.os-post-share__copy .wp-block-button__link:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; border-radius: 4px; }
/* Arriving from the hero's share icon: a brief brand glow on the share row. */
.os-post-share.is-highlighted { animation: os-share-glow 1.6s var(--os-ease); }
@keyframes os-share-glow {
0%, 40% { box-shadow: 0 0 0 6px rgb(0 80 158 / 0.12); background-color: rgb(0 80 158 / 0.04); }
100% { box-shadow: 0 0 0 6px rgb(0 80 158 / 0); background-color: transparent; }
}
/* Body: placement (user, 2026-10-06). The sidebar holds only the table of contents (the link
cards, os/blog-sidebar, were removed from the post page): on desktop it sticks below the
header for the whole article; below 1100px it opens the body, above the article. */
@media (min-width: 1101px) {
.os-post-body__grid > .os-post-body__main { grid-column: 1; }
.os-post-body__grid > .os-post-body__toc { grid-column: 2; grid-row: 1; align-self: stretch; }
.os-post-body__toc > .os-post-toc {
position: sticky;
top: calc(var(--os-header-offset) + 24px);
max-height: calc(100vh - var(--os-header-offset) - 48px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 24px 24px 8px;
scrollbar-width: thin;
}
.os-post-body__toc .os-post-toc__list { grid-template-rows: none; grid-auto-flow: row; margin-top: 12px; }
.os-post-body__toc .os-post-toc__list a { gap: 12px; padding: 12px 0; font-size: var(--wp--preset--font-size--small); }
.os-post-body__toc .os-post-toc__num { width: 26px; height: 26px; margin-top: -3px; font-size: 12px; }
/* No index (Show Index unticked, or under 2 sections): the article takes the whole width,
the sidebar column included (user, 2026-10-06), and its text is no longer capped at 842px. */
.os-post-body__grid:not(:has(> .os-post-body__toc .os-post-toc)) > .os-post-body__main { grid-column: 1 / -1; }
.os-post-body__grid:not(:has(> .os-post-body__toc .os-post-toc)) .os-post-content > * { max-width: none; }
}
/* Sidebar (os/blog-sidebar): link cards that stick beside the article on desktop. */
.os-post-aside {
position: sticky;
top: calc(var(--os-header-offset) + 24px);
display: flex;
flex-direction: column;
gap: 16px;
}
.os-post-aside > * { margin: 0; }
.os-post-aside__card {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
min-height: 186px;
padding: 31px 31px 28px;
border: 1px solid var(--wp--preset--color--line);
border-radius: var(--wp--preset--border-radius--lg);
background: var(--wp--preset--color--ice);
transition: transform var(--os-base) var(--os-ease), box-shadow var(--os-base) var(--os-ease), border-color var(--os-base) var(--os-ease);
}
.os-post-aside__card > * { margin: 0; }
.os-post-aside__title {
max-width: 267px;
font-size: var(--wp--preset--font-size--large);
font-weight: 700;
line-height: 1.4;
color: var(--wp--preset--color--ink);
}
/* The whole card is the Know more link's hit area. */
.os-post-aside__card .wp-block-button__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.os-post-aside__card:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 20px 44px rgb(23 72 232 / 0.12); }
.os-post-aside__card:hover .is-style-os-explore .wp-block-button__link { background-size: 100% 1px; }
.os-post-aside__card:has(:focus-visible) { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.os-post-aside__card .wp-block-button__link:focus-visible { outline: 0; }
@media (prefers-reduced-motion: reduce) {
.os-post-aside__card:hover,
.os-post-share__links .wp-social-link a:hover { transform: none; }
.os-post-share.is-highlighted { animation: none; }
}
/* Body: responsive. The sidebar moves under the article below 1100px: three cards side by
side on tablets, stacked on phones. */
@media (max-width: 1200px) {
.os-post-body__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
.os-post-aside__card { padding: 23px; }
.os-post-content .wp-block-table tr:has(> :nth-child(3)) > :nth-child(2) { padding-right: 32px; }
}
@media (max-width: 1100px) {
.os-post-body__grid { grid-template-columns: minmax(0, 1fr); gap: 64px; }
.os-post-aside { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The table of contents opens the body, above the article (the sidebar drops below it). */
.os-post-body__toc { order: -1; }
.os-post-content > * { max-width: none; }
}
@media (max-width: 768px) {
.os-post-content > .os-post-cta, .os-post-content > .os-post-cta + * { margin-top: 48px; }
.os-post-cta { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding: 40px 24px; }
.os-post-cta .os-post-cta__title { font-size: var(--wp--preset--font-size--x-large); }
.os-post-cta .os-post-cta__actions { justify-content: flex-start; min-width: 0; padding-left: 0; }
.os-post-cta .os-post-cta__actions::before { display: none; }
.os-post-cta::before { right: -200px; }
.os-post-body { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
.os-post-body__grid { gap: 48px; }
.os-post-body__main > .os-post-content { margin-top: 40px; }
.os-post-body__main > .os-post-content:has(> .os-post-facts:first-child) { margin-top: 32px; }
.os-post-content > .os-post-facts + * { margin-top: 48px; }
.os-post-content > .os-post-facts { padding: 24px 20px 12px; }
.os-post-facts .os-post-facts__list { grid-template-columns: minmax(0, 1fr); }
.os-post-facts .os-post-facts__list li { padding: 12px 0 12px 32px; font-size: var(--wp--preset--font-size--small); }
.os-post-facts .os-post-facts__list li::before { top: 10px; width: 24px; height: 24px; }
.os-post-toc { padding: 24px 20px 12px; }
.os-post-toc__list { grid-template-rows: none; grid-auto-flow: row; margin-top: 12px; }
.os-post-toc__list a { padding: 12px 0; font-size: var(--wp--preset--font-size--small); }
.os-post-toc__num { width: 26px; height: 26px; margin-top: -3px; font-size: 12px; }
.os-post-content { font-size: var(--wp--preset--font-size--medium); }
.os-post-content > h2 { margin-top: 48px; }
.os-post-content > h3 { margin-top: 32px; font-size: var(--wp--preset--font-size--x-large); }
.os-post-content > :is(.is-style-os-eyebrow, .is-style-os-eyebrow-sm) { margin-top: 48px; }
.os-post-content > :where(figure, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-quote, .wp-block-pullquote),
.os-post-content > :where(figure, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .wp-block-video, .wp-block-quote, .wp-block-pullquote) + * { margin-top: 32px; }
.os-post-content .wp-block-quote { font-size: var(--wp--preset--font-size--large); }
:is(.os-post-content, .os-post-lead) .wp-element-caption { margin-top: 12px; font-size: var(--wp--preset--font-size--x-small); }
/* Tables stack: one block per row, each value under its column name. */
.os-post-content .wp-block-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.os-post-content .wp-block-table :is(table, tbody, tr, td) { display: block; width: auto !important; }
.os-post-content .wp-block-table tr { padding: 20px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.os-post-content .wp-block-table tr:first-child { padding-top: 0; }
.os-post-content .wp-block-table td,
.os-post-content .wp-block-table thead + tbody tr:first-child td { padding: 0; }
.os-post-content .wp-block-table td + td { margin-top: 12px; }
.os-post-content .wp-block-table td[data-label]::before {
content: attr(data-label);
display: block;
margin-bottom: 2px;
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
letter-spacing: 1.15px;
text-transform: uppercase;
color: var(--wp--preset--color--brand);
}
.os-post-share { gap: 12px 16px; }
.os-post-share__copy { padding-left: 16px; }
.os-post-aside { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.os-post-aside__card { min-height: 0; padding: 23px; }
}
/* ---------- Author (os/blog-post-author) ---------- */
.os-post-author {
padding-top: 48px;
padding-bottom: 48px;
background: var(--wp--custom--color--on-brand);
}
.os-post-author > * { margin-block: 0; }
.os-author-box {
display: flex;
align-items: stretch;
gap: 48px;
padding: 32px;
border-radius: var(--wp--preset--border-radius--lg);
background: linear-gradient(165deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--navy-deep) 100%);
}
.os-author-box > * { margin: 0; }
.os-author-box__photo {
flex: 0 0 297px;
height: 320px;
overflow: hidden;
border-radius: var(--wp--preset--border-radius--lg);
background: var(--wp--preset--color--brand);
}
.os-author-box__photo img {
display: block;
width: 100%;
height: 100%;
border-radius: 0;
object-fit: cover;
object-position: 50% 100%;
}
.os-author-box__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between;
gap: 24px;
min-width: 0;
min-height: 320px;
}
.os-author-box__body > * { margin: 0; }
.os-author-box__head > * { margin: 0; }
.os-author-box__name {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--title);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.5px;
color: var(--wp--preset--color--white);
}
.os-author-box__head > .os-author-box__role {
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
line-height: 1.5;
color: rgb(255 255 255 / 0.8);
}
.os-author-box__head > .os-author-box__name + .os-author-box__role { margin-top: 8px; }
.os-author-box__role:empty { display: none; }
.os-author-box .os-author-box__linkedin {
display: inline-flex;
align-self: flex-start;
border-radius: 4px;
color: var(--wp--preset--color--white);
transition: color var(--os-fast) var(--os-ease), transform var(--os-base) var(--os-ease);
}
.os-author-box .os-author-box__linkedin:hover { color: var(--wp--preset--color--teal); transform: translateY(-2px); }
.os-author-box__linkedin:focus-visible { outline: 2px solid var(--wp--preset--color--white); outline-offset: 3px; }
.os-author-box__bio {
font-size: var(--wp--preset--font-size--large);
font-weight: 500;
line-height: 1.5;
color: rgb(255 255 255 / 0.9);
}
@media (max-width: 1100px) {
.os-author-box { gap: 32px; padding: 24px; }
.os-author-box__photo { flex-basis: 240px; height: 259px; }
.os-author-box__body { min-height: 259px; }
}
@media (max-width: 768px) {
.os-post-author { padding-top: calc(var(--wp--preset--spacing--90) * 0.6); padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6); }
.os-author-box { flex-direction: column; gap: 24px; padding: 20px; }
.os-author-box__photo { flex: none; width: 240px; max-width: 100%; }
.os-author-box__body { min-height: 0; gap: 16px; }
.os-author-box__name { font-size: var(--wp--preset--font-size--x-large); }
.os-author-box__bio { font-size: var(--wp--preset--font-size--medium); }
}
/* ---------- Related (os/blog-related): the listing's cards ---------- */
.os-post-related {
padding-top: calc(var(--wp--preset--spacing--90) * 0.6);
padding-bottom: calc(var(--wp--preset--spacing--90) * 0.6);
/* Two faint glows (Figma): teal top right, violet bottom left. */
background:
radial-gradient(585px 646px at calc(50% + 601px) 78px, rgb(20 199 180 / 0.05), rgb(20 199 180 / 0) 100%),
radial-gradient(585px 646px at calc(50% - 601px) calc(100% - 78px), rgb(108 92 231 / 0.05), rgb(108 92 231 / 0) 100%),
var(--wp--preset--color--white);
}
.os-post-related > * { margin-block: 0; }
.os-post-related > .os-post-related__query { margin-top: 48px; }
.os-post-related:not(:has(.wp-block-post)) { display: none; }
/* At 1100px and below the cards are a carousel (os-carousel--compact, os-carousel.css). */
@media (max-width: 768px) {
.os-post-related > .os-post-related__query { margin-top: 24px; }
}
/* ---------- Editor (Site Editor → Single Posts) ----------
.is-root-container exists only in the editor canvas. Show what the live page reveals with
JavaScript or real post data, so editors can see and edit it. */
/* The editor makes every block position: relative, which would turn the sidebar's sticky
top offset into a 104px shift, and adds its own block spacing in the grid. */
.is-root-container .os-post-aside { top: auto; }
.is-root-container .os-post-body__toc > .os-post-toc { top: auto; max-height: none; }
.is-root-container .os-post-body__grid > * { margin-block: 0; }
.is-root-container .os-post-share__copy { display: flex; }
.is-root-container .os-post-tags-row.os-post-tags-row:not(.x) { display: flex; }
.is-root-container .os-post-hero__actions .os-post-tags.os-post-tags:not(.x) { display: flex; }
/* The Avatar block is wrapped in a fixed-size resize box in the editor. */
.is-root-container .os-author-box__photo .components-resizable-box__container { width: 100% !important; max-width: none !important; height: 100% !important; }
.is-root-container .os-post-toc::after {
content: "Lists the post\2019s H2 sections, numbered, on the live page.";
grid-column: 1 / -1;
margin-top: 12px;
padding: 14px 0 6px;
border-top: 1px solid rgb(0 80 158 / 0.1);
font-size: var(--wp--preset--font-size--small);
font-style: italic;
color: var(--wp--custom--color--tertiary);
}
/* The post's link colour must not turn the CTA button text blue. */
.os-post-content .os-post-cta .wp-block-button__link { color: var(--wp--preset--color--white); text-decoration: none; }