/* ============================================================
Mindset Plus — theme-era overrides (APPEND-ONLY)
tokens.css, base.css and components.css are the frozen design
source and are READ-ONLY (docs/redesign/DESIGN-SOURCE.md).
Everything WordPress needs that the static concept never had goes
here, appended at the bottom under a dated heading. Never reorder
or rewrite an existing block — that is what makes a re-port of the
design source a clean copy instead of a merge conflict.
Loaded last (inc/enqueue.php, MP_STYLES), so plain selectors here
beat components.css without !important.
⚠️ 2026-07-29 · P0c — the original 2026-07-28 P0 block was written
against concept 05 and was DELETED, not appended to. Every token it
used (--fg, --maxw, --maxw-prose, --sand-100, --line-200, --space-1,
--space-3) and its nav selector (.nav-links.open) ceased to exist
when the design source changed to 02 Neural Tech. Append-only
resumes from the P0c block below.
============================================================ */
/* ---------- 2026-07-29 · P0c · WordPress chrome the concept has no equivalent for ---------- */
/* The design's own header measurement. components.css:30 sets .nav
min-height:68px and components.css:721 pins the open mobile nav to
top:68px. Both numbers below are derived from that one value. */
:root {
--mp-header-h: 68px;
}
/* Admin bar is position:fixed at the top for logged-in users; the sticky
header (components.css:6) would sit underneath it. WordPress ships the
32px/46px breakpoint at 783px, so match that exactly rather than the
design's own 720px nav breakpoint. */
.admin-bar .site-header { top: 46px; }
@media (min-width: 783px) {
.admin-bar .site-header { top: 32px; }
}
/* Mobile nav drops from directly under the bar. components.css:721 pins it
at 68px, the .nav min-height, measured from the header box. */
.admin-bar .nav__links.is-open { top: var(--mp-header-h); }
/* In-page anchors (#services, #proof, #contact) must clear the sticky header
or the target heading lands behind it. Header + one step of air. */
:target { scroll-margin-top: calc(var(--mp-header-h) + var(--space-lg)); }
.admin-bar :target { scroll-margin-top: calc(var(--mp-header-h) + 46px + var(--space-lg)); }
@media (min-width: 783px) {
.admin-bar :target { scroll-margin-top: calc(var(--mp-header-h) + 32px + var(--space-lg)); }
}
/* WordPress core's screen-reader class. base.css:130 defines .visually-hidden
with the same intent; core markup (skip links, form labels, comment
navigation) emits this name instead, so alias it. */
.screen-reader-text {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
position: absolute; left: 1rem; top: 1rem;
width: auto; height: auto; clip: auto; margin: 0;
background: var(--ink-850); color: var(--text-100);
padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); z-index: 1000;
}
/* Alignment classes for `align-wide` theme support. --container-narrow is the
default rail; wide steps out to --container, full breaks the gutter. */
.alignwide {
max-width: var(--container);
margin-inline: auto;
}
.alignfull {
max-width: none;
width: 100vw;
margin-inline: calc(50% - 50vw);
}
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--space-lg) var(--space-lg) 0; }
.alignright { float: right; margin: 0 0 var(--space-lg) var(--space-lg); }
/* Core caption + gallery, styled to the design's mono caption voice. */
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--text-500);
margin-top: var(--space-xs);
line-height: 1.4;
}
/* Uploaded custom logo lives where the .brand__mark SVG otherwise sits
(components.css:44, 34px). */
.brand .custom-logo {
width: auto;
height: 34px;
flex: none;
}
/* === P1 shell === 2026-07-29 · header / footer / shared parts ===============
Appended by phase P1. Everything after "=== end P1 shell ===" was appended
by the P5 consolidation pass; append new rules at the very bottom of the
file, never inside a block. */
/* .mp-svg-defs and its host, template-parts/shared/svg-defs.php, were
REMOVED 2026-09-01 (FEAT-017) - see footer.php's docblock. The part
rendered exactly one filter, `#duo-neuraltech`, and nothing in the
theme applies it any more (components.css's Team section dropped the
duotone treatment, client call 2026-08-20; verified with a full-theme
grep before deleting). Not left in place as dead weight. */
/* wp_nav_menu() emits
inside .nav__links, which
components.css never sees (the concept's markup is bare
). Neutralise the
list chrome so a real WordPress menu measures like the static one. */
.nav__links li { margin: 0; padding: 0; list-style: none; }
/* === end P1 shell === */
/* === P5 consolidation === 2026-07-29 ==========================
The four assets/css/parts/*.css files written by teams T-HOME, T-BLOG,
T-ABOUT and T-MOTION are appended below VERBATIM, in enqueue order, and
the parts/ directory is deleted. They were split only to let four teams
write CSS in parallel without a write race on this file; each was
enqueued from its own template, which scattered four handles across three
templates and left t-blog.css - the block-editor contract - loading on
Pages but not on any blog surface.
Nothing below was reformatted, reordered or rewritten. The only edits are
to sentences in the part headers that described the now-deleted
per-template enqueues; each is marked "P5:".
Append-only resumes AFTER the T-MOTION block at the bottom.
================================================================== */
/* ============================================================
Mindset Plus — T-HOME (front-page.php + template-parts/home/*)
tokens.css, base.css and components.css are the frozen concept-02
design source and are READ-ONLY. Everything the home page needs
that the static concept never had goes here.
P5: this block is part of overrides.css itself, the last sheet in
MP_STYLES (inc/enqueue.php), so plain selectors below beat
components.css without !important. It was previously a separate
file enqueued from front-page.php.
2026-09-01 · FEAT-017 reconciliation — this block was written for the
home page's old trending-grid rail + events-strip posters, replaced by
the #stories field-timeline (§10, FEAT-011). Two of the original four
rules had no surviving caller across the nine bundle pages and were
dropped: `.mp-intent__lede` (the bundle keeps the lede's margin as an
inline style, same as before FEAT-013) and the whole-card
`.event-poster` affordance + the "read all articles" spacer
(`.mp-trending__more`), both specific to the removed events strip. The
sixth reveal-delay step and the `.trending-card` whole-card-link rules
stay: template-parts/shared/card-article.php still emits `.trending-card`
for the blog archive and search results, and the seven-row MINDSET /
RESPECT lists on About and the RESPECT approach page still stage a
seventh item at delay steps 6 and 7.
============================================================ */
/* ---------- 1 · Reveal-delay steps 6 and 7 ----------
components.css:706-710 defines [data-reveal-delay="1".."5"] only
(80/160/240/320/400 ms). The theme originally added a sixth step — a
copy-paste artifact in the original concept made ="5" do double duty on
the two trailing rows of a seven-row list, and the theme corrected it by
adding a real ="6" step (REDESIGN-IMPLEMENTATION-PLAN §5.5). FEAT-017
adds a seventh: the RESPECT approach page's seven-row stage track and
the relocated MINDSET register both stage a full seven items on the same
80ms cadence (FEAT-013 overrides.css §1).
Writing ="6" or ="7" against the stock sheet emits a DEAD attribute — the
row silently drops back to 0 ms with no error. This rule is what makes
both real, so it must ship together with any template that emits them.
480ms / 560ms continue the 80ms arithmetic series exactly. */
[data-reveal-delay="6"] { transition-delay: 480ms; }
[data-reveal-delay="7"] { transition-delay: 560ms; }
/* ---------- 2 · Whole-card links ----------
The concept's trending tiles are inert — a static prototype had nowhere
to send them. On WordPress every card must reach its post.
One real anchor per card, stretched over the card, rather than a second
link on the image: two anchors to the same destination would double the
tab stops and read twice to a screen reader. The anchor keeps the
heading's own colour so the card looks exactly as designed. */
.trending-card { position: relative; }
.trending-card__link { color: inherit; text-decoration: none; }
.trending-card__link::after {
content: "";
position: absolute;
inset: 0;
}
/* A stretched link's own focus ring would draw around the heading text
only, which reads as if the wrong thing is focused. Move the ring to the
card. Guarded by @supports so a browser without :has() keeps the
default base.css:139 outline rather than losing focus visibility entirely. */
@supports selector(:has(*)) {
.trending-card:has(.trending-card__link:focus-visible) {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}
.trending-card .trending-card__link:focus-visible { outline: none; }
}
/* === T-BLOG === */
/* ============================================================
Mindset Plus — blog / archive surface (P4, team T-BLOG)
Scope: index.php · archive.php · single.php · search.php · 404.php
and everything the block editor can emit inside `.entry-content`.
RULES OBSERVED
- tokens.css, base.css and components.css are the frozen design source and
are READ-ONLY. Nothing here edits them; every value below resolves to a
token those files already declare. No new colour, no new radius, no new
easing, no new font.
- P5: this block was a PART (assets/css/parts/t-blog.css) and is now
concatenated into overrides.css, which loads last, so plain selectors
already beat components.css without !important. There is exactly one
`!important` in this block and it is inside a reduced-motion block,
mirroring base.css:162.
- Everything below is EXTRAPOLATED. The design source (concept 02 Neural
Tech) contains no archive header, no pagination, no search UI, no
comments, no author box and no form of any kind
(REDESIGN-IMPLEMENTATION-PLAN §6.2). Where a surface had to be invented,
it reuses an existing component's geometry rather than inventing a look:
search field / comment field -> `.chip` border + `.btn` radius
pagination -> `.chip` pill, jade current state
author box -> `.person` (components.css:557)
post navigation -> `.service-card` panel geometry
comment thread -> `.mindset__row` left-rail rhythm
- Selectors are scoped to blog surfaces (`.entry-content`, `.comment-form`,
`.search-form`, `.blog-*`, `.entry-*`, `.post-nav`, `.comments`) so this
file cannot repaint Home or About while those are built in parallel.
============================================================ */
/* ============================================================
1 · Card grid — the listing surface
The card itself is NOT styled here. `.trending-card` and its children are
components.css:398-431 (read-only), and the WordPress-era additions the
shared part needs — `position: relative`, the stretched
`.trending-card__link` and its focus ring — live in the T-HOME block
above, because template-parts/shared/card-article.php is T-HOME's file.
Duplicating them here would put two copies of the same rule in this file.
The one thing the listing surface owns is the track size. The concept's
grid is `minmax(220px, 1fr)`, tuned for a 5-up teaser strip on Home. A full
archive of ten posts needs a reading-sized card, so the blog modifier steps
the track up; nothing else about the card changes.
============================================================ */
.trending-grid--blog {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* ============================================================
2 · Single post — header, media, terms
============================================================ */
.entry-header__kicker { margin-bottom: var(--space-md); }
.entry-header__kicker a { color: inherit; }
.entry-header__kicker a:hover { color: var(--jade-300); }
.entry-title { margin-bottom: var(--space-lg); }
.entry-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.6em;
margin: 0;
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.06em;
color: var(--text-500);
}
.entry-meta__sep { color: var(--jade-700); }
/* Lead image. Same frame language as `.real-work__photo`
(components.css:346-359) minus the scrim — an article's own feature image
has to stay readable, it is not a background. */
.entry-media {
margin: 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--ink-850);
}
/* This library's feature images are mostly event POSTERS - 4:5 and taller.
Left uncapped, one of them fills the whole first screen and pushes the
article below the fold. Capped and centred rather than cropped, because
cropping a poster cuts the very text that makes it a poster. Landscape
photos are unaffected: they hit max-width first. */
.entry-media img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: min(70vh, 640px);
margin-inline: auto;
}
.entry-media figcaption {
padding: var(--space-sm) var(--space-lg);
border-top: 1px solid var(--border);
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--text-500);
}
.entry-terms {
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--border);
}
.entry-terms__list { list-style: none; margin: 0; padding: 0; }
.entry-terms__list a.chip { color: var(--text-300); }
.entry-terms__list a.chip:hover {
color: var(--text-100);
border-color: var(--jade-700);
background: var(--surface-raised);
}
/* ============================================================
3 · `.entry-content` — 🔴 AC9, the block-editor contract
Everything the block editor writes lands here through the_content(). These
rules key off the classes CORE emits (`wp-block-*`, `wp-element-*`,
`align*`) and off bare tags, so the same styling covers three authoring
histories at once: Gutenberg blocks, the classic editor's raw HTML, and the
12 legacy Elementor posts whose post_content is plain HTML.
Nothing here inspects or rewrites content. Add a block in the editor, it
inherits this. That is the acceptance criterion.
============================================================ */
.entry-content {
color: var(--text-300);
font-size: var(--step-0);
line-height: 1.75;
}
.entry-content > * { margin-block: 0 var(--space-lg); }
.entry-content > :last-child { margin-bottom: 0; }
/* --- Headings (core/heading + bare tags) --- */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
color: var(--text-100);
font-family: var(--font-serif);
line-height: 1.15;
letter-spacing: -0.015em;
font-weight: 500;
text-wrap: balance;
}
.entry-content > h2 { margin-top: var(--space-2xl); font-size: var(--step-3); }
.entry-content > h3 { margin-top: var(--space-xl); font-size: var(--step-2); }
.entry-content > h4 { margin-top: var(--space-xl); font-size: var(--step-1); }
.entry-content > h5,
.entry-content > h6 {
margin-top: var(--space-lg);
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jade-400);
}
.entry-content > :first-child { margin-top: 0; }
/* Anchored headings must clear the sticky header (overrides.css:46 does this
for :target; block anchors are the same problem one layer down). */
.entry-content [id] { scroll-margin-top: calc(var(--mp-header-h) + var(--space-lg)); }
/* --- Text --- */
.entry-content p { max-width: none; }
.entry-content a:not(.wp-block-button__link):not(.wp-element-button) {
text-decoration: underline;
text-decoration-color: var(--jade-700);
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):hover {
text-decoration-color: var(--jade-300);
}
.entry-content .has-drop-cap:first-letter {
float: left;
font-family: var(--font-serif);
font-size: 3.6em;
line-height: 0.78;
margin: 0.08em 0.12em 0 0;
color: var(--jade-400);
}
.entry-content mark,
.entry-content .has-inline-color {
background: rgba(95, 201, 172, 0.16);
color: var(--text-100);
padding: 0.05em 0.25em;
border-radius: var(--radius-sm);
}
.entry-content abbr[title] { text-decoration-color: var(--jade-700); }
.entry-content sub,
.entry-content sup { line-height: 0; }
/* --- Lists (core/list) --- */
.entry-content ul,
.entry-content ol { padding-left: 1.4em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content li::marker { color: var(--jade-400); }
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul { margin-block: 0.4em; }
.entry-content .wp-block-list { margin-bottom: var(--space-lg); }
/* --- Quote (core/quote) + pullquote --- */
.entry-content blockquote,
.entry-content .wp-block-quote {
margin-inline: 0;
padding: var(--space-lg) var(--space-xl);
border: 1px solid var(--border);
border-left: 3px solid var(--jade-400);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
background: linear-gradient(90deg, var(--surface), transparent);
color: var(--text-100);
font-family: var(--font-serif);
font-size: var(--step-1);
line-height: 1.5;
}
.entry-content blockquote > :last-child { margin-bottom: 0; }
.entry-content blockquote cite,
.entry-content .wp-block-quote cite,
.entry-content .wp-block-pullquote cite {
display: block;
margin-top: var(--space-md);
font-family: var(--font-mono);
font-size: var(--step--1);
font-style: normal;
letter-spacing: 0.08em;
color: var(--jade-400);
}
.entry-content .wp-block-quote.is-style-plain {
border-inline: 0;
background: none;
padding-inline: 0;
}
.entry-content .wp-block-pullquote {
border-block: 1px solid var(--border);
border-inline: 0;
border-radius: 0;
background: none;
padding-block: var(--space-xl);
text-align: center;
}
.entry-content .wp-block-pullquote blockquote {
border: 0;
background: none;
padding: 0;
font-size: var(--step-2);
}
/* --- Images, figures, galleries (core/image, core/gallery, core/media-text) --- */
.entry-content figure { margin-inline: 0; }
.entry-content img,
.entry-content .wp-block-image img {
height: auto;
border-radius: var(--radius-md);
}
.entry-content .wp-block-image.is-style-rounded img { border-radius: 50%; }
.entry-content figcaption,
.entry-content .wp-element-caption {
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--text-500);
margin-top: var(--space-xs);
line-height: 1.4;
text-align: left;
}
.entry-content .wp-block-gallery { gap: var(--space-md); }
.entry-content .wp-block-media-text { gap: var(--space-lg); }
.entry-content .wp-block-cover {
border-radius: var(--radius-lg);
overflow: hidden;
}
.entry-content .wp-block-cover .wp-block-cover__inner-container { color: var(--text-100); }
/* Wide alignment inside a `.container--narrow` rail. overrides.css:68 only
raises max-width, which does nothing when the parent is already narrower —
the block has to be widened AND re-centred against the viewport. */
.entry-content > .alignwide {
--mp-wide: min(var(--container), calc(100vw - 2 * clamp(1.15rem, 5vw, 2.5rem)));
width: var(--mp-wide);
max-width: none;
margin-inline: calc(50% - (var(--mp-wide) / 2));
}
.entry-content > .alignfull img { border-radius: 0; }
/* --- Tables (core/table) --- */
.entry-content table,
.entry-content .wp-block-table table {
width: 100%;
border-collapse: collapse;
font-size: var(--step--1);
}
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content th,
.entry-content td {
padding: var(--space-sm) var(--space-md);
border: 1px solid var(--border);
text-align: left;
vertical-align: top;
}
.entry-content th {
color: var(--text-100);
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
background: var(--surface);
}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background: rgba(22, 38, 31, 0.5);
}
.entry-content .wp-block-table figcaption { text-align: left; }
/* --- Code, preformatted, verse (core/code, core/preformatted, core/verse) --- */
.entry-content code,
.entry-content kbd,
.entry-content samp {
font-family: var(--font-mono);
font-size: 0.9em;
background: var(--ink-850);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.15em 0.4em;
color: var(--jade-300);
}
.entry-content pre,
.entry-content .wp-block-code,
.entry-content .wp-block-preformatted,
.entry-content .wp-block-verse {
font-family: var(--font-mono);
font-size: var(--step--1);
line-height: 1.6;
background: var(--ink-850);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-lg);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
color: var(--text-300);
}
.entry-content pre code {
background: none;
border: 0;
padding: 0;
color: inherit;
font-size: inherit;
}
/* --- Separator (core/separator) --- */
.entry-content hr,
.entry-content .wp-block-separator {
border: 0;
height: 1px;
background: linear-gradient(to right, transparent, var(--jade-400), transparent);
opacity: 0.6;
margin-block: var(--space-2xl);
}
.entry-content .wp-block-separator.is-style-dots {
background: none;
opacity: 1;
color: var(--jade-400);
text-align: center;
height: auto;
}
/* --- Buttons (core/buttons) — routed onto the design's own `.btn` --- */
.entry-content .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.85em 1.5em;
border-radius: var(--radius-pill);
border: 1px solid transparent;
background: var(--jade-400);
color: var(--ink-900);
font-family: var(--font-sans);
font-size: var(--step-0);
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
background: var(--jade-300);
color: var(--ink-900);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
color: var(--text-100);
border-color: var(--border);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: var(--ink-750);
border-color: var(--jade-400);
box-shadow: none;
}
/* --- Embeds, video, audio, file, details --- */
.entry-content .wp-block-embed__wrapper,
.entry-content iframe,
.entry-content video {
border-radius: var(--radius-md);
overflow: hidden;
max-width: 100%;
}
.entry-content .wp-block-file {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
}
.entry-content .wp-block-details {
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
padding: var(--space-md) var(--space-lg);
}
.entry-content .wp-block-details summary {
cursor: pointer;
color: var(--text-100);
font-weight: 600;
}
/* --- Group / columns --- */
.entry-content .wp-block-columns { gap: var(--space-lg); }
.entry-content .wp-block-group.has-background {
padding: var(--space-lg);
border-radius: var(--radius-md);
}
/* --- Paged posts () --- */
.page-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
margin-top: var(--space-xl);
font-family: var(--font-mono);
font-size: var(--step--1);
}
.page-links__label {
color: var(--text-500);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-right: var(--space-xs);
}
.page-links a,
.page-links > span:not(.page-links__label) {
display: inline-grid;
place-items: center;
min-width: 2.4em;
padding: 0.4em 0.7em;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-300);
text-decoration: none;
}
.page-links > span:not(.page-links__label) {
border-color: var(--jade-700);
background: var(--jade-900);
color: var(--text-100);
}
/* ============================================================
4 · Pagination — the_posts_pagination()
Core emits `nav.navigation.pagination > .nav-links > a/span.page-numbers`.
Styled as `.chip` pills (components.css:661) so the archive floor matches
the values chips on About.
============================================================ */
.navigation.pagination { margin-top: var(--space-2xl); }
.navigation.pagination .nav-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-xs);
}
.navigation.pagination .page-numbers {
display: inline-grid;
place-items: center;
min-width: 2.6em;
padding: 0.55em 1em;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: var(--surface);
color: var(--text-300);
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.04em;
text-decoration: none;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.navigation.pagination a.page-numbers:hover {
border-color: var(--jade-700);
background: var(--surface-raised);
color: var(--text-100);
}
.navigation.pagination .page-numbers.current {
border-color: var(--jade-400);
background: var(--jade-900);
color: var(--text-100);
}
.navigation.pagination .page-numbers.dots {
border-color: transparent;
background: none;
color: var(--text-500);
min-width: 0;
padding-inline: var(--space-2xs);
}
/* ============================================================
5 · Post navigation — the_post_navigation()
Panel geometry lifted from `.service-card` (components.css:282-292), minus
the cursor-reactive gradient, which main.js only drives on `.service-card`.
============================================================ */
.post-nav { margin-top: var(--space-2xl); }
.post-nav .nav-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-md);
}
.post-nav .nav-previous a,
.post-nav .nav-next a {
display: grid;
gap: var(--space-xs);
height: 100%;
padding: var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--text-100);
text-decoration: none;
transition: transform var(--dur-mid) var(--ease-out),
border-color var(--dur-mid) var(--ease-out),
background var(--dur-mid) var(--ease-out);
}
.post-nav .nav-previous a:hover,
.post-nav .nav-next a:hover {
transform: translateY(-4px);
border-color: var(--jade-700);
background: var(--surface-raised);
}
.post-nav .nav-next { text-align: right; }
.post-nav__label {
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--jade-400);
}
.post-nav__title {
font-family: var(--font-serif);
font-size: var(--step-1);
line-height: 1.2;
color: var(--text-100);
}
/* ============================================================
6 · Author box — reuses `.person` (components.css:557-596)
No extra markup needed: the avatar already matches the team grid on
About just by sharing `.person__photo`. (Until FEAT-017, the shared
class also carried the site-wide `#duo-neuraltech` duotone via footer.php
- that filter and its host were removed 2026-09-01, see footer.php's
docblock, so both surfaces now render headshots in their original
colours instead, still identically to each other.)
============================================================ */
.entry-author { margin-top: var(--space-2xl); }
.entry-author h2 {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--step-1);
color: var(--text-100);
margin-bottom: 0.1em;
}
.entry-author .person__role { margin-bottom: var(--space-md); }
.entry-author__avatar { border-radius: 0; }
/* ============================================================
7 · Forms — search field, comment field
The concept ships NO form (§6.2). These controls are built from the
`.chip` border/background pair and the `.btn` pill so a field reads as a
sibling of the components that do exist.
============================================================ */
.search-bar { margin-bottom: var(--space-2xl); }
.search-form,
.wp-block-search__inside-wrapper {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
align-items: stretch;
max-width: 34rem;
}
.search-form label {
flex: 1 1 14rem;
display: block;
margin: 0;
}
.search-form .search-field,
.wp-block-search__input,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
font-family: var(--font-sans);
font-size: var(--step-0);
line-height: 1.5;
color: var(--text-100);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.75em 1em;
transition: border-color var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.search-form .search-field::placeholder,
.wp-block-search__input::placeholder,
.comment-form textarea::placeholder { color: var(--text-500); }
.search-form .search-field:hover,
.comment-form input[type="text"]:hover,
.comment-form input[type="email"]:hover,
.comment-form input[type="url"]:hover,
.comment-form textarea:hover { border-color: var(--jade-700); }
.search-form .search-field:focus,
.wp-block-search__input:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
border-color: var(--jade-400);
background: var(--surface-raised);
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}
.comment-form textarea { min-height: 9rem; resize: vertical; }
.search-form .search-submit,
.wp-block-search__button,
.comment-form .comment-form__submit,
.comment-form input[type="submit"] {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.85em 1.5em;
border: 1px solid transparent;
border-radius: var(--radius-pill);
background: var(--jade-400);
color: var(--ink-900);
font-family: var(--font-sans);
font-size: var(--step-0);
font-weight: 600;
line-height: 1;
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
background var(--dur-fast) var(--ease-out);
}
.search-form .search-submit:hover,
.wp-block-search__button:hover,
.comment-form .comment-form__submit:hover,
.comment-form input[type="submit"]:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
background: var(--jade-300);
}
/* ============================================================
8 · Comments
Core's default walker markup (`.comment-list`, `.comment-body`,
`.comment-meta`, `.comment-content`, `.reply`) plus comment_form()'s
(`.comment-respond`, `.comment-notes`, `.form-submit`).
============================================================ */
.comments {
margin-top: var(--space-3xl);
padding-top: var(--space-xl);
border-top: 1px solid var(--border);
}
.comments__title {
font-size: var(--step-2);
margin-bottom: var(--space-xl);
}
.comment-list,
.comment-list .children {
list-style: none;
margin: 0 0 var(--space-2xl);
padding: 0;
}
.comment-list .children {
margin: var(--space-md) 0 0;
padding-left: var(--space-lg);
border-left: 1px solid var(--border);
}
.comment-list li { margin-bottom: var(--space-md); }
.comment-body {
padding: var(--space-lg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--surface);
}
.comment-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
}
.comment-author {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
color: var(--text-100);
font-weight: 600;
}
.comment-author .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
flex: none;
}
.comment-author .says { display: none; }
.comment-metadata,
.comment-metadata a {
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.04em;
color: var(--text-500);
text-decoration: none;
}
.comment-metadata a:hover { color: var(--jade-300); }
.comment-content > :last-child { margin-bottom: 0; }
.comment-awaiting-moderation {
display: block;
margin-top: var(--space-sm);
font-family: var(--font-mono);
font-size: var(--step--1);
color: var(--amber-400);
}
.comment .reply { margin-top: var(--space-md); }
.comment-reply-link {
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jade-400);
text-decoration: none;
}
.comment-reply-link:hover { color: var(--jade-300); }
.bypostauthor > .comment-body { border-color: var(--jade-700); background: var(--surface-raised); }
.pingback .comment-body,
.trackback .comment-body { font-size: var(--step--1); }
.comment-respond {
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: linear-gradient(160deg, var(--surface-raised), var(--surface));
}
.comment-reply-title { font-size: var(--step-1); margin-bottom: var(--space-md); }
.comment-reply-title small { font-size: var(--step--1); font-family: var(--font-mono); }
.comment-notes,
.comment-form .logged-in-as {
font-size: var(--step--1);
color: var(--text-500);
margin-bottom: var(--space-lg);
}
.comment-form p { margin-bottom: var(--space-lg); }
.comment-form label {
display: block;
margin-bottom: var(--space-xs);
font-family: var(--font-mono);
font-size: var(--step--1);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--jade-400);
}
.comment-form .required { color: var(--amber-400); }
.comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.comment-form-cookies-consent label {
margin: 0;
font-family: var(--font-sans);
font-size: var(--step--1);
letter-spacing: normal;
text-transform: none;
color: var(--text-500);
}
.comment-form-cookies-consent input[type="checkbox"] { accent-color: var(--jade-400); margin-top: 0.25em; }
.comment-form .form-submit { margin-bottom: 0; }
.comment-navigation .nav-links { display: flex; gap: var(--space-md); }
/* ============================================================
9 · Empty states — no results, no posts, 404
============================================================ */
.blog-empty {
max-width: 46rem;
padding: var(--space-xl);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.blog-empty .lede { margin-bottom: var(--space-lg); }
.blog-empty__chips { list-style: none; margin: var(--space-lg) 0 0; padding: 0; }
.blog-empty__chips a.chip,
.error-topics a.chip { color: var(--text-300); }
.blog-empty__chips a.chip:hover,
.error-topics a.chip:hover {
color: var(--text-100);
border-color: var(--jade-700);
background: var(--surface-raised);
}
.blog-empty__actions { margin: var(--space-lg) 0 0; }
.error-topics { margin-top: var(--space-xl); }
.error-topics .eyebrow { margin-bottom: var(--space-md); }
.error-topics ul { list-style: none; margin: 0; padding: 0; }
.error-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
margin-top: var(--space-xl);
}
/* ============================================================
10 · Responsive + reduced motion
Breakpoints match the design source's own (components.css:713, :717) so
the blog surface never reflows at a width nothing else does.
============================================================ */
@media (max-width: 720px) {
.trending-grid--blog { grid-template-columns: 1fr; }
.post-nav .nav-next { text-align: left; }
.entry-content > .alignwide { width: auto; margin-inline: 0; }
.comment-list .children { padding-left: var(--space-md); }
.comment-respond { padding: var(--space-lg); }
.entry-content blockquote,
.entry-content .wp-block-quote { padding-inline: var(--space-lg); }
}
/* base.css:162-185 already neutralises every motion the design source ships.
These are the only NEW transforms this file adds, so they are neutralised
here on the same terms. */
@media (prefers-reduced-motion: reduce) {
.post-nav .nav-previous a:hover,
.post-nav .nav-next a:hover,
.search-form .search-submit:hover,
.wp-block-search__button:hover,
.comment-form .comment-form__submit:hover,
.comment-form input[type="submit"]:hover,
.entry-content .wp-block-button__link:hover,
.entry-content .wp-element-button:hover { transform: none !important; }
}
/* === T-ABOUT === */
/* ============================================================
Mindset Plus — About surface (P3, team T-ABOUT) — HISTORICAL
Scope was template-about.php · template-parts/about/*
This block held the six inline `style=` declarations lifted verbatim
off the OLD about.html onto `.mp-about-*` / `.mp-chapter__chips`
classes (REDESIGN-IMPLEMENTATION-PLAN §5.9).
2026-09-01 · FEAT-017 reconciliation — every one of those selectors was
grepped against the nine bundle pages and none survive: the approved
about.html rewrite renders the page hero as `.preview-about-hero` /
`.preview-accent` (styled by the new assets/css/preview.css and
assets/css/legibility.css, both added to MP_STYLES by this run) with no
inline styles at all, and the chapter-04 chip row it once padded is
gone from the new page structure. The four rule declarations that used
to sit below this comment were removed rather than carried forward
dead. Kept as a historical marker so a future append does not reuse
the `.mp-about-*` prefix for something unrelated.
NOT converted, deliberately, back when this block was written: the
`#duo-neuraltech`