/* Neuronym Theme Styles */
:root {
--nrm-color-bg: var(--wp--preset--color--base, #004bb5);
--nrm-color-accent: var(--wp--preset--color--contrast, #ffffff);
--nrm-color-accent-hover: var(--wp--preset--color--hover, rgba(255,255,255,0.6));
--nrm-color-primary: var(--wp--preset--color--contrast, #ffffff);
--nrm-color-text: var(--wp--preset--color--contrast, #ffffff);
--nrm-color-text-muted: rgba(255,255,255,0.9);
--nrm-color-border: var(--wp--preset--color--contrast, #ffffff);
--nrm-color-surface: var(--wp--preset--color--surface, #0f172a);
--nrm-color-header-border: var(--wp--preset--color--contrast, #ffffff);
--nrm-page-bg: var(--wp--preset--color--base, #004bb5);
--nrm-content-width: 720px;
--nrm-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--nrm-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--nrm-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
--nrm-lh-tight: 1.25;
--nrm-lh-normal: 1.6;
--nrm-radius: 6px;
--nrm-radius-lg: 12px;
--nrm-space-xs: 0.25rem;
--nrm-space-sm: 0.5rem;
--nrm-space-md: 1rem;
--nrm-space-lg: 1.5rem;
--nrm-space-xl: 2rem;
--nrm-space-3xl: 4rem;
--nrm-transition: 0.2s ease;
--nrm-heading-weight: 400;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
html:has(.wp-block-navigation__responsive-container.is-menu-open) { background: color-mix(in srgb, var(--nrm-page-bg, var(--wp--preset--color--base)) 40%, #000); }
body {
margin: 0;
font-family: var(--nrm-font-body);
/* mono body size, else the settings base size */
font-size: var(--nrm-font-size-body, var(--wp--preset--font-size--medium));
line-height: var(--nrm-lh-normal);
color: var(--nrm-color-text);
background: var(--nrm-page-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--nrm-color-accent); text-decoration: underline; transition: color var(--nrm-transition), text-decoration var(--nrm-transition); }
/* link hover: palette-driven, defaults to rest color so nothing shifts */
a:hover { color: var(--wp--preset--color--hover-link, var(--nrm-color-accent)); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
/* nav, titles, headings: underline sweeps in on hover only */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-site-title a,
.wp-block-post-title a,
.header-cta,
.wp-block-heading a {
text-decoration: none !important;
}
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-heading a,
.wp-block-navigation .wp-block-navigation-item__label {
background: linear-gradient(currentColor, currentColor) bottom left / 0% 0.06em no-repeat;
padding-bottom: 0.15em;
transition: background-size 0.2s ease;
}
/* sweep + link hover color (palette default is rest color, so invisible unless changed) */
.wp-block-site-title a:hover,
.wp-block-post-title a:hover,
.wp-block-heading a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
color: var(--wp--preset--color--hover-link, inherit);
background-size: 100% 0.06em;
}
/* Submenu: core defaults to white, we need page bg */
@media (min-width: 601px) {
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
background-color: var(--nrm-page-bg) !important;
color: var(--nrm-color-text) !important;
}
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--nrm-color-text) !important;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--nrm-font-heading);
font-weight: var(--nrm-heading-weight);
line-height: var(--nrm-lh-tight);
color: var(--nrm-color-text);
}
p { margin: 0 0 var(--nrm-space-md); }
ul, ol { margin: 0 0 var(--nrm-space-md) var(--nrm-space-lg); padding: 0; }
li { margin-bottom: var(--nrm-space-xs); }
blockquote {
margin: var(--nrm-space-lg) 0;
padding: var(--nrm-space-md) var(--nrm-space-lg);
border-left: 4px solid var(--nrm-color-accent);
background: var(--nrm-color-surface);
border-radius: var(--nrm-radius-lg);
font-style: italic;
color: var(--nrm-color-text);
}
pre {
background: var(--nrm-color-surface);
padding: var(--nrm-space-md);
border-radius: var(--nrm-radius-lg);
overflow-x: auto;
margin: var(--nrm-space-lg) 0;
}
code { font-family: var(--nrm-font-mono); font-size: var(--wp--preset--font-size--small); background: var(--nrm-color-surface); padding: 0.2rem 0.4rem; border-radius: 4px; }
pre code { background: none; padding: 0; }
hr { border: none; height: 1px; background: var(--nrm-color-border); margin: var(--nrm-space-xl) 0; }
/* Accessibility */
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }
.screen-reader-text:focus { background: var(--nrm-color-bg); border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6); clip: auto; color: var(--nrm-color-primary); display: block; font-size: var(--wp--preset--font-size--small); font-weight: 600; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
/* Color inheritance for third-party block content */
.wp-block-heading { color: var(--nrm-color-text); }
/* ---------------------------------------------------------------
* Block styles
* --------------------------------------------------------------- */
/* Buttons */
.wp-element-button,
.wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: var(--wp--preset--font-size--small);
padding: 0.7rem 1.5rem;
border: 1px solid var(--nrm-color-header-border);
border-radius: var(--nrm-radius);
background: transparent;
color: var(--nrm-color-text);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Universal button hover: ghost at rest, solid white + base text on hover/focus */
.wp-element-button:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
background: var(--wp--preset--color--contrast, #ffffff);
color: var(--wp--preset--color--base, #000000);
border-color: var(--wp--preset--color--contrast, #ffffff);
text-decoration: none !important;
}
/* Separator */
.wp-block-separator {
border-color: var(--nrm-color-border);
opacity: 1;
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { max-width: 100px; }
.wp-block-separator.is-style-wide { max-width: none; }
/* Quote */
.wp-block-quote {
border-left: 3px solid var(--nrm-color-primary);
padding-left: 1.5rem;
font-style: italic;
}
.wp-block-quote cite { font-style: normal; font-size: var(--wp--preset--font-size--small); color: var(--nrm-color-text-muted); }
/* Pullquote */
.wp-block-pullquote {
border-top: 3px solid var(--nrm-color-primary);
border-bottom: 3px solid var(--nrm-color-primary);
padding: 2rem 0;
}
.wp-block-pullquote blockquote { border: none; padding: 0; }
/* Columns */
.wp-block-columns { gap: 2rem; }
/* Image */
.wp-block-image figcaption { font-size: var(--wp--preset--font-size--small); color: var(--nrm-color-text-muted); text-align: center; margin-top: 0.5rem; }
/* Gallery */
.wp-block-gallery { gap: 1rem; }
.wp-block-gallery .wp-block-image { overflow: hidden; }
/* Image block styles */
.is-style-nrm-corner-round img { border-radius: 8px; }
/* Table */
.wp-block-table { border-collapse: collapse; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--nrm-color-border); padding: 0.6rem 0.8rem; }
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: var(--nrm-color-surface); }
/* Code & Preformatted */
.wp-block-code { background: var(--nrm-color-surface); border-radius: 4px; padding: 1.5rem; font-family: var(--nrm-font-mono); font-size: var(--wp--preset--font-size--small); }
.wp-block-preformatted { font-family: var(--nrm-font-mono); font-size: var(--wp--preset--font-size--small); background: var(--nrm-color-surface); padding: 1.5rem; border-radius: 4px; }
/* Latest Posts */
.wp-block-latest-posts { padding: 0; list-style: none; }
.wp-block-latest-posts li { margin-bottom: 1rem; }
.wp-block-latest-posts__post-title { font-family: var(--nrm-font-heading); font-weight: 600; color: var(--nrm-color-primary); }
.wp-block-latest-posts__post-date { font-size: var(--wp--preset--font-size--small); color: var(--nrm-color-text-muted); }
/* date never wraps mid-string - keeps "March 29, 2026" on one line */
.wp-block-post-date { white-space: nowrap; }
/* Search */
.wp-block-search__inside-wrapper { align-items: center; }
/* CTA outline */
.wp-block-search__button {
background: transparent;
color: var(--nrm-color-text);
border: 1px solid var(--nrm-color-header-border);
border-radius: var(--nrm-radius);
padding: 0.45rem 1.1rem;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
cursor: pointer;
transition: color var(--nrm-transition), border-color var(--nrm-transition);
}
.wp-block-search__button:hover,
.wp-block-search__button:focus-visible {
background: var(--wp--preset--color--contrast, #ffffff);
color: var(--wp--preset--color--base, #000000);
border-color: var(--wp--preset--color--contrast, #ffffff);
}
.wp-block-search__input { background: var(--nrm-color-surface, #0f172a); color: var(--nrm-color-text, var(--wp--preset--color--contrast, #ffffff)); border: none; border-radius: 4px; padding: 0.6rem 0.8rem; }
.wp-block-search__input::placeholder { color: rgba(255,255,255,0.5); }
/* Clear button (little X) - white, dims on hover */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 16px;
width: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 1l12 12M13 1L1 13' stroke='white' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
cursor: pointer;
opacity: 1;
transition: opacity 0.2s ease;
}
input[type="search"]::-webkit-search-cancel-button:hover {
opacity: 0.6;
}
/* ---------------------------------------------------------------
* Header search toggle
* --------------------------------------------------------------- */
/* ---------------------------------------------------------------
* Full-screen search overlay
* --------------------------------------------------------------- */
.header-search-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
color: var(--nrm-color-text);
flex-shrink: 0;
}
.header-search-trigger:focus-visible {
outline: 2px dotted var(--nrm-color-text);
outline-offset: 3px;
}
.header-search-trigger:hover {
color: var(--nrm-color-accent-hover);
}
.search-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--nrm-page-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
}
.search-overlay.active {
opacity: 1;
visibility: visible;
}
.search-overlay-close {
position: absolute;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
color: var(--nrm-color-text, var(--wp--preset--color--contrast));
display: flex;
align-items: center;
justify-content: center;
}
.search-overlay-close svg {
display: none;
}
/* same X as the hamburger - the two must match */
.search-overlay-close::before,
.search-overlay-close::after {
content: "";
position: absolute;
left: 6px;
top: 19px;
width: 28px;
height: 2px;
background: currentColor;
border-radius: 1px;
transform-origin: center;
}
.search-overlay-close::before {
transform: rotate(45deg);
}
.search-overlay-close::after {
transform: rotate(-45deg);
}
.search-overlay-close:hover {
color: var(--nrm-color-accent-hover);
}
.search-overlay-close:focus-visible {
outline: 2px dotted var(--nrm-color-text, var(--wp--preset--color--contrast));
outline-offset: 3px;
}
.search-overlay-form {
display: flex;
align-items: center;
gap: 0.75rem;
width: 80%;
max-width: 700px;
}
.search-overlay-field {
flex: 1;
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
border-radius: var(--nrm-radius);
background: var(--nrm-color-surface, #0f172a);
color: var(--nrm-color-text, #ffffff);
padding: 1rem 1.25rem;
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-family: var(--nrm-font-body);
}
.search-overlay-field::placeholder {
color: rgba(255,255,255,0.5);
}
.search-overlay-field::-webkit-search-cancel-button {
-webkit-appearance: none;
cursor: pointer;
width: 1.5em;
height: 1.5em;
background: none;
position: relative;
}
.search-overlay-field::-webkit-search-cancel-button::before,
.search-overlay-field::-webkit-search-cancel-button::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1.2em;
height: 2px;
background: rgba(255,255,255,0.5);
transform: translate(-50%, -50%) rotate(45deg);
}
.search-overlay-field::-webkit-search-cancel-button::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.search-overlay-field:focus {
outline: none;
border-color: rgba(255,255,255,0.6);
}
.search-overlay-submit {
background: transparent;
color: var(--nrm-color-text, var(--wp--preset--color--contrast, #ffffff));
border: 2px solid var(--nrm-color-header-border, var(--wp--preset--color--contrast, #ffffff));
border-radius: var(--nrm-radius);
padding: 1rem 1.5rem;
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: color 0.2s ease, border-color 0.2s ease;
}
/* Universal button hover - solid white + base text */
.search-overlay-submit:hover,
.search-overlay-submit:focus-visible {
background: var(--wp--preset--color--contrast, #ffffff);
color: var(--wp--preset--color--base, #000000);
border-color: var(--wp--preset--color--contrast, #ffffff);
}
.search-overlay-submit:focus-visible {
outline: 2px dotted var(--wp--preset--color--base, #000000);
outline-offset: 3px;
}
/* ---------------------------------------------------------------
* Header CTA button
* --------------------------------------------------------------- */
/* space-between spreads items out - margin-left:auto is what groups
nav, search, CTA. order flips per breakpoint. */
.wp-block-template-part header .wp-block-navigation {
margin-left: auto;
order: 1;
}
.header-search-trigger {
order: 2;
}
.header-cta {
order: 3;
}
body.nrm-nav-hamburger .header-search-trigger {
order: 1;
margin-left: auto;
}
body.nrm-nav-hamburger .header-cta {
order: 2;
margin-left: 0;
}
body.nrm-nav-hamburger:not(:has(.header-search-trigger)) .header-cta {
margin-left: auto;
}
body.nrm-nav-hamburger .wp-block-template-part header .wp-block-navigation {
order: 3;
margin-left: 0;
}
body.nrm-nav-hamburger:not(:has(.header-search-trigger)):not(:has(.header-cta)) .wp-block-template-part header .wp-block-navigation {
margin-left: auto;
}
.header-cta {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 0.45rem 1.1rem;
background: transparent;
color: var(--nrm-color-text) !important;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
border-radius: var(--nrm-radius);
border: 1px solid var(--nrm-color-header-border);
transition: color var(--nrm-transition), border-color var(--nrm-transition), background var(--nrm-transition);
}
.header-cta:hover,
.header-cta:focus-visible {
background: var(--wp--preset--color--contrast, #ffffff);
color: var(--wp--preset--color--base, #000000) !important;
border-color: var(--wp--preset--color--contrast, #ffffff);
}
/* ---------------------------------------------------------------
* Grid archive layout
* --------------------------------------------------------------- */
.wp-block-post-template[data-layout="grid"] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--nrm-space-lg);
list-style: none;
padding: 0;
}
.wp-block-post-template[data-layout="grid"] > .wp-block-post { padding-top: 0; border-top: none; margin: 0; }
/* ---------------------------------------------------------------
* Masonry archive layout
* --------------------------------------------------------------- */
.wp-block-post-template[data-layout="masonry"] {
columns: 3;
column-gap: var(--nrm-space-lg);
list-style: none;
padding: 0;
}
.wp-block-post-template[data-layout="masonry"] > .wp-block-post {
break-inside: avoid;
margin-bottom: var(--nrm-space-lg);
padding-top: 0;
border-top: none;
}
.wp-block-post-template[data-layout="masonry"] > .wp-block-post > .wp-block-group {
border-bottom: none !important;
}
/* List: thumbnail left, uncropped */
.wp-block-post-template:not([data-layout]) .wp-block-post .wp-block-post-featured-image,
.wp-block-post-template[data-layout="list"] .wp-block-post .wp-block-post-featured-image {
float: left;
max-width: 200px;
margin: 0 var(--nrm-space-lg) var(--nrm-space-sm) 0;
}
/* Float would let the border strip slip under the thumb */
.wp-block-post-template:not([data-layout]) .wp-block-post > .wp-block-group,
.wp-block-post-template[data-layout="list"] .wp-block-post > .wp-block-group {
border-bottom: none !important;
}
.wp-block-post-template:not([data-layout]) .wp-block-post .wp-block-post-featured-image img,
.wp-block-post-template[data-layout="list"] .wp-block-post .wp-block-post-featured-image img {
max-height: 300px;
width: auto;
height: auto;
object-fit: contain;
}
.wp-block-post-template:not([data-layout]) .wp-block-post,
.wp-block-post-template[data-layout="list"] .wp-block-post {
overflow: auto;
}
@media (max-width: 768px) {
.wp-block-post-template[data-layout="grid"] { grid-template-columns: 1fr; }
.wp-block-post-template[data-layout="masonry"] { columns: 1; }
}
/* ---------------------------------------------------------------
* Related posts section
* --------------------------------------------------------------- */
.related-posts { max-width: var(--nrm-content-width); margin: var(--nrm-space-3xl) auto 0; }
.related-posts .section-label { font-size: var(--wp--preset--font-size--small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--nrm-space-md); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--nrm-space-md); }
.related-grid .entry-thumb { border-radius: var(--nrm-radius-lg); overflow: hidden; margin-bottom: var(--nrm-space-sm); }
.related-grid .entry-thumb img { width: 100%; height: auto; }
.related-grid .entry-title { font-size: var(--wp--preset--font-size--medium); font-weight: 600; }
.related-grid .entry-title a { color: var(--nrm-color-text); }
.related-grid .entry-title a:hover { color: var(--nrm-color-accent-hover); text-decoration: underline; }
/* ---------------------------------------------------------------
* Desktop inline navigation
* --------------------------------------------------------------- */
.wp-block-navigation.is-layout-flex { flex-wrap: nowrap !important; --navigation-layout-wrap: nowrap !important; }
.wp-block-navigation .wp-block-navigation__container { flex-wrap: nowrap !important; --navigation-layout-wrap: nowrap !important; }
.wp-block-navigation .wp-block-navigation-item__content { white-space: nowrap; }
.wp-block-navigation__responsive-container-content { flex-wrap: nowrap !important; }
/* Keep header on one line - no wrapping between site title and nav */
.wp-block-template-part header .is-content-justification-space-between.is-layout-flex { flex-wrap: nowrap !important; }
.wp-block-template-part header .wp-block-site-title { white-space: nowrap; flex-shrink: 0; }
.wp-block-template-part header .wp-block-navigation { flex-shrink: 1; min-width: 0; overflow: visible; }
/* ---------------------------------------------------------------
* Responsive navigation breakpoint
* --------------------------------------------------------------- */
@media (max-width: 1100px) {
.wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
.wp-block-navigation__responsive-container:not(.is-menu-open):not(.hidden-by-default) { display: none !important; }
.wp-block-template-part header .wp-block-site-title { flex: 1 1 auto; min-width: 0; }
/* Reorder: search → CTA → hamburger (nav last) */
.header-search-trigger { order: 1; }
.header-cta { order: 2; }
.wp-block-template-part header .wp-block-navigation { order: 3; margin-left: 0; }
}
body.nrm-nav-hamburger .wp-block-navigation__responsive-container-open { display: flex !important; }
body.nrm-nav-hamburger .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
/* ---------------------------------------------------------------
* Navigation overlay (hamburger menu)
* --------------------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: auto;
width: 100%;
max-height: 85vh;
/* core's nav CSS overrides padding - keep ours */
padding: 0 var(--wp--style--root--padding-right, 1.5rem) 2rem !important;
/* menu matches the page - the page dims behind it */
background-color: var(--nrm-page-bg) !important;
color: var(--wp--preset--color--contrast, #ffffff) !important;
border-radius: 0 0 24px 24px;
box-shadow: 0 24px 60px rgba(0,0,0,0.5);
overflow-y: auto;
/* hide internal scrollbar: it eats 15px, shifts close wrapper off
* center relative to header content. Still scrolls. */
scrollbar-width: none;
--navigation-layout-justification-setting: center !important;
--navigation-layout-align: center !important;
--navigation-layout-justify: center !important;
}
.wp-block-navigation__responsive-container.is-menu-open::-webkit-scrollbar {
display: none;
}
/* Dim page content behind mobile menu. Fade in, snap off (menu has no exit anim). */
body:has(.wp-block-navigation__responsive-container.is-menu-open) main {
pointer-events: none;
position: relative;
}
main::after {
content: "";
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 419;
pointer-events: none;
opacity: 0;
}
body:has(.wp-block-navigation__responsive-container.is-menu-open) main::after {
opacity: 1;
transition: opacity 0.25s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
align-items: center !important;
justify-content: center !important;
gap: 1.5rem;
padding: 2rem 1rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
align-items: center !important;
justify-content: center !important;
text-align: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: clamp(1.5rem, 4vw, 2.25rem);
font-weight: 800;
font-family: var(--wp--preset--font-family--heading, inherit);
text-align: center;
color: var(--wp--preset--color--contrast, #ffffff);
text-decoration: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation {
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
align-items: center !important;
}
/* Mobile submenu overrides */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
font-size: clamp(1rem, 3vw, 1.5rem);
font-weight: 600;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
}
/* solid - core's own 0.1s fade/slide would animate here */
.wp-block-navigation__responsive-container.is-menu-open {
animation: none;
}
/* close wrapper: match header content width */
.has-modal-open .wp-block-navigation__responsive-close {
position: relative;
max-width: 1340px !important;
}
/* close button: absolute inside close wrapper, OS-independent */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
position: absolute;
right: 0;
top: calc(var(--wp--preset--spacing--30, 1rem) + 0.34rem);
z-index: 100001;
padding: 0;
color: var(--nrm-color-text);
background: none;
border: none;
cursor: pointer;
width: 28px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
transition: color var(--nrm-transition);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
color: var(--nrm-color-accent-hover);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
display: none;
}
/* close button X */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 28px;
height: 2px;
background: currentColor;
border-radius: 1px;
transform-origin: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::before {
transform: rotate(45deg);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
transform: rotate(-45deg);
}
.wp-block-navigation__responsive-container-overlay { background: rgba(0,0,0,0.7) !important; }
/* hamburger: two lines, fold to down arrow on open */
.wp-block-navigation__responsive-container-open {
position: relative;
width: 28px;
height: 22px;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
color: var(--nrm-color-text);
transition: color var(--nrm-transition);
}
.wp-block-navigation__responsive-container-open:hover {
color: var(--nrm-color-accent-hover);
}
.wp-block-navigation__responsive-container-open svg {
display: none;
}
.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-open::after {
content: "";
position: absolute;
left: 0;
width: 28px;
height: 2px;
background: currentColor;
border-radius: 1px;
transform-origin: center;
transition: transform 0.25s ease, top 0.25s ease;
}
.wp-block-navigation__responsive-container-open::before {
top: 6px;
transform: rotate(0deg);
}
.wp-block-navigation__responsive-container-open::after {
top: 14px;
transform: rotate(0deg);
}
/* open state: fold into down arrow */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::before {
top: 4px;
transform: rotate(40deg);
width: 20px;
left: 1px;
}
body:has(.wp-block-navigation__responsive-container.is-menu-open) .wp-block-navigation__responsive-container-open::after {
top: 4px;
transform: rotate(-40deg);
width: 20px;
left: 7px;
}
/* ---------------------------------------------------------------
* Gallery: masonry via CSS columns when not cropped
* --------------------------------------------------------------- */
.wp-block-gallery:not(.is-cropped) {
display: block !important;
column-gap: var(--wp--preset--spacing--20, 1rem);
}
.wp-block-gallery:not(.is-cropped).columns-1 { columns: 1; }
.wp-block-gallery:not(.is-cropped).columns-2 { columns: 2; }
.wp-block-gallery:not(.is-cropped).columns-3 { columns: 3; }
.wp-block-gallery:not(.is-cropped).columns-4 { columns: 4; }
.wp-block-gallery:not(.is-cropped).columns-5 { columns: 5; }
.wp-block-gallery:not(.is-cropped).columns-6 { columns: 6; }
.wp-block-gallery:not(.is-cropped).columns-7 { columns: 7; }
.wp-block-gallery:not(.is-cropped).columns-8 { columns: 8; }
.wp-block-gallery:not(.is-cropped).columns-default { columns: 3; }
.wp-block-gallery:not(.is-cropped) .wp-block-image {
break-inside: avoid;
margin: 0 0 var(--wp--preset--spacing--20, 1rem) 0 !important;
display: block !important;
width: 100% !important;
flex: none !important;
}
.wp-block-gallery:not(.is-cropped) .wp-block-image img {
width: 100% !important;
height: auto !important;
display: block;
object-fit: cover;
}
@media (max-width: 960px) {
.wp-block-gallery:not(.is-cropped).columns-4,
.wp-block-gallery:not(.is-cropped).columns-5,
.wp-block-gallery:not(.is-cropped).columns-6,
.wp-block-gallery:not(.is-cropped).columns-7,
.wp-block-gallery:not(.is-cropped).columns-8,
.wp-block-gallery:not(.is-cropped).columns-default { columns: 2; }
}
@media (max-width: 600px) {
.wp-block-gallery:not(.is-cropped) { columns: 1 !important; }
}
/* ---------------------------------------------------------------
* Lightbox navigation: large arrows, 50% opacity, big hit targets
* Core sets 40px buttons and 1.5em icons - too small for full-screen.
* --------------------------------------------------------------- */
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next,
.wp-lightbox-overlay .wp-lightbox-close-button {
color: #1a1a1a !important;
font-size: 1.1rem !important;
min-width: 64px !important;
min-height: 64px !important;
opacity: 0.3;
transition: opacity 0.2s ease;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover,
.wp-lightbox-overlay .wp-lightbox-close-button:hover {
opacity: 0.6;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus,
.wp-lightbox-overlay .wp-lightbox-close-button:focus {
opacity: 0.6;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus:not(:hover),
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus:not(:hover),
.wp-lightbox-overlay .wp-lightbox-close-button:focus:not(:hover) {
opacity: 0.3;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev .wp-lightbox-navigation-icon svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next .wp-lightbox-navigation-icon svg {
width: 5em !important;
height: 5em !important;
fill: #1a1a1a !important;
}
.wp-lightbox-overlay .wp-lightbox-close-icon svg {
width: 2.5em !important;
height: 2.5em !important;
fill: #1a1a1a !important;
}
.wp-lightbox-overlay,
.wp-lightbox-overlay .scrim {
background: #f5f5f5 !important;
}
/* Mobile: hide lightbox arrows - swipe to navigate instead.
Close button stays. Prevents arrows from overlapping captions. */
@media (max-width: 600px) {
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
display: none !important;
}
}
/* ---------------------------------------------------------------
* Thumbnail captions: hidden when setting is off
* --------------------------------------------------------------- */
.nrm-hide-thumbnail-captions .wp-block-gallery figcaption {
display: none !important;
}
/* ---------------------------------------------------------------
* Lightbox captions: styled for the light gallery background
* --------------------------------------------------------------- */
.nrm-lightbox-caption {
position: absolute;
color: #1a1a1a;
font-size: 0.95rem;
line-height: 1.5;
z-index: 3000001;
pointer-events: none;
text-align: left;
}
/* ---------------------------------------------------------------
* Comment form
* --------------------------------------------------------------- */
.wp-block-comments input[type="text"],
.wp-block-comments input[type="email"],
.wp-block-comments input[type="url"],
.wp-block-comments textarea {
background: var(--nrm-color-surface);
color: var(--nrm-color-text);
border: none;
border-radius: 4px;
padding: 0.6rem 0.8rem;
width: 100%;
}
.wp-block-comments textarea {
resize: vertical;
min-height: 120px;
}
.wp-block-comments input:focus,
.wp-block-comments textarea:focus {
outline: 2px solid var(--nrm-color-text);
outline-offset: 1px;
box-shadow: 0 0 0 1px var(--nrm-color-bg), 0 0 0 3px var(--nrm-color-text);
}
.wp-block-comments input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--nrm-color-text);
}
.wp-block-comments label {
color: var(--nrm-color-text);
}
/* CTA outline */
.wp-block-comments .wp-block-button__link,
.wp-block-comments button[type="submit"] {
background: transparent;
color: var(--nrm-color-text);
border: 1px solid var(--nrm-color-header-border);
border-radius: var(--nrm-radius);
padding: 0.45rem 1.1rem;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
cursor: pointer;
transition: color var(--nrm-transition), border-color var(--nrm-transition);
}
.wp-block-comments .wp-block-button__link:hover,
.wp-block-comments .wp-block-button__link:focus-visible,
.wp-block-comments button[type="submit"]:hover,
.wp-block-comments button[type="submit"]:focus-visible {
background: var(--wp--preset--color--contrast, #ffffff);
color: var(--wp--preset--color--base, #000000);
border-color: var(--wp--preset--color--contrast, #ffffff);
}
/* WooCommerce: same fields + CTA buttons */
.woocommerce form .form-row .input-text,
.woocommerce-page form .form-row .input-text,
.woocommerce form .form-row textarea.input-text,
.woocommerce-page form .form-row textarea.input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row select {
background: var(--nrm-color-surface, #0f172a);
color: var(--nrm-color-text, #ffffff);
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
border-radius: 4px;
padding: 0.6rem 0.8rem;
font-size: inherit;
}
.woocommerce form .form-row .input-text:focus,
.woocommerce-page form .form-row .input-text:focus,
.woocommerce form .form-row textarea.input-text:focus,
.woocommerce-page form .form-row textarea.input-text:focus {
border-color: rgba(255,255,255,0.6);
outline: none;
}
.woocommerce .quantity .qty {
background: var(--nrm-color-surface, #0f172a);
color: var(--nrm-color-text, #ffffff);
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
border-radius: 4px;
padding: 0.4rem 0.6rem;
min-width: 60px;
text-align: center;
}
/* Show password toggle: white eye, dims on hover */
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
color: var(--nrm-color-text, #ffffff);
transition: opacity 0.2s ease;
}
.woocommerce form .show-password-input:hover,
.woocommerce-page form .show-password-input:hover {
opacity: 0.6;
}
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
background-image: url("data:image/svg+xml,");
}
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
background-image: url("data:image/svg+xml,");
}
/* CTA outline */
.woocommerce .button,
.woocommerce .button.alt {
background: transparent !important;
color: var(--nrm-color-text, #ffffff) !important;
border: 1px solid var(--nrm-color-header-border, #ffffff) !important;
border-radius: var(--nrm-radius);
padding: 0.45rem 1.1rem !important;
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease;
}
.woocommerce .button:hover,
.woocommerce .button:focus-visible,
.woocommerce .button.alt:hover,
.woocommerce .button.alt:focus-visible {
background: var(--wp--preset--color--contrast, #ffffff) !important;
color: var(--wp--preset--color--base, #000000) !important;
border-color: var(--wp--preset--color--contrast, #ffffff) !important;
opacity: 1;
text-decoration: none !important;
}
/* Notices: colored left border for type */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: var(--nrm-color-surface, #0f172a) !important;
color: var(--nrm-color-text, #ffffff) !important;
border: none !important;
border-radius: 4px;
padding: 1rem 1.5rem !important;
border-left: 4px solid;
}
.woocommerce-message { border-left-color: #66bb6a; }
.woocommerce-info { border-left-color: #42a5f5; }
.woocommerce-error { border-left-color: #ef5350; }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }
.woocommerce-store-notice {
background: var(--nrm-color-surface, #0f172a);
color: var(--nrm-color-text, #ffffff);
border-bottom: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
}
/* Cart/checkout tables */
.woocommerce table.shop_table {
background: var(--nrm-color-surface, #0f172a);
color: var(--nrm-color-text, #ffffff);
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
border-radius: 4px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
border-top: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
color: var(--nrm-color-text, #ffffff);
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tfoot td {
font-weight: 600;
}
/* Select2 dropdowns (checkout) */
.select2-container--default .select2-selection--single {
background: var(--nrm-color-surface, #0f172a);
color: var(--nrm-color-text, #ffffff);
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
border-radius: 4px;
height: auto;
padding: 0.5rem 0.8rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--nrm-color-text, #ffffff);
line-height: inherit;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
top: 0.5rem;
right: 0.5rem;
}
.select2-dropdown {
background: var(--nrm-color-surface, #0f172a);
color: var(--nrm-color-text, #ffffff);
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--nrm-color-accent-hover, rgba(255,255,255,0.6));
color: #000;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
background: rgba(0,0,0,0.2);
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
border-radius: 4px;
color: var(--nrm-color-text, #ffffff);
}
/* Product grid: consistent spacing */
.wc-block-grid__product {
padding: 0;
}
.wc-block-grid__product .wc-block-grid__product-title {
font-family: var(--wp--preset--font-family--heading);
font-size: var(--wp--preset--font-size--medium);
margin: 0.75rem 0 0.25rem;
}
.wc-block-grid__product .wc-block-grid__product-price {
font-size: var(--wp--preset--font-size--small);
color: var(--nrm-color-muted, rgba(255,255,255,0.9));
margin: 0 0 0.75rem;
}
.wc-block-grid__product .wp-block-button__link {
font-size: var(--wp--preset--font-size--small);
}
/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
border: none;
display: flex;
gap: 0.5rem;
justify-content: center;
margin: 2rem 0;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
padding: 0.4rem 0.8rem;
border: 1px solid var(--wp--preset--color--border, rgba(255,255,255,0.24));
border-radius: 4px;
background: transparent;
color: var(--nrm-color-text, #ffffff);
font-size: var(--wp--preset--font-size--small);
text-decoration: none;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
border-color: var(--nrm-color-accent-hover, rgba(255,255,255,0.6));
color: var(--nrm-color-accent-hover, rgba(255,255,255,0.6));
}
/* Reduced motion: instant underline, no sweep */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
main::after { transition: none; }
/* Underline sweeps become plain underlines. The hamburger icon is not
included here — its lines are background-drawn, so clearing the
background would erase the icon itself, which is not a motion effect. */
.wp-block-site-title a,
.wp-block-post-title a,
.wp-block-heading a,
.wp-block-navigation .wp-block-navigation-item__label {
background: none !important;
padding-bottom: 0;
}
.wp-block-site-title a:hover,
.wp-block-post-title a:hover,
.wp-block-heading a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
text-decoration: underline !important;
}
}
/* Portfolio case study: visit-site link - plain arrow, darken on hover like the search icon */
.nrm-visit-link a {
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.nrm-visit-link a:hover,
.nrm-visit-link a:focus-visible {
color: var(--nrm-color-accent-hover);
}
.nrm-visit-link a::after {
content: "\2197";
font-size: 0.85em;
}
/* ===== Lightbox transitions (touch only) ===== */
@media (pointer: coarse) {
.wp-lightbox-overlay .lightbox-image-container img.nrm-lightbox-swap {
animation: nrm-lightbox-in 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.wp-lightbox-overlay .nrm-lightbox-caption {
animation: nrm-lightbox-caption-in 120ms ease-out 0ms both;
}
}
@keyframes nrm-lightbox-in {
from {
opacity: 0;
transform: scale(1.02);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes nrm-lightbox-caption-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ===== Lightbox zoom (touch only) =====
Core's zoom animation scales FROM the image's thumbnail position AND is
what centers/sizes the image — killing it leaves the image at natural
size, overflowing a phone screen (looks zoomed in and stuck). Touch
devices instead get a plain contain-fit: centered, fully visible, no
zoom, no scale math. ===== */
/* ===== Lightbox zoom (all devices) =====
Core replays its zoom-in animation on the image container every time the
image changes — fine for the entrance, a stutter for navigation. After
the first navigation (flag class added by lightbox-transitions.js) the
container animation is dropped; the open zoom and the touch sizing rules
below still apply. */
.wp-lightbox-overlay.nrm-nav-zoom-off.zoom.active .lightbox-image-container {
animation: none !important;
}
@media (pointer: coarse) {
.wp-lightbox-overlay.zoom.active .lightbox-image-container,
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
animation: none !important;
width: calc(100vw - 24px) !important;
height: auto !important;
overflow: visible !important;
/* Chrome Android: a fixed overlay extends under the URL bar, so
50% of the overlay sits below the visible center. Center on the
small viewport height (what's actually visible) instead. */
top: 50% !important;
top: 50svh !important;
transform: translate(-50%, -50%) !important;
}
/* Let the image box size to its content instead of a fixed height, and
center it in the full viewport box. The caption floats below it. */
.wp-lightbox-overlay .lightbox-image-container .wp-block-image {
width: 100%;
height: auto !important;
margin: 0 auto;
}
.wp-lightbox-overlay .lightbox-image-container img,
.wp-lightbox-overlay .lightbox-image-container .wp-block-image img {
min-width: 0 !important;
min-height: 0 !important;
width: auto !important;
height: auto !important;
max-width: calc(100vw - 24px) !important;
max-height: calc(100vh - 24px) !important;
max-height: calc(100dvh - 24px) !important;
max-height: calc(100svh - 24px) !important;
object-fit: contain !important;
margin: 0 auto;
}
/* The X is a desktop affordance; on a phone the dark backdrop taps to
close and swipes navigate. Hiding it keeps the top of the screen clean. */
.wp-lightbox-overlay {
touch-action: manipulation;
/* Pin the overlay to all four viewport edges — no height/width
units at all. Viewport-height units (vh/dvh/svh) compute
against iOS Safari's URL-bar viewport and end up short; a
fixed element pinned with top/right/bottom/left always spans
the full screen, whatever the bar is doing. */
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: auto !important;
height: auto !important;
/* A firm press on the photo summons iOS's magnifier, Live Text and
callout machinery, which interrupts the touch stream mid-gesture
and leaves core's lightbox in a half-pressed state. Inside the
lightbox those system affordances are unwanted, so strip them. */
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
.wp-lightbox-overlay .wp-lightbox-close-button {
display: none !important;
}
}
/* ===== Lightbox trigger (touch only) =====
Core shows the tiny Enlarge button on hover (img:hover + button). Phones
have no hover, so the first tap only reveals it and a second tap opens —
two taps to look at a photo. On touch, stretch the invisible trigger over
the whole image so one tap anywhere opens the lightbox. Desktop unchanged. */
@media (pointer: coarse) {
.wp-lightbox-container button.lightbox-trigger {
width: 100%;
height: 100%;
top: 0;
right: 0;
border-radius: 0;
opacity: 0;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}