File: /var/www/viitorx.stgviitor.com/wp-content/themes/viitorx/css/blog-single.css
/**
* Blog single (post detail).
*/
body.viitorx-single-post-body .viitorx-blog-single-page {
--color-bg: #131313;
--color-surface: #0f0f0f;
--color-text: #f0f0e5;
--color-muted: #b3b3b3;
--color-border: rgba(217, 217, 217, 0.2);
--color-border-strong: rgba(240, 240, 229, 0.4);
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 48px;
--space-5: 80px;
--radius-1: 16px;
--radius-2: 24px;
--container-max: 1200px;
--header-height: 80px;
--blog-card-media-h: clamp(220px, min(62vw, 400px), 400px);
color: var(--color-text);
background: var(--color-bg);
min-height: 100vh;
}
body.viitorx-single-post-body .viitorx-blog-single-page img {
max-width: 100%;
height: auto;
display: block;
}
body.viitorx-single-post-body .viitorx-blog-single-page a {
color: inherit;
text-decoration: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .container {
width: min(90%, var(--container-max));
margin: 0 auto;
}
body.viitorx-single-post-body .viitorx-blog-single-page .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 20px 40px;
border-radius: var(--radius-1);
border: 1px solid transparent;
font-weight: 700;
font-size: 20px;
line-height: 24px;
cursor: pointer;
user-select: none;
text-decoration: none;
transition: background 0.4s var(--ease-expo, cubic-bezier(.16,1,.3,1)), color 0.4s, transform 0.4s;
}
body.viitorx-single-post-body .viitorx-blog-single-page .btn--primary {
background: var(--color-text);
color: var(--color-bg);
}
body.viitorx-single-post-body .viitorx-blog-single-page .btn--primary:hover {
background: rgba(164, 119, 100, 1);
color: rgba(240, 240, 229, 1);
transform: translateY(-2px);
}
body.viitorx-single-post-body .viitorx-blog-single-page .btn--sm {
padding: 10px 24px;
font-size: 18px;
line-height: 28px;
width: 100%;
}
body.viitorx-single-post-body .viitorx-blog-single-page .btn--ghost {
width: fit-content;
border-radius: 0;
padding: 20px 40px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .btn:focus-visible {
outline: 2px solid rgba(240, 240, 229, 0.55);
outline-offset: 4px;
}
/* ─── BLOG HERO ─────────────────────────────────────────────── */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero {
position: relative;
min-height: clamp(520px, calc(100vh - var(--hero-top-bar-h, 80px)), 820px);
display: grid;
align-items: end;
overflow: hidden;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero__media {
position: absolute;
inset: 0;
overflow: hidden;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero__media-img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center center;
display: block;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(19, 19, 19, 0) 62%, #131313 88%);
pointer-events: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero__inner {
position: relative;
z-index: 2;
padding:
calc(var(--space-5) + var(--hero-top-bar-total, 0px)) 0 calc(var(--space-4) + 10px);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero__title {
font-weight: 500;
font-size: clamp(28px, 4.2vw, 56px);
line-height: 1.12;
color: #ffffff;
max-width: 100%;
margin: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero__title-line {
display: inline;
}
/* ─── DETAILS LAYOUT ─────────────────────────────────────────── */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details {
padding: var(--space-4) 0 var(--space-5);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details__inner {
display: grid;
gap: var(--space-4);
}
/* Body column inset vs hero title (design: content sits slightly inside title alignment). */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details .blog-article {
display: grid;
gap: 50px;
min-width: 0;
padding-left: clamp(16px, 3.5vw, 72px);
box-sizing: border-box;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__intro {
font-weight: 400;
font-size: clamp(16px, 2.2vw, 24px);
line-height: 1.6;
letter-spacing: -0.108px;
color: #ffffff;
max-width: 100%;
margin: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .divider {
height: 1px;
width: 100%;
background: var(--color-border);
}
/* WordPress entry body */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content {
display: grid;
gap: 32px;
font-family: 'Lenia Sans', var(--font-heading, sans-serif);
font-weight: 400;
font-size: 24px;
line-height: 37.8px;
letter-spacing: -0.11px;
color: rgba(255, 255, 255, 0.82);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content a:not(.btn):not(.wp-block-button__link) {
color: rgba(164, 119, 100, 1);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content a:not(.btn):not(.wp-block-button__link):hover {
color: inherit;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content > * {
min-width: 0;
max-width: 72ch;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .alignwide,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .alignfull {
max-width: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content p {
margin: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content strong,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content b {
font-weight: 700;
color: #ffffff;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content a:not(.btn):not(.wp-block-button__link) strong,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content a:not(.btn):not(.wp-block-button__link) b {
color: inherit;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content h2,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content h3 {
font-family: 'Lenia Sans', var(--font-heading, sans-serif);
font-weight: 500;
font-size: 28px;
line-height: 1;
letter-spacing: -1px;
color: #ffffff;
margin: 0;
max-width: 72ch;
/* Offset anchor so heading is not hidden behind sticky nav */
scroll-margin-top: calc(var(--nav-bar-outer-height, 88px) + 24px);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content h3 {
font-size: 22px;
}
/* Must come after h2/h3 rules to win cascade when element is an h-tag */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .blog-prose__heading {
font-size: clamp(18px, 2vw, 26px);
font-weight: 600;
letter-spacing: -0.03em;
color: #ffffff;
text-transform: none;
margin: 0 0 1rem;
line-height: 1.3;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ul,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ol {
margin: 0.35em 0 0;
padding-left: 1.35em;
list-style-position: outside;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ul {
list-style-type: disc;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ol {
list-style-type: decimal;
padding-left: 1.55em;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content li {
margin: 0;
padding-left: 0.15em;
line-height: 1.55;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content li + li {
margin-top: 0.55em;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content li > ul,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content li > ol {
margin-top: 0.55em;
margin-bottom: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content li > ul > li:first-child,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content li > ol > li:first-child {
margin-top: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ul ul {
list-style-type: circle;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ul ul ul {
list-style-type: square;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ol ol {
list-style-type: lower-alpha;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content ol ol ol {
list-style-type: lower-roman;
}
/* Tables — Classic + Block Editor (.wp-block-table) */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .wp-block-table {
margin: 0.35em 0 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
border-radius: var(--radius-1, 16px);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content table {
width: 100%;
border-collapse: collapse;
font-size: 0.94em;
line-height: 1.45;
color: inherit;
border: 1px solid var(--color-border-strong, rgba(240, 240, 229, 0.25));
background: rgba(255, 255, 255, 0.02);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .wp-block-table table {
min-width: min(560px, 100%);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content tbody tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.03);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content table th,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content table td {
padding: 0.65em 1em;
text-align: left;
vertical-align: top;
border: 1px solid var(--color-border, rgba(217, 217, 217, 0.2));
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content table thead th {
font-weight: 600;
color: var(--color-text, #f0f0e5);
background: rgba(255, 255, 255, 0.08);
font-size: 0.95em;
border-bottom-width: 1px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content table tbody th {
font-weight: 600;
background: rgba(255, 255, 255, 0.04);
text-align: left;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content table caption {
caption-side: bottom;
padding: 0.65em 0.15em 0;
font-size: 0.88em;
line-height: 1.35;
text-align: left;
color: var(--color-muted, #b3b3b3);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .wp-block-table figcaption,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content figure.wp-block-table .wp-element-caption {
margin: 0;
padding-top: 0.65rem;
font-size: 0.88em;
line-height: 1.35;
opacity: 0.82;
max-width: 72ch;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content blockquote {
background: #1a1917;
border-left: 3px solid rgba(255, 255, 255, 0.22);
padding: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 56px);
margin: 0;
display: grid;
gap: 24px;
max-width: min(72ch, 100%);
font-weight: 500;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.45;
letter-spacing: -0.01em;
color: #ffffff;
font-style: normal;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content blockquote > cite,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content blockquote p cite {
display: block;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.5);
font-style: normal;
font-family: 'Archivo', sans-serif;
margin-top: 24px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .wp-block-image,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content figure {
max-width: 100%;
margin: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content figcaption {
font-size: 0.85em;
opacity: 0.75;
margin-top: 0.5rem;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .wp-block-embed {
max-width: 72ch;
}
/*
* Editorial article layout — paste as one “Custom HTML” block (classes only, no inline styles).
*/
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content > .wp-block-html:has(.blog-prose--editorial) {
max-width: none;
width: 100%;
margin-inline: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial {
max-width: none;
width: 100%;
margin-inline: 0;
box-sizing: border-box;
color: #d4d0c8;
font-weight: 400;
font-size: clamp(17px, 1.6vw, 22px);
line-height: 1.65;
letter-spacing: -0.02em;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial > * {
max-width: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .blog-prose__lead {
margin: 0 0 3rem;
color: #c8c4bc;
font-weight: 400;
font-size: clamp(17px, 1.65vw, 22px);
line-height: 1.65;
letter-spacing: -0.02em;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .divider {
background: rgba(255, 255, 255, 0.08);
margin-bottom: 2.5rem;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .blog-prose__section {
margin-bottom: 2.5rem;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .blog-prose__section--last {
margin-bottom: 3rem;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .blog-prose__heading {
font-size: clamp(18px, 2vw, 28px);
color: #ffffff;
margin: 0 0 1rem;
font-weight: 500;
line-height: 100%;
letter-spacing: -1px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .blog-prose__text {
margin: 0 0 1rem;
color: #c0bbb2;
font-size: inherit;
line-height: inherit;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial .blog-prose__text:last-child {
margin-bottom: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial blockquote.blog-prose__blockquote {
background: #1a1917;
border-left: 3px solid rgba(255, 255, 255, 0.22);
border-radius: 0;
padding: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 56px);
margin: 0;
max-width: none;
display: grid;
gap: 16px;
color: #ffffff;
font-weight: 500;
font-size: clamp(18px, 2vw, 22px);
line-height: 1.45;
letter-spacing: -0.01em;
font-style: normal;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial blockquote.blog-prose__blockquote p {
font-size: inherit;
font-style: normal;
font-weight: inherit;
color: #ffffff;
margin: 0;
line-height: inherit;
max-width: none;
letter-spacing: inherit;
}
/* cite as direct child of blockquote — gap handles spacing */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial blockquote.blog-prose__blockquote > cite,
/* cite nested inside p — use margin-top for the 24px gap */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content .blog-prose--editorial blockquote.blog-prose__blockquote p cite {
display: block;
color: rgba(255, 255, 255, 0.5);
font-style: normal;
font-family: 'Archivo', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0;
margin-top: 24px;
}
/* ─── SIDEBAR ───────────────────────────────────────────────── */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-sidebar {
display: grid;
gap: 30px;
align-content: start;
}
body.viitorx-single-post-body .viitorx-blog-single-page .panel {
background: #191919;
border: 1px solid var(--color-border);
border-radius: var(--radius-2);
padding: 28px 24px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .panel__kicker {
font-weight: 400;
font-size: 16px;
line-height: 17px;
color: rgba(255, 255, 255, 0.6);
margin: 0 0 18px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .panel--toc .panel__kicker {
color: rgba(255, 255, 255, 0.52);
margin-bottom: 20px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .panel__headline {
font-size: 20px;
color: var(--color-text);
margin: 0 0 16px;
font-weight: 600;
line-height: 100%;
letter-spacing: -1%;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc {
display: block;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__list {
list-style: disc;
list-style-position: outside;
margin: 0;
padding: 0 0 0 1.2em;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__item {
margin: 0 0 14px;
padding-left: 0.45em;
color: #ffffff;
line-height: 1.55;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__item:last-child {
margin-bottom: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__item::marker {
color: rgba(255, 255, 255, 0.92);
font-size: 16px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__link {
display: inline;
font-weight: 400;
font-size: clamp(16px, 1.15vw, 18px);
line-height: inherit;
color: #ffffff;
text-decoration: none;
opacity: 0.96;
transition: opacity 0.15s ease;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__link:hover {
opacity: 1;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__link.is-active {
color: rgba(164, 119, 100, 1);
opacity: 1;
font-weight: 500;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__link:focus-visible {
outline: 2px solid rgba(240, 240, 229, 0.55);
outline-offset: 4px;
border-radius: 10px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .toc__empty {
font-size: 14px;
line-height: 1.45;
opacity: 0.65;
margin: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
list-style: none;
margin: 0;
padding: 0;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share__item {
margin: 0;
padding: 0;
list-style: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share__icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 10px;
border: none;
padding: 0;
background: transparent;
cursor: pointer;
color: inherit;
text-decoration: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share__icon img {
width: 36px;
height: 36px;
object-fit: contain;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share__icon-svg {
display: grid;
place-items: center;
width: 36px;
height: 36px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share__icon-svg svg {
display: block;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share__icon-svg--link svg {
display: block;
}
body.viitorx-single-post-body .viitorx-blog-single-page .share__icon:focus-visible {
outline: 2px solid rgba(240, 240, 229, 0.55);
outline-offset: 4px;
}
/* ─── RELATED ───────────────────────────────────────────────── */
body.viitorx-single-post-body .viitorx-blog-single-page .related {
padding: 0 0 var(--space-5);
}
body.viitorx-single-post-body .viitorx-blog-single-page .related__inner {
display: grid;
gap: var(--space-4);
justify-items: center;
text-align: center;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related__title {
font-weight: 300;
font-size: clamp(28px, 4vw, 48px);
line-height: 1.2;
letter-spacing: -1px;
color: #ffffff;
margin: 0;
width: 100%;
text-align: left;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-grid {
display: grid;
gap: 24px;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-card {
display: grid;
gap: 16px;
min-width: 0;
align-content: start;
border-radius: var(--radius-2);
outline: none;
transition: transform 160ms ease;
text-align: left;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-card:hover {
transform: translateY(-2px);
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-card:focus-visible {
outline: 2px solid rgba(240, 240, 229, 0.55);
outline-offset: 6px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-card__img-wrap {
width: 100%;
height: var(--blog-card-media-h);
flex-shrink: 0;
border-radius: calc(var(--radius-2) - 8px);
overflow: hidden;
position: relative;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-card__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-card__title {
min-width: 0;
font-weight: 400;
font-size: clamp(15px, 1.4vw + 0.72rem, 22px);
line-height: 1.3;
color: var(--color-text);
opacity: 0.85;
margin: 0;
}
@media (max-width: 768px) {
body.viitorx-single-post-body .viitorx-blog-single-page .related-card__img-wrap,
body.viitorx-single-post-body .viitorx-blog-single-page .related-card__img {
height: 340px;
}
}
@media (max-width: 767px) {
body.viitorx-single-post-body .viitorx-blog-single-page .panel--toc {
display: none;
}
}
@media (min-width: 768px) {
body.viitorx-single-post-body .viitorx-blog-single-page .related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.viitorx-single-post-body .viitorx-blog-single-page .related__inner {
justify-items: stretch;
text-align: left;
}
}
@media (min-width: 1024px) {
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details__inner {
grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
align-items: start;
column-gap: clamp(20px, 3vw, 48px);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-sidebar {
position: sticky;
top: calc(var(--header-height) + var(--space-3));
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
body.viitorx-single-post-body .viitorx-blog-single-page .panel {
padding: 22px 18px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-article__body.entry-content blockquote {
padding: 28px;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related-card__img-wrap,
body.viitorx-single-post-body .viitorx-blog-single-page .related-card__img {
height: 280px;
}
}
/* ═══════════════════════════════════════════
Scroll reveals — single post (single.php → content-single-post.php)
Base: css/section-reveal.css + js/section-reveal.js
═══════════════════════════════════════════ */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero[data-section-reveal].section-reveal--visible .hero-wordmark {
animation: section-reveal-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.02s backwards;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero[data-section-reveal].section-reveal--visible .blog-hero__inner {
animation: section-reveal-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.08s backwards;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero[data-section-reveal].section-reveal--visible .blog-hero__media-img {
animation: viitorx-blog-hero-media-zoom 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0s backwards;
transform-origin: center center;
}
@keyframes viitorx-blog-hero-media-zoom {
from { transform: scale(1.04); }
to { transform: scale(1); }
}
/*
* Transition-based reveal for blog-details children — avoids the
* `animation backwards` fill jerk (backwards fill snaps to opacity:0
* the moment the class is added, before the animation plays).
* Children start invisible via direct CSS state; transition runs smoothly.
*/
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details .blog-article > * {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-article > * {
opacity: 1;
transform: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-article > *:nth-child(1) { transition-delay: 0.04s; }
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-article > *:nth-child(2) { transition-delay: 0.08s; }
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-article > *:nth-child(3) { transition-delay: 0.12s; }
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-article > *:nth-child(n+4) { transition-delay: 0.15s; }
/* Sidebar panels */
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details .blog-sidebar > .panel {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-sidebar > .panel {
opacity: 1;
transform: none;
}
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-sidebar > .panel:nth-child(1) { transition-delay: 0.06s; }
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-sidebar > .panel:nth-child(2) { transition-delay: 0.10s; }
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-sidebar > .panel:nth-child(3) { transition-delay: 0.14s; }
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details.section-reveal--visible .blog-sidebar > .panel:nth-child(n+4) { transition-delay: 0.17s; }
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related__title {
animation: section-reveal-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s backwards;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related-card {
animation: section-reveal-rise 0.52s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related-card:nth-child(1) { animation-delay: 0.07s; }
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related-card:nth-child(2) { animation-delay: 0.12s; }
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related-card:nth-child(3) { animation-delay: 0.17s; }
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related-card:nth-child(n+4) { animation-delay: 0.21s; }
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related__inner > .btn {
animation: section-reveal-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.14s backwards;
}
@media (prefers-reduced-motion: reduce) {
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero[data-section-reveal].section-reveal--visible .hero-wordmark,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero[data-section-reveal].section-reveal--visible .blog-hero__inner,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-hero[data-section-reveal].section-reveal--visible .blog-hero__media-img,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details[data-section-reveal].section-reveal--visible .blog-article > *,
body.viitorx-single-post-body .viitorx-blog-single-page .blog-details[data-section-reveal].section-reveal--visible .blog-sidebar > .panel,
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related__title,
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related-card,
body.viitorx-single-post-body .viitorx-blog-single-page .related[data-section-reveal].section-reveal--visible .related__inner > .btn {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}