/* baguettebox-css */
/*!
* baguetteBox.js
* @author feimosi
* @version 1.12.0
* @url https://github.com/feimosi/baguetteBox.js
*/#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}
/* wpaq-footer-copyright */
/* ==========================================================================
Footer copyright suppression
--------------------------------------------------------------------------
Enqueued by wpaq_neve_hide_neve_footer_copyright_css() in
functions.php, which bails when Neve Pro is defined. Was injected with
wp_add_inline_style( 'chld_thm_cfg_child', ... ) until 2026-09-13.
Belt-and-braces with wpaq_neve_disable_default_footer_credit() in the
same file, which removes the credit filter outright.
========================================================================== */
.footer--row-inner .builder-item.cr,
.footer--row-inner .builder-item--footer_copyright { display: none !important; }
/* wpaq-author-biography */
/* ==========================================================================
Author biography — stand-in for the Neve Pro component
--------------------------------------------------------------------------
Enqueued by wpaq_neve_author_biography_styles() in functions.php, which
bails when Neve Pro is active or the request is not a singular post. Was
injected with wp_add_inline_style( 'chld_thm_cfg_child', ... ) until
2026-09-13.
Enqueued at priority 13: the inline block attached to the child stylesheet's
handle, so it printed before wpaq-app.css. Keep it there.
========================================================================== */
.nv-author-biography{margin:40px 0;--avatarsize:96px;--borderradius:0;--authorcontentalign:left}
.nv-author-biography.nv-is-boxed{background:var(--nv-light-bg,#f2f2f2);color:var(--nv-text-color,inherit);padding:30px}
.nv-author-elements-wrapper{display:grid;grid-template-columns:1fr;grid-gap:20px;grid-auto-flow:dense;align-items:center}
.nv-author-elements-wrapper .nv-author-bio-name{margin-bottom:15px}
.nv-author-elements-wrapper a{color:var(--color,inherit);font-weight:600}
.nv-author-elements-wrapper p{margin:0}
.nv-author-elements-wrapper img{border:1px solid var(--nv-light-bg);background-color:#fff;padding:2px;border-radius:48px;width:96px!important;height:96px!important;object-fit:cover;justify-self:var(--authorcontentalign,center)}
.nv-author-elements-wrapper .nv-author-bio-text-wrapper{text-align:var(--authorcontentalign,left)}
.nv-author-elements-wrapper .nv-author-bio-link{margin-top:15px;display:block}
@media (min-width:960px){.nv-author-elements-wrapper{grid-template-columns:auto auto}.nv-author-elements-wrapper.center{grid-template-columns:1fr}.nv-author-elements-wrapper.center img{margin:0 auto}.nv-author-elements-wrapper.right img{grid-column:2}}
/* wpaq-sticky-header */
/* ==========================================================================
Sticky header — stand-in for the Neve Pro component
--------------------------------------------------------------------------
Enqueued by wpaq_neve_enqueue_sticky_header_assets() in functions.php,
which bails when Neve Pro is active. Was injected with
wp_add_inline_style( 'chld_thm_cfg_child', ... ) until 2026-09-13.
Enqueued at priority 14, BEFORE wpaq-app.css, which is where the inline block
used to print. Order matters here: wpaq-app.css styles `.hfg_header` too, and
it is meant to win on ties.
The `#wpadminbar` rule was injected against the `admin-bar` handle. It is
folded in here because it exists solely to lift the admin bar above the
`z-index: 99999` set below; with no admin bar present it matches nothing.
========================================================================== */
.hfg_header{width:100%;z-index:99999}
.hfg_header .header--row{height:auto;transition:height .2s ease-out;-webkit-transition:height .2s ease-out}
.hfg_header .header--row.is_sticky_on_scroll{height:0;overflow:hidden}
.hfg_header.is-stuck.has-sticky-rows--mobile .header--row:not(.is_sticky){overflow:hidden;height:0}
.hfg_header.is-stuck.has-sticky-rows--mobile .is_sticky_on_scroll{overflow:visible}
.sticky-header-placeholder{transition:height .2s ease-out 2ms;-webkit-transition:height .2s ease-out 2ms}
.hfg_header.has-sticky-rows--mobile{position:fixed}
@media (min-width:960px){
.hfg_header.has-sticky-rows--desktop{position:fixed}
.hfg_header.neve-transparent-header:not(.has-sticky-rows--desktop){position:absolute}
.hfg_header:not(.has-sticky-rows--desktop):not(.neve-transparent-header){position:static}
.hfg_header:not(.has-sticky-rows--desktop):not(.neve-transparent-header) .sticky-header-placeholder{display:none}
.hfg_header:not(.has-sticky-rows--desktop):not(.neve-transparent-header).is-stuck .header--row:not(.is_sticky){overflow:initial;max-height:initial}
.is-stuck.has-sticky-rows--desktop .header--row:not(.is_sticky){overflow:hidden;height:0}
.is-stuck.has-sticky-rows--desktop .is_sticky_on_scroll{overflow:visible}
.header .neve-transparent-header.has-sticky-rows--desktop:not(.is-stuck) .header--row,.header .neve-transparent-header:not(.has-sticky-rows--desktop) .header--row{--bgcolor:transparent;--bgimage:none;--overlaycolor:transparent}
.header .neve-transparent-header.has-sticky-rows--desktop:not(.is-stuck){box-shadow:none}
}
#wpadminbar{z-index:100001}
/* wpaq-app-theme */
/* Self-hosted webfonts — mirrors the wpaq.com app (Inter + IBM Plex Mono).
Generated from Google Fonts; latin + latin-ext subsets only. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/inter-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/inter-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/blog/wp-content/themes/neve-child-wpaq/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ==========================================================================
WPAQ blog — app-aligned theme layer
--------------------------------------------------------------------------
Makes /blog share one visual language with the wpaq.com app.
Token source of truth: wpaq/frontend/app/globals.css (:root) and
wpaq/frontend/tailwind.config.ts, documented in wpaq/docs/DESIGN-SYSTEM.md
(§3 tokens, §4 global chrome, §5 components). The font stack matches the
app build (commit 7abcaf1): Inter for display + UI, IBM Plex Mono for
meta/numerics.
Light-only: the WPAQ app ships no dark mode, so neither does this
layer. Do not add prefers-color-scheme or [data-neve-theme] token
blocks — the palette switch is disabled and dark mode was removed
2026-09-13. The night-family tokens below are chrome (header,
footer, tooltips), not a dark theme.
Scope: child theme only (neve-child-wpaq). The parent Neve theme and the
blog's content are untouched. Loaded after Neve + child styles so these
rules win at equal specificity; `:root:root` is used where Neve sets the
same variable from the Customizer.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens — mirrors the app's :root
-------------------------------------------------------------------------- */
:root {
/* Surfaces */
--wpaq-surface-page: #f7f9fc;
--wpaq-surface-elevated: #ffffff;
--wpaq-surface-sunken: #eef2f7;
/* Ink */
--wpaq-ink: #1a2b3c;
--wpaq-ink-muted: #5b6a7f;
--wpaq-ink-subtle: #94a3b8;
/* Lines */
--wpaq-border: #e2e8f0;
--wpaq-border-strong: #cbd5e1;
/* Chrome */
--wpaq-night: #0f1a24;
--wpaq-on-night: #ffffff;
--wpaq-on-night-muted: rgba(255, 255, 255, 0.65);
--wpaq-on-night-line: rgba(255, 255, 255, 0.1);
/* Brand */
--wpaq-brand: #4a90e2;
--wpaq-brand-hover: #3a7bc8;
--wpaq-brand-light: #c6e2ff;
--wpaq-brand-mid: #7fb4ff;
/* Text-link colours. --wpaq-brand (#4a90e2) is a FILL colour: as text it is
3.12:1 on the page surface, 3.29:1 on white and 2.93:1 on a sunken panel, all
below the WCAG AA 4.5:1 floor. These two are the same hue and saturation
stepped darker in lightness. Link TEXT must use one of these; --wpaq-brand
stays for fills (buttons, focus borders, pill backgrounds). */
--wpaq-link: #206eca;
/* Hover, and any link text sitting on a tinted surface. */
--wpaq-link-strong: #1a5ba7;
/* Foreground for --wpaq-brand-light pills. That background is deliberately
mode-independent (it is NOT overridden in §9), so this must be too: using
the themed --wpaq-link-strong here made the category pill's text resolve to
#c6e2ff in dark mode, i.e. identical to its own background. */
--wpaq-on-brand-light: #1a5ba7;
/* Semantic */
--wpaq-good: #487e1d;
--wpaq-good-bg: #f0fdf4;
--wpaq-warn: #b86504;
--wpaq-warn-bg: #fffbeb;
--wpaq-bad: #990000;
--wpaq-bad-bg: #fef2f2;
--wpaq-info: #4a90e2;
--wpaq-info-bg: #eff6ff;
/* Radius, shadow, focus */
--wpaq-radius-sm: 6px;
--wpaq-radius-md: 10px;
--wpaq-radius-lg: 14px;
--wpaq-shadow-panel: 0 1px 2px rgba(15, 26, 36, 0.06);
--wpaq-shadow-focus: 0 0 0 3px rgba(74, 144, 226, 0.25);
/* Motion (§8 — stillness first) */
--wpaq-motion-fast: 90ms;
--wpaq-motion-base: 150ms;
/* Type */
--wpaq-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--wpaq-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Layout */
--wpaq-content-max: 72.5rem;
--wpaq-prose-max: 48rem;
--wpaq-header-height: 3.75rem;
--wpaq-gutter: 1rem;
}
@media (max-width: 639px) {
:root {
--wpaq-gutter: 0.75rem;
}
}
/* --------------------------------------------------------------------------
2. Map app tokens onto Neve's Customizer variables
-------------------------------------------------------------------------- */
:root:root {
/* Brand palette */
--nv-site-bg: var(--wpaq-surface-page);
--nv-text-color: var(--wpaq-ink);
--nv-primary-accent: var(--wpaq-link);
--nv-secondary-accent: var(--wpaq-brand-hover);
--nv-light-bg: var(--wpaq-surface-sunken);
--nv-dark-bg: var(--wpaq-night);
--nv-text-dark-bg: var(--wpaq-on-night);
--nv-c-1: var(--wpaq-ink-muted);
--nv-c-2: var(--wpaq-link);
--nv-fallback-ff: var(--wpaq-font-sans);
/* Type family — Neve appends --nv-fallback-ff after this value */
--bodyfontfamily: "Inter";
--headingsfontfamily: "Inter";
--bodyfontweight: 400;
--bodyfontsize: 1rem;
--bodylineheight: 1.55;
--bodyletterspacing: 0;
--bodytexttransform: none;
/* Type scale (§3.6) */
--h1fontsize: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
--h1fontweight: 600;
--h1lineheight: 1.15;
--h1letterspacing: -0.01em;
--h1texttransform: none;
--h2fontsize: 1.5rem;
--h2fontweight: 600;
--h2lineheight: 1.25;
--h2letterspacing: -0.005em;
--h2texttransform: none;
--h3fontsize: 1.125rem;
--h3fontweight: 600;
--h3lineheight: 1.35;
--h3letterspacing: 0;
--h3texttransform: none;
--h4fontsize: 1rem;
--h4fontweight: 600;
--h4lineheight: 1.4;
--h4texttransform: none;
--h5fontsize: 0.875rem;
--h5fontweight: 600;
--h5lineheight: 1.45;
--h5texttransform: none;
--h6fontsize: 0.75rem;
--h6fontweight: 600;
--h6lineheight: 1.3;
--h6texttransform: none;
/* Layout — one token drives every page width (§3.4) */
--container: var(--wpaq-content-max);
/* Buttons (§5.1) */
--primarybtnbg: var(--wpaq-brand);
--primarybtncolor: #fff;
--primarybtnhoverbg: var(--wpaq-brand-hover);
--primarybtnhovercolor: #fff;
--primarybtnborderwidth: 0;
--primarybtnborderradius: var(--wpaq-radius-md);
--primarybtnpadding: 0.625rem 1.125rem;
--primarybtnshadow: none;
--secondarybtnbg: transparent;
--secondarybtncolor: var(--wpaq-ink);
--secondarybtnborderwidth: 1px;
--secondarybtnborderradius: var(--wpaq-radius-md);
/* Deliberately no calculation function here. Autoptimize aggregates this file
(wp-config sets AUTOPTIMIZE_CACHEFILE_PREFIX='blade_') and its CSS minifier
loses sync whenever that function appears anywhere in the file, silently
dropping the next ~600 bytes of output — which is what had been eating the
footer rules. These are the former 0.625rem-minus-1px / 1.125rem-minus-1px
values with the border compensation dropped. No secondary button renders on
the blog, so nothing changes visually today. See wordpress-themes/README.md
before reintroducing arithmetic to this file. */
--secondarybtnpadding: 0.625rem 1.125rem;
--btnfontweight: 600;
/* Form controls (§5.11) */
--formfieldbordercolor: var(--wpaq-border);
--formfieldborderwidth: 1px;
--formfieldborderradius: var(--wpaq-radius-md);
--formfieldpadding: 0.625rem 0.875rem;
--formfieldfontsize: 1rem;
}
@media (min-width: 576px) {
:root:root {
--container: var(--wpaq-content-max);
}
}
@media (min-width: 960px) {
:root:root {
--container: var(--wpaq-content-max);
}
}
/* --------------------------------------------------------------------------
3. Base
-------------------------------------------------------------------------- */
body {
background-color: var(--wpaq-surface-page);
color: var(--wpaq-ink);
font-family: var(--wpaq-font-sans);
font-size: 1rem;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--wpaq-font-sans);
color: var(--wpaq-ink);
}
/* The reading surface stops short of the footer.
Archives end on the pagination and posts end on the author bio or the comment
list; both were landing exactly on the night band's top edge (measured: the
pagination's bottom and the footer's top were the same pixel), which made the
pagination read as part of the footer rather than as the end of the list.
Padding, not margin, because a margin on main would collapse through to the
footer and buy nothing. */
.neve-main {
padding-bottom: 2.5rem;
}
/* App focus ring (§3.5 --shadow-focus) */
:focus-visible {
outline: 2px solid var(--wpaq-brand);
outline-offset: 2px;
}
/* Content links — brand, hover darkens */
.entry-content a:not(.wp-block-button__link):not([class*="button"]),
.nv-content-wrap a:not(.wp-block-button__link):not([class*="button"]),
article .entry-content a {
color: var(--wpaq-link);
text-decoration-color: color-mix(in srgb, var(--wpaq-link) 40%, transparent);
text-underline-offset: 2px;
transition: color var(--wpaq-motion-fast) ease;
}
.entry-content a:hover,
.nv-content-wrap a:hover {
color: var(--wpaq-link-strong);
}
/* Prose measure (§3.4 --site-prose-max, 60–68 characters) */
.single-post .entry-content,
.page .entry-content {
max-width: var(--wpaq-prose-max);
}
/* Neve colour presets resolve through the --nv-* tokens remapped in §2, so a
block carrying e.g. both `has-nv-light-bg-background-color` and
`has-nv-c-1-background-color` can end up with a dark preset background and
equally dark inherited text. Neve ships these with `!important`, so the
remap needs it too. Pin every nv preset to an app token with readable text. */
.has-nv-light-bg-background-color,
.has-nv-c-1-background-color,
.has-nv-site-bg-background-color,
.has-nv-c-2-background-color {
background-color: var(--wpaq-surface-sunken) !important;
color: var(--wpaq-ink) !important;
}
.has-nv-dark-bg-background-color,
.has-nv-text-dark-bg-background-color {
background-color: var(--wpaq-night) !important;
color: var(--wpaq-on-night) !important;
}
.has-nv-light-bg-color,
.has-nv-c-1-color {
color: var(--wpaq-ink-muted) !important;
}
.has-nv-site-bg-color {
color: var(--wpaq-ink) !important;
}
.has-nv-c-2-color {
color: var(--wpaq-link) !important;
}
.has-nv-dark-bg-color {
color: var(--wpaq-night) !important;
}
.has-nv-text-dark-bg-color {
color: var(--wpaq-on-night) !important;
}
.has-nv-light-bg-border-color,
.has-nv-c-1-border-color {
border-color: var(--wpaq-border) !important;
}
/* --------------------------------------------------------------------------
4. Header — app chrome: night bar, white nav, brand-mid hover (§4.1)
-------------------------------------------------------------------------- */
.hfg_header .header-top,
.hfg_header .header-main,
.hfg_header .header-bottom {
--bgcolor: var(--wpaq-night);
--color: var(--wpaq-on-night);
--rowbcolor: var(--wpaq-on-night-line);
}
/* Flat bar — no Neve drop shadow; hairline under the whole header */
.hfg_header.site-header {
box-shadow: none;
}
.hfg_header .header--row-inner {
background-color: transparent;
}
.hfg_header .header-top {
border-bottom: 1px solid var(--wpaq-on-night-line);
}
/* Nav + header links */
.hfg_header .header--row a,
.hfg_header .header--row .nv-icon,
.hfg_header .header--row .toggle-palette,
.hfg_header .header--row .toggle-palette .icon,
.hfg_header .header--row .nv-search {
color: var(--wpaq-on-night);
fill: currentColor;
transition: color var(--wpaq-motion-fast) ease;
}
.hfg_header .header--row a:hover,
.hfg_header .header--row a:focus-visible,
.hfg_header .header--row .nv-icon:hover,
.hfg_header .header--row .toggle-palette:hover {
color: var(--wpaq-brand-mid);
}
/* Primary menu — sentence case, calm spacing, brand-mid active state.
Desktop list only: the mobile header renders a SEPARATE list
(`.primary-menu-ul.menu-mobile`) that Neve sizes at 0.9em. Sizing that one at
15px overflowed 390px by ~26px, wrapping the five categories onto two rows
and making the sticky header taller on phones. */
.hfg_header .primary-menu-ul.menu-desktop > li > .wrap > a {
font-family: var(--wpaq-font-sans);
font-size: 0.9375rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
padding: 0.25rem 0;
}
.hfg_header .nav-menu-primary.style-border-bottom .primary-menu-ul > li > .wrap > a::after,
.hfg_header .primary-menu-ul > li > .wrap > a::after {
background-color: var(--wpaq-brand-mid);
}
.hfg_header .primary-menu-ul > li.current-menu-item > .wrap > a,
.hfg_header .primary-menu-ul > li.current-menu-ancestor > .wrap > a,
.hfg_header .primary-menu-ul > li.current_page_item > .wrap > a {
color: var(--wpaq-brand-mid);
}
/* Brand lockup — mirrors the app header: a 32px mark followed by the
"WPAQ.com" wordmark in Inter, gap 0.625rem (app: `gap-2.5`), 22px (app:
`text-[22px]`), leading-none.
The wordmark is generated here rather than rendered as real text because
Neve's logo component emits its site-title variant as
on the blog home, which would collide with the archive H1 the child theme
already prints. The link keeps `aria-label="WPAQ.com …"` either way. */
.hfg_header .builder-item--logo {
--maxwidth: 32px; /* Neve applies this to .site-logo img only */
}
.hfg_header .site-logo .brand {
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.hfg_header .site-logo img {
width: 32px;
height: 32px;
max-width: 32px;
max-height: 32px;
object-fit: contain;
}
.hfg_header .site-logo .brand::after {
content: "WPAQ.com";
font-family: var(--wpaq-font-sans);
font-size: 1.375rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
color: var(--wpaq-on-night);
white-space: nowrap;
}
@media (max-width: 639px) {
/* Mirrors the app's `sm:hidden` — the app shows "WPAQ" below 640px and
"WPAQ.com" at and above it. */
.hfg_header .site-logo .brand::after {
content: "WPAQ";
font-size: 1.25rem;
}
}
/* Search / mobile-menu dropdown panels stay light surfaces */
.hfg_header .nv-nav-search,
.hfg_header .header-menu-sidebar-bg {
--bgcolor: var(--wpaq-surface-elevated);
--color: var(--wpaq-ink);
background-color: var(--wpaq-surface-elevated);
border-radius: var(--wpaq-radius-md);
box-shadow: var(--wpaq-shadow-panel);
}
.hfg_header .nv-nav-search .search-field {
background: var(--wpaq-surface-elevated);
border: 1px solid var(--wpaq-border);
border-radius: var(--wpaq-radius-md);
color: var(--wpaq-ink);
}
/* --------------------------------------------------------------------------
5. Footer — the app's footer, ported one-to-one
--------------------------------------------------------------------------
Mirrors components/Footer.tsx in the wpaq app: one night band, a brand column
beside four link columns, then a bottom rule. Markup comes from
wpaq_render_footer() in functions.php, which removes Neve's HFG footer, so
none of the old .footer-main / .widget rules apply any more.
Breakpoints are the app's Tailwind ones: sm 640, lg 1024, xl 1280. The app
runs five columns; here Resources and Company share one (see
.wpaq-footer__col--stacked), so the grid is brand plus three and at xl it
becomes `1.3fr repeat(3, minmax(0,1fr))` with the brand column unwrapping
from its span.
-------------------------------------------------------------------------- */
.wpaq-footer {
border-top: 1px solid var(--wpaq-on-night-line);
background-color: var(--wpaq-night);
color: var(--wpaq-on-night);
}
.wpaq-footer__inner {
margin-inline: auto;
max-width: var(--wpaq-content-max);
padding: 3.5rem var(--wpaq-gutter);
}
.wpaq-footer__grid {
display: grid;
gap: 2.5rem;
}
.wpaq-footer__grid > * {
min-width: 0;
}
@media (min-width: 640px) {
.wpaq-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wpaq-footer__brand {
grid-column: span 2;
}
}
@media (min-width: 1024px) {
.wpaq-footer__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wpaq-footer__brand {
grid-column: span 3;
}
}
@media (min-width: 1280px) {
.wpaq-footer__grid {
grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr));
}
.wpaq-footer__brand {
grid-column: auto;
}
}
/* Brand column ------------------------------------------------------------ */
.wpaq-footer__lockup {
display: inline-flex;
align-items: center;
gap: 0.625rem;
color: var(--wpaq-on-night);
font-size: 1.125rem;
letter-spacing: -0.025em;
text-decoration: none;
}
.wpaq-footer__lockup img {
display: block;
width: 32px;
height: 32px;
}
.wpaq-footer__pillars {
margin: 1rem 0 0;
color: var(--wpaq-brand-mid);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
/* The app's BrandPillars carries Tailwind's `uppercase` alongside
text-[11px] font-medium tracking-[0.2em]; this port had dropped it.
Transformed in CSS rather than shouted in the markup, so the DOM keeps
"Watch / Probe / Analyze / Quantify" for screen readers and search. */
text-transform: uppercase;
}
.wpaq-footer__pillars span {
color: rgba(255, 255, 255, 0.35);
}
.wpaq-footer__desc {
margin: 0.75rem 0 0;
max-width: 24rem;
color: var(--wpaq-on-night-muted);
font-size: 0.875rem;
line-height: 1.625;
}
.wpaq-footer__mail {
margin: 1rem 0 0;
font-family: var(--wpaq-font-mono);
font-size: 0.875rem;
}
.wpaq-footer__mail a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--wpaq-on-night-muted);
text-decoration: none;
}
.wpaq-footer__mail a:hover,
.wpaq-footer__mail a:focus-visible {
color: var(--wpaq-on-night);
}
.wpaq-footer__note {
margin: 0.5rem 0 0;
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
}
/* Link columns ------------------------------------------------------------ */
/* The column title is a
, not an
: it labels a navigation list rather
than a content section, and the extra H2s polluted the page outline that
the audit flagged. The h2 selector is kept for cached markup. */
.wpaq-footer__col h2,
.wpaq-footer__col .wpaq-footer__title {
margin: 0;
color: rgba(255, 255, 255, 0.4);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.wpaq-footer__col ul {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 1rem 0 0;
padding: 0;
list-style: none;
}
.wpaq-footer__col a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--wpaq-on-night-muted);
font-size: 0.875rem;
text-decoration: none;
transition: color var(--wpaq-motion-fast) ease;
}
.wpaq-footer__col a:hover,
.wpaq-footer__col a:focus-visible {
color: var(--wpaq-brand-mid);
}
.wpaq-footer__col svg {
flex-shrink: 0;
opacity: 0.7;
}
/* Two groups in one column (Company over Resources). The gap matches the grid's
own gap so the vertical rhythm between them reads like the column gutter. */
.wpaq-footer__col--stacked {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
/* Bottom rule ------------------------------------------------------------- */
.wpaq-footer__bottom {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 3rem;
border-top: 1px solid var(--wpaq-on-night-line);
padding-top: 1.5rem;
color: rgba(255, 255, 255, 0.4);
font-size: 0.75rem;
}
.wpaq-footer__bottom p {
margin: 0;
}
@media (min-width: 640px) {
.wpaq-footer__bottom {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
/* --------------------------------------------------------------------------
6. Post list — app cards: white surface, border, radius-lg, panel shadow
-------------------------------------------------------------------------- */
.posts-wrapper > article.nv-non-grid-article {
margin-bottom: 1.5rem;
}
.posts-wrapper > article > .article-content-col {
background-color: var(--wpaq-surface-elevated);
border: 1px solid var(--wpaq-border);
border-radius: var(--wpaq-radius-lg);
box-shadow: var(--wpaq-shadow-panel);
padding: 1.25rem;
transition: border-color var(--wpaq-motion-base) ease,
box-shadow var(--wpaq-motion-base) ease;
}
.posts-wrapper > article > .article-content-col:hover {
/* The panel shadow stays constant. The app signals a card-link with its
border instead — `a.home-sample-report-link` transitions border-color and
box-shadow but only ever changes the border, tinting it brand-mid. A heavier
shadow here (0 2px 6px at 8%, four times the blur) was a local invention,
and it is what made a long archive read as heavy: fifteen cards each
darkening under the cursor. Brand-mid also keeps the card's one interactive
cue inside the One Voice Rule, which a neutral grey border did not. */
border-color: color-mix(in srgb, var(--wpaq-brand-mid) 45%, transparent);
}
/* Thumbnails sit flush inside the card */
.nv-post-thumbnail-wrap img {
border-radius: var(--wpaq-radius-sm);
border: 1px solid var(--wpaq-border);
object-fit: cover;
}
/* Post titles */
.blog-entry-title.entry-title,
.blog-entry-title {
font-family: var(--wpaq-font-sans);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.005em;
text-transform: none;
margin-bottom: 0.75rem;
}
.blog-entry-title a {
color: var(--wpaq-ink);
transition: color var(--wpaq-motion-fast) ease;
}
.blog-entry-title a:hover,
.blog-entry-title a:focus-visible {
color: var(--wpaq-link);
}
/* Meta line — mono, muted, sentence case (§3.6 meta role) */
.nv-meta-list {
font-family: var(--wpaq-font-mono);
font-size: 0.75rem;
letter-spacing: 0.01em;
color: var(--wpaq-ink-muted);
text-transform: none;
margin-bottom: 0;
}
.nv-meta-list li,
.nv-meta-list span,
.nv-meta-list time {
font-family: var(--wpaq-font-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--wpaq-ink-muted);
}
.nv-meta-list a {
color: var(--wpaq-ink-muted);
text-decoration: none;
transition: color var(--wpaq-motion-fast) ease;
}
.nv-meta-list a:hover {
color: var(--wpaq-link);
}
/* Category term as a brand-light pill (§5.4 pill treatment) */
.nv-meta-list li.meta.category a {
background-color: var(--wpaq-brand-light);
color: var(--wpaq-on-brand-light);
border-radius: var(--wpaq-radius-sm);
padding: 0.1rem 0.45rem;
font-weight: 600;
text-decoration: none;
}
.nv-meta-list li.meta.category a:hover {
background-color: var(--wpaq-brand-mid);
color: var(--wpaq-night);
}
.nv-meta-list li:not(:last-child)::after {
color: var(--wpaq-ink-muted);
padding: 0 0.5rem;
}
/* Single-post byline spacing.
Measured before this rule: 10px above (nothing but the title's own
margin-bottom) and 0px below, so the excerpt sat flush against it. Both gaps
are now 1.5rem.
The top value has to be stated in full, not added on top of the title's
margin: adjacent sibling margins collapse to the larger of the two, so a
0.75rem top margin only moved the gap from 10px to 12px.
The top margin is deliberately larger than the bottom even though they look
equal on paper. Equal 1.5rem box margins still measured 27.5px of clear space
above the byline's ink against 34.5px below it, because the big title's line
box ends tight against its glyphs while the excerpt's first line carries more
leading. 2rem / 1.5rem evens that out to roughly 35px either side of the ink.
Scoped to .nv-title-meta-wrap because archive cards carry the same
.nv-meta-list without that wrapper, and their rhythm was already fine. */
.nv-title-meta-wrap .nv-meta-list {
margin-top: 2rem;
margin-bottom: 1.5rem;
}
.entry-summary {
color: var(--wpaq-ink-muted);
font-size: 0.875rem;
line-height: 1.45;
}
/* Archive heading (uses the child theme's .wpaq-archive-* hooks) */
.wpaq-archive-header {
margin: 0 0 1.5rem;
}
.wpaq-archive-title {
font-family: var(--wpaq-font-sans);
font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--wpaq-ink);
}
/* --------------------------------------------------------------------------
6b. Content media — post images and embeds get the app's frame treatment
(radius + hairline border), mirroring .report-site-preview in the app.
Corners are deliberately tighter than the panel radius (6px vs 14px):
article screenshots read better near-square than as rounded cards.
-------------------------------------------------------------------------- */
.entry-content img,
.nv-content-wrap img,
.entry-content figure img,
.entry-content .wp-block-image img,
.entry-content .gallery-item img,
.entry-content .wp-caption img,
aside#secondary .widget img {
border-radius: var(--wpaq-radius-sm);
border: 1px solid var(--wpaq-border);
}
/* Inline emoji/smiley/avatar images are glyph-sized — never frame those. */
.entry-content img.emoji,
.entry-content img.wp-smiley,
.entry-content img[class*="avatar"] {
border: 0;
border-radius: 0;
}
/* Captions sit below the frame, not on it */
.entry-content figcaption,
.entry-content .wp-caption-text,
.entry-content .wp-block-image figcaption {
border: 0;
border-radius: 0;
margin-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.45;
color: var(--wpaq-ink-muted);
}
/* Embeds (oEmbed / YouTube) get the same rounded frame */
.entry-content iframe,
.entry-content .wp-block-embed iframe,
.entry-content .wp-block-embed__wrapper {
border-radius: var(--wpaq-radius-sm);
overflow: hidden;
}
/* --------------------------------------------------------------------------
6c. Table of contents (easy-table-of-contents)
Two unrelated rules stack up here: the plugin ships `line-height: 2em` on
`#ez-toc-container li/ul`, and Neve's generic `.nv-content-wrap ul
{ margin: 30px 0 }` also matches the TOC's list. Together that gives ~39px
rows for a 13px link plus a 30px gap above and below the list. Reset both
to the app's compact role (§3.6: 0.875rem / 1.45).
-------------------------------------------------------------------------- */
/* Specificity note: Neve styles the container via `div#ez-toc-container`
(1,0,1) and the plugin sizes the title via `div#ez-toc-container
.ez-toc-title{font-size:100%}` (1,1,1), both of which outrank a plain
`#ez-toc-container …`. These selectors intentionally sit above them — the
plugin's own stylesheet is concatenated AFTER this file, so equal specificity
would lose on source order. */
body div#ez-toc-container {
background-color: var(--wpaq-surface-sunken);
border: 1px solid var(--wpaq-border);
border-radius: var(--wpaq-radius-lg);
padding: 1rem 1.125rem;
}
#ez-toc-container .ez-toc-title-container p.ez-toc-title {
font-family: var(--wpaq-font-sans);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wpaq-ink-muted);
margin: 0;
}
#ez-toc-container ul.ez-toc-list {
margin: 0.625rem 0 0;
}
#ez-toc-container ul.ez-toc-list ul {
margin: 0.1875rem 0 0.1875rem 1rem;
}
#ez-toc-container ul.ez-toc-list li {
line-height: 1.5;
}
#ez-toc-container ul.ez-toc-list a.ez-toc-link {
margin: 0;
/* Row pitch = line box + this padding, and the padding is the only gap there
is: consecutive rows sit flush against each other, so the space between two
entries is exactly twice this value. Measured at 5px the pitch was 30.3px
for the 14px entries and they read as cramped; at 8px it is 36.3px, which
still sits under the 39px the plugin's own 2em leading produced and which
was too airy. Nested entries are 13px, so they land at 34.85px. */
padding: 0.5rem 0;
font-family: var(--wpaq-font-sans);
font-size: 0.875rem;
line-height: 1.45;
color: var(--wpaq-link);
}
/* Nested entries keep a smaller size for hierarchy but the SAME link colour —
the indentation already communicates the level, and two tones read as two
different link types. */
#ez-toc-container ul.ez-toc-list ul a.ez-toc-link {
font-size: 0.8125rem;
}
/* ez-toc's own stylesheet used to neutralise the article list rules for its
lists. The server-rendered TOC carries the same class names but nothing
cancelling the 20px top and bottom margins the content styles give every li,
so each row opened to a 44px pitch. Make the link a block as well: on an
inline element vertical padding paints without affecting the line box, which
is why the 8px padding below stopped setting the row height when the plugin
went. 20.3px line box plus 16px padding is the 36.3px pitch arrived at by eye. */
#ez-toc-container ul.ez-toc-list,
#ez-toc-container ul.ez-toc-list li {
margin: 0;
padding: 0;
list-style: none;
}
#ez-toc-container ul.ez-toc-list ul {
margin: 0;
padding-left: 1.25rem;
}
#ez-toc-container ul.ez-toc-list a.ez-toc-link {
display: block;
}
/* Anchor offset for the fixed header: without this a jumped-to heading lands
underneath the site header. This is what ez-toc's own stylesheet used to
supply; the server-rendered TOC emits the same .ez-toc-section anchor spans,
so deep links keep working. */
.ez-toc-section {
scroll-margin-top: 6rem;
}
/* Smooth scrolling for every in-page jump, which is the table of contents links
and the to-top control alike. There is no script doing this: jquery-smooth-
scroll is dequeued in this child theme and Neve's scroll-to-top is off, so the
browser property is both the simplest fix and the one that keeps working
without JavaScript. scroll-margin-top above still applies, so the heading
lands clear of the fixed header. */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
#ez-toc-container ul.ez-toc-list a.ez-toc-link:hover,
#ez-toc-container ul.ez-toc-list a.ez-toc-link:focus-visible {
color: var(--wpaq-link-strong);
}
/* The collapse/expand chip ships a hard-coded grey (#999191) border — align it
to the app's border and radius tokens. */
body div#ez-toc-container .ez-toc-js-icon-con,
body div#ez-toc-container .ez-toc-toggle label {
border: 1px solid var(--wpaq-border);
border-radius: var(--wpaq-radius-sm);
}
/* --------------------------------------------------------------------------
6d. Corners — the app rounds every surface; these legacy elements arrive
square. Sizes follow the app scale: 6px chips/code, 10px callouts,
14px panels.
-------------------------------------------------------------------------- */
/* Inline code, code blocks, and the legacy shortcode chips */
.entry-content pre,
.entry-content code,
.entry-content kbd,
.entry-content span.code,
.entry-content .command-button,
.entry-content .keyboard-button,
.neve-skip-link,
.page-numbers a,
.page-numbers span {
border-radius: var(--wpaq-radius-sm);
}
/* Callout paragraphs — the [note] and [related] shortcodes — plus any
editor block given a background colour */
.entry-content .note-box,
.entry-content .related-links,
.entry-content .has-background,
aside#secondary .has-background {
border-radius: var(--wpaq-radius-md);
}
/* Boxed panels: author bio, comment form, comment bodies */
.nv-is-boxed,
.nv-comment-content {
border-radius: var(--wpaq-radius-lg);
}
/* The title/meta hero variant is a full-bleed band, not a floating panel. */
.nv-is-boxed.nv-title-meta-wrap {
border-radius: 0;
}
/* Back-to-top control — Neve drives its radius from --borderradius */
.scroll-to-top {
--borderradius: var(--wpaq-radius-md);
}
/* --------------------------------------------------------------------------
7. Sidebar — flat. Widgets sit directly on the page surface; no card
background, border, radius or shadow.
-------------------------------------------------------------------------- */
aside#secondary .widget {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 0;
margin-bottom: 2rem;
color: var(--wpaq-ink-muted);
font-size: 0.875rem;
line-height: 1.45;
}
aside#secondary .widget:last-child {
margin-bottom: 0;
}
aside#secondary .widget a {
color: var(--wpaq-link);
}
aside#secondary .widget a:hover {
color: var(--wpaq-link-strong);
}
/* Sticky sidebar widget — replaces q2w3-fixed-widget (155 KB).
The plugin ran its JavaScript implementation (its own use_sticky_position
setting was off), and that repositioning was a measurable layout-shift source
(CLS 0.013 on a post). This is the same behaviour in CSS, using the plugin's
own limits: a 100px top offset. #block-17 is the widget the plugin was
configured to target.
The plugin's max-width of 960px meant "switch off below this width", so the
sticky behaviour belongs at desktop sizes, where the sidebar is a column and
has room to travel. An earlier version of this rule had it backwards, which
is why the widget stopped sticking once the plugin was removed. */
@media (min-width: 961px) {
/* position: sticky can only travel inside its parent, so the parent has to be
taller than the sticky element. Measured here: #block-17 is 315px and
aside#secondary was also 315px -- exactly its own contents -- so the widget
scrolled away with the page while reporting position: sticky. The tall
element is one level up (.nv-sidebar-wrap, ~16,300px), because it is a flex
item of .row and stretches. Making it a column flex container turns
aside#secondary into a stretched flex item too, giving the widget room. */
.nv-sidebar-wrap {
display: flex;
flex-direction: column;
}
aside#secondary {
flex: 1 1 auto;
}
aside#secondary #block-17 {
position: sticky;
top: 100px;
}
/* overflow on an ancestor makes that ancestor the scroll container, which
scopes sticky positioning to it and stops the widget ever reaching the
viewport. Measured on the live page, two ancestors did this: carried
overflow: hidden auto, and .wrapper carried overflow: hidden (Neve's own
rule, which also outranks a plain .wrapper selector). `clip` clips exactly
the same way without creating a scroll container. */
body#neve_body {
overflow-x: clip;
}
div.wrapper {
overflow: clip !important;
}
}
/* The search field stays a filled control — it needs to read as an input
against the page surface now that there is no card behind it. */
aside#secondary .widget .search-field {
background: var(--wpaq-surface-elevated);
border: 1px solid var(--wpaq-border-strong);
border-radius: var(--wpaq-radius-md);
color: var(--wpaq-ink);
min-height: 2.5rem;
}
aside#secondary .widget .search-submit {
background-color: var(--wpaq-brand);
color: #fff;
border-radius: var(--wpaq-radius-md);
}
/* --------------------------------------------------------------------------
8. Buttons & forms (§5.1, §5.11)
-------------------------------------------------------------------------- */
.btn,
.button,
.wp-block-button__link,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
font-family: var(--wpaq-font-sans);
font-weight: 600;
border-radius: var(--wpaq-radius-md);
transition: background-color var(--wpaq-motion-fast) ease,
color var(--wpaq-motion-fast) ease,
border-color var(--wpaq-motion-fast) ease;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
font-family: var(--wpaq-font-sans);
color: var(--wpaq-ink);
background-color: var(--wpaq-surface-elevated);
border: 1px solid var(--wpaq-border);
border-radius: var(--wpaq-radius-md);
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--wpaq-brand);
box-shadow: var(--wpaq-shadow-focus);
outline: none;
}
/* --------------------------------------------------------------------------
9. Responsive — mobile density (§3.4)
-------------------------------------------------------------------------- */
@media (max-width: 639px) {
.posts-wrapper > article > .article-content-col {
padding: 1rem;
}
/* Must match the two-class selector above (`.blog-entry-title.entry-title`
is 0,2,0 and would otherwise win over a bare class here). */
.blog-entry-title.entry-title,
.blog-entry-title {
font-size: 1.25rem;
}
}
/* wpaq-legacy-content */
/* ==========================================================================
Legacy content styles
--------------------------------------------------------------------------
Provenance: Appearance -> Customize -> Additional CSS for the
neve-child-wpaq theme (WordPress post ID 8918). Moved here verbatim on
2026-09-13 so that no blog CSS is injected from the database.
Enqueued at priority 30 in functions.php — i.e. AFTER wpaq-app.css, which is
the position this CSS occupied before: WordPress prints Additional CSS on
wp_head at priority 101, last in the head. Keep it last. `.nv-comment-content`
is declared in both files, and this one is the intended winner.
These rules predate the WPAQ design layer and are load-bearing for the post
shortcodes — [note], [code], [cmdbtn], [btn], [snip], [dwnld], [speak],
[related], [rbin-button] — and for the comment form and ez-toc. They still
reference `--nv-*`, which section 2 of wpaq-app.css maps on to the WPAQ
tokens, so they follow the palette.
Edit values here, never in the Customizer.
========================================================================== */
.comment-content {
flex-grow: 1;
}
.nv-iframe-embed {
position: relative;
padding-bottom: 64.25%;
height: 0;
}
.entry-content h2, .entry-content h3{
margin: 30px 0;
}
.entry-content p{
margin-bottom:0;
margin: 30px 0;
}
.entry-content li{
margin: 20px 0;
}
.nv-comment-header .vcard a {
font-size:80%;
}
.nv-comment-content {
display: block;
background: var(--nv-light-bg);
padding: 10px;
border-left:5px solid var(--nv-primary-accent);
font-size: 90%;
}
@media (min-width: 960px){
.col {
margin: 0;
}
}
.nv-index-posts {
margin-top: 60px;
}
.code{
font-size:0.9em;background:#ddd;padding:3px 5px;color:#000;font-family:monospace;
margin-bottom:10px;
}
.keyboard-button{font-size:0.9em;background:#ddd;padding:3px 5px;color:#000;font-family:monospace;border-style: outset;border-width: 1px 2px 2px 1px;
margin-bottom:10px;
}
.command-button{font-size: 0.9em;font-family: arial;background: #ddd;padding: 0px 8px;color: #000;border: #777 1px solid;border-radius: 3px; font-weight:bold;display: inline-block;
margin-bottom:10px;
}
.download-button{
display:block;
text-align:center;
margin-bottom:30px;
}
.download-button a, .lyte_disclaimer a {background-color:#ffffff;border:1px solid var(--nv-primary-accent);color:var(--nv-primary-accent);padding:8px 0px;font-weight:bold;width:100%;max-width:280px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:5px 0;border-radius:25px;}
.download-button a:hover, .lyte_disclaimer a:hover {border-bottom:none;background-color:var(--nv-primary-accent);color:#fff;border:1px solid var(--nv-primary-accent);}
.note-box{display: block;
background: var(--nv-light-bg);
padding: 10px;
margin: 1em auto;
font-size: 90%;
color: var(--nv-text-color);
border-left:5px solid var(--nv-primary-accent);
}
.related-links{
display: block;
background: var(--nv-light-bg);
padding: 15px;
border-left:5px solid var(--nv-primary-accent);
margin: 2em auto;
font-size: 90%;
}
.tab-item-thumbnail img {
width: 80px;
height: 80px;
float: left;
margin: 0 0.75em 0 0;
}
.tab-item-title a {
color: var(--nv-text-color);
}
.alx-tabs-container ul li {
width: 320px;
font-size: 80%;
padding: 10px 0px;
}
.entry-description {border-bottom:2px solid var(--nv-c-1); line-height: 1.8em;padding-bottom: 10px; text-align: left;font-size:88%}
.nv-title-meta-wrap .neve-breadcrumbs-wrapper {
margin-bottom: 10px;
}
.author-name a{
color: var(--nv-text-color);
}
.category a{
color: var(--nv-text-color);
}
article.nv-non-grid-article a {
color: var(--nv-text-color);
}
.entry-description p {
margin-bottom: 0;
}
#ez-toc-container li, #ez-toc-container ul, #ez-toc-container ul li, .ez-toc-widget-container, .ez-toc-widget-container li{background:0 0;list-style:none;line-height:2em;overflow:hidden;z-index:1;}
div#ez-toc-container ul.ez-toc-list a {
color: var(--nv-primary-accent);
margin: 5px 0;
}
.sticky-footer {
text-align: center;
margin: 0;
width: 100%;
overflow: hidden;
position: fixed;
left: 0;
bottom: 0;
z-index: 99999;
background-color: #00000008;
border-top: 2px solid #b2b2b224;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
overflow: visible;
}
.sticky-footer-close {
cursor: pointer;
color: #b2b2b2;
border: 1px solid #b2b2b2;
background: #fff;
line-height: 20px;
display: inline-block;
font-size: 15px;
font-family: arial,sans-serif;
padding: 0 5px;
position: absolute;
top: 10px;
right: 10px;
}
@media (max-width: 576px) {.sticky-footer-close{display:none;}}
.sticky-footer .fuse-slot {
transform: translate3d(0,0,0);
}
.disclosure {font-size: 12px;line-height: 20px;display: block;border: 1px solid var(--nv-light-bg);padding: 5px;}
.widget-title {
text-align: center;
}
.rank-math-list-item{
padding: 1.0em;
margin: 1.5em 0;
border: 1px solid var(--nv-light-bg);
}
.rank-math-list-item h3{
font-size: 120%;
margin-bottom: 1em;
}
table {
font-size: 90%;
}
td, th {
padding: 20px 10px;
}
.rank-math-answer p {
margin-bottom: 0px;
}
.lL {
text-align: center;
}