/*
Theme Name: K.A. Colorado
Theme URI: https://www.kacoloradoart.com/
Description: Child theme for K.A. Colorado - International Artist, Sculptor, and NOAA Artist-In-Residence
Author: K.A. Colorado
Template: twentytwentyfive
Version: 1.2.1
Text Domain: ka-colorado
*/
/* ── Custom Properties ───────────────────────────── */
:root {
--ka-color-primary: #101010;
--ka-color-gray: #6D6E71;
--ka-color-accent: #0b57d0;
--ka-color-accent-hover: #990000;
--ka-color-bg: #ffffff;
--ka-color-border: #cccccc;
--ka-color-link-hover: #838488;
--ka-color-footer: #767676;
--ka-color-muted: #999999;
--ka-color-submenu-text: #666666;
--ka-color-overlay-border: rgba(0, 0, 0, 0.06);
--ka-color-overlay-hover: rgba(0, 0, 0, 0.02);
--ka-color-overlay-active: rgba(0, 0, 0, 0.04);
--ka-font-body: 'EB Garamond', Garamond, 'Times New Roman', serif;
--ka-space-xs: 8px;
--ka-space-sm: 12px;
--ka-space-md: 20px;
--ka-space-lg: 30px;
--ka-space-xl: 40px;
--ka-sidebar-width: 170px;
--ka-container-max: 910px;
--ka-touch-min: 44px;
--ka-transition-speed: 200ms;
--ka-font-title: clamp(3rem, 7vw, 5.5rem);
--ka-font-subtitle: clamp(1.125rem, 2vw, 1.5rem);
--ka-font-body-size: clamp(1rem, 1.2vw, 1.125rem);
--ka-font-nav: clamp(1rem, 1.3vw, 1.125rem);
--ka-font-h2: clamp(1.5rem, 2.5vw, 1.875rem);
}
/* ── Skip Link (accessibility) ───────────────────── */
.skip-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
background: var(--ka-color-bg);
color: var(--ka-color-primary);
padding: 10px 20px;
font-family: var(--ka-font-body);
font-size: 1rem;
text-decoration: underline;
z-index: 10000;
border: 2px solid var(--ka-color-primary);
}
.skip-link:focus {
position: fixed;
top: 0;
left: 0;
width: auto;
height: auto;
overflow: visible;
outline: 3px solid var(--ka-color-accent);
outline-offset: 2px;
}
/* ── Reset & Base ─────────────────────────────────── */
strong, b {
font-weight: 600; /* heaviest EB Garamond weight loaded; UA 'bolder' resolves to 700 which has no font file */
}
body {
font-family: var(--ka-font-body);
font-size: var(--ka-font-body-size);
line-height: 1.7;
color: var(--ka-color-primary);
background: var(--ka-color-bg);
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* ── Site Container ───────────────────────────────── */
.ka-site-container {
max-width: var(--ka-container-max);
margin: 0 auto;
padding: var(--ka-space-md) 15px;
}
/* ── Header ───────────────────────────────────────── */
.ka-header {
text-align: center;
position: relative;
padding: var(--ka-space-md) 0 15px;
/* border-bottom removed per client preference */
margin-bottom: 25px;
}
.ka-site-title {
font-family: var(--ka-font-body);
font-size: var(--ka-font-title);
font-weight: 400;
font-style: normal;
letter-spacing: clamp(3px, 0.5vw, 6px);
color: var(--ka-color-gray);
margin: 0;
line-height: 1.1;
text-transform: uppercase;
}
.ka-site-title a,
.ka-site-title a:hover,
.ka-site-title a:focus {
text-decoration: none;
}
.ka-site-subtitle {
font-family: var(--ka-font-body);
font-size: var(--ka-font-subtitle);
font-weight: 400;
font-style: italic;
color: var(--ka-color-primary);
margin: var(--ka-space-xs) 0 0;
}
/* Tagline shows only on the home page. WP adds .home to on the
front page (both "latest posts" and "static page" front-page modes). */
body:not(.home) .ka-site-subtitle {
display: none;
}
/* ── Two-Column Layout ────────────────────────────── */
.wp-block-group.ka-layout {
display: flex;
gap: 30px;
align-items: flex-start;
max-width: var(--ka-container-max);
margin: 0 auto;
}
/* ── Sidebar Navigation ───────────────────────────── */
.ka-sidebar {
width: var(--ka-sidebar-width);
flex-shrink: 0;
margin-top: 45px;
}
body:not(.home) .ka-sidebar {
margin-top: 95px;
}
.ka-sidebar .wp-block-navigation {
font-family: var(--ka-font-body);
font-size: var(--ka-font-nav);
}
.ka-sidebar .wp-block-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.ka-sidebar .wp-block-navigation li {
margin-bottom: var(--ka-space-sm);
line-height: 1.3;
}
/* Allow long labels to wrap inside the fixed-width sidebar.
WP core sets .wp-block-navigation-item__content to white-space: nowrap,
which causes labels like "Exhibitions, Conferences, & Lectures" to overflow. */
.ka-sidebar .wp-block-navigation .wp-block-navigation-item__content {
white-space: normal;
}
.ka-sidebar .wp-block-navigation a,
.ka-sidebar a {
color: var(--ka-color-primary);
text-decoration: none;
font-size: var(--ka-font-nav);
font-family: var(--ka-font-body);
}
.ka-sidebar .wp-block-navigation a:hover,
.ka-sidebar a:hover {
color: var(--ka-color-link-hover);
}
.ka-sidebar .accent {
color: var(--ka-color-accent);
}
/* ── Desktop Flyout Submenus ──────────────────────── */
/* Uses WP 7.0's Interactivity API for hover/focus/keyboard/aria —
we only restyle the appearance to match the legacy site.
Selectors use .ka-sidebar prefix for specificity over WP core. */
@media (min-width: 900px) {
/* Allow flyouts to escape the sidebar box */
.ka-sidebar,
.ka-sidebar .wp-block-navigation,
.ka-sidebar .wp-block-navigation__container {
overflow: visible;
}
/* Anchor for absolute flyout positioning; flex enables dynamic-width line.
align-items: center pins the connector line to the vertical center of
the parent label text (so for 2-line labels like "Exhibitions,
Conferences, & Lectures" it sits between the two lines). The flyout
itself is also vertically centered on the li (see top/translateY below)
so the line, parent label, and flyout all share one center axis. */
.ka-sidebar .wp-block-navigation .has-child {
position: relative;
display: flex;
align-items: center;
}
/* Link takes only its text width (not full sidebar width) so the dynamic
connecting line (::after) can fill the remaining space. max-width:100%
constrains long labels to the sidebar so they wrap inside it instead
of overflowing into main content (issue #62). */
.ka-sidebar .wp-block-navigation .has-child > .wp-block-navigation-item__content {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
}
/* PR #7 strips the href from parent items whose landing page is empty
(Work, Antarctica, Museum Exhibitions) so the label is inert. Browsers
default an without href to cursor: auto, which makes these parents
look non-interactive even though hovering reveals a submenu. Restore
the pointer cursor so the affordance matches the hover behavior. */
.ka-sidebar .wp-block-navigation .has-child > a.wp-block-navigation-item__content:not([href]) {
cursor: pointer;
}
/* Dynamic connecting line: fills space from text right edge to flyout.
Always in layout (no shift on hover), visible only when flyout is open.
align-items: center on the parent centers the 1px line vertically on
the parent label (for 2-line labels, between the lines). */
.ka-sidebar .wp-block-navigation .has-child::after {
content: '';
flex: 1;
height: 1px;
background: #6d6e71;
margin-left: 6px;
margin-right: -20px;
opacity: 0;
pointer-events: none;
}
.ka-sidebar .wp-block-navigation .has-child:hover::after,
.ka-sidebar .wp-block-navigation .has-child:focus-within::after {
opacity: 1;
}
/* Restyle WP's submenu toggle: visually hidden text, just show chevron.
Kept in DOM for keyboard accessibility (Tab → Enter opens submenu). */
.ka-sidebar .wp-block-navigation .wp-block-navigation-submenu__toggle {
all: unset;
position: absolute;
inset: 0;
cursor: pointer;
}
/* WP's Interactivity API calls .focus() on the submenu toggle after click,
which triggers :focus-visible in modern browsers even for mouse clicks.
The toggle is absolutely positioned over the entire .has-child li, so its
default focus ring looks like a huge box around the label. Hide it —
WP's Interactivity API handles aria-expanded for SRs. */
.ka-sidebar .wp-block-navigation .wp-block-navigation-submenu__toggle:focus,
.ka-sidebar .wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
outline: none;
}
/* Parent of a has-child item also picks up :focus-visible after a
mouse click (the overlayed toggle button's click action leaves the
parent link focused, and browsers treat that as keyboard-like focus).
The global `a:focus:not(:focus-visible)` rule below doesn't catch this
case. The parent also gets focused programmatically by WP's
Interactivity API on click (it has tabindex="-1") and then matches
parent theme's `:where(.wp-site-blocks :focus) { outline: 2px solid }`.
Suppress both — keyboard users still get clear feedback: the submenu
opens on :focus-within (WP Interactivity API) and the ::after
connector line lights up. */
.ka-sidebar .wp-block-navigation li.has-child:focus,
.ka-sidebar .wp-block-navigation li.has-child:focus-visible,
.ka-sidebar .wp-block-navigation .has-child > a.wp-block-navigation-item__content:focus,
.ka-sidebar .wp-block-navigation .has-child > a.wp-block-navigation-item__content:focus-visible {
outline: none;
}
/* Hide the toggle's SVG chevron icon — parent text is the visual trigger */
.ka-sidebar .wp-block-navigation .wp-block-navigation__submenu-icon {
display: none;
}
/* Flyout container — gray box to the right of sidebar. Vertically
centered on the parent li so its midpoint aligns with the connector
line and the parent label's vertical center, for both single-item and
multi-item flyouts, and for single- and multi-line parent labels. */
.ka-sidebar .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 20px;
width: 190px;
min-width: 190px;
background-color: #6d6e71;
padding: 10px 10px 10px 7px;
z-index: 1000;
border: none;
box-shadow: none;
gap: 0;
}
/* Nested (sub-sub) flyout — "Art Series" etc. opens its own flyout to
the right. Override the vertical-center rule above so the nested flyout
aligns to the TOP of the outer flyout instead of centering on its
parent li (which would make it float up above the outer flyout).
-10px compensates for the outer flyout's padding-top (see rule above).
Higher specificity than the base rule (one extra submenu-container in
the selector) so it wins without !important. */
.ka-sidebar .wp-block-navigation .wp-block-navigation__submenu-container .has-child .wp-block-navigation__submenu-container {
top: -10px;
transform: none;
}
/* Hover bridge — safe-triangle from parent label (narrow vertex at the
parent's vertical center, far-left of sidebar) widening out to the
flyout's full left edge. Lets the mouse travel from parent to flyout
without losing hover, while still narrowing above/below the parent so
dragging straight down/up onto a sibling nav item doesn't stay trapped
in this bridge. Only exists while the flyout is rendered on hover. */
.ka-sidebar .wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
content: '';
position: absolute;
top: 0;
right: 100%;
width: calc(var(--ka-sidebar-width) + 20px);
height: 100%;
clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}
/* Hover bridge for nested (sub-sub) flyouts — the gap between the first
and second flyout columns is only 20px (margin-left), so the bridge is
narrow. Full rectangle instead of a triangle because at 20px the
diagonal is short enough that a triangle vertex would be too narrow. */
.ka-sidebar .wp-block-navigation .wp-block-navigation__submenu-container .has-child .wp-block-navigation__submenu-container::before {
width: 20px;
clip-path: none;
}
/* White text on gray background */
.ka-sidebar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: #fff;
font-size: 18px;
font-family: var(--ka-font-body);
line-height: 22px;
display: block;
text-decoration: none;
padding: 0;
}
.ka-sidebar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: #bbb;
}
/* Reset item spacing inside flyout */
.ka-sidebar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
margin-bottom: 0;
}
}
/* ── Main Content ─────────────────────────────────── */
.ka-main {
flex: 1;
min-width: 0;
overflow-wrap: break-word;
}
.ka-main p:not([class*="is-style-text-"]) {
font-family: var(--ka-font-body);
font-size: var(--ka-font-body-size);
line-height: 1.7;
color: var(--ka-color-primary);
margin: 15px 0;
}
.ka-main img {
max-width: 100%;
height: auto;
display: block;
}
/* ── Headings ─────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--ka-font-body);
font-weight: 400;
color: var(--ka-color-primary);
}
h2 {
font-size: var(--ka-font-h2);
font-style: italic;
}
/* ── Links ────────────────────────────────────────── */
a {
color: #0b57d0;
text-decoration: underline;
}
.ka-main a {
font-weight: bold;
}
a:hover {
color: var(--ka-color-link-hover);
}
/* Hide the focus ring when an element is focused by mouse click.
`:focus-visible` still applies for keyboard navigation, so this keeps
keyboard a11y intact while removing the outline that lingers after a click. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* ── Page ────────────────────────────── */
.wp-block-post-title {
text-align: center;
margin-bottom: var(--ka-space-xl);
}
/* Page title heading (in content, replaces template-level post-title on pages).
Uses h1 for SEO with h2 sizing for visual consistency. */
.ka-page-title {
text-align: center;
margin-bottom: var(--ka-space-xl);
font-size: var(--ka-font-h2);
}
/* ── Footer ───────────────────────────────────────── */
.ka-footer {
border-top: 1px solid var(--ka-color-border);
margin-top: var(--ka-space-xl);
padding: 15px 0;
text-align: center;
font-size: 14px;
color: var(--ka-color-footer);
}
.ka-footer .wp-block-shortcode {
text-align: center;
font-size: 14px;
color: var(--ka-color-footer);
margin: 0;
padding: 0;
}
/* ── WordPress Block Overrides ────────────────────── */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container.is-menu-open {
background: var(--ka-color-bg);
}
.wp-block-navigation .wp-block-navigation-item__content {
color: var(--ka-color-primary);
font-family: var(--ka-font-body);
font-size: var(--ka-font-nav);
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
color: var(--ka-color-link-hover);
}
.wp-site-blocks {
padding: 0;
}
.wp-site-blocks > * {
max-width: none;
}
/* ── Mobile + Tablet compact: < 900px ─────────────── */
@media (max-width: 899px) {
.ka-header {
padding: 15px 0 10px;
margin-bottom: var(--ka-space-md);
}
/* Position hamburger button top-right */
.wp-block-navigation__responsive-container-open {
position: fixed;
top: var(--ka-space-sm);
right: var(--ka-space-sm);
z-index: 999;
}
/* Hide sidebar nav on mobile — the overlay handles it */
.ka-sidebar {
width: auto;
}
/* Single column */
.ka-layout {
flex-direction: column;
}
/* Constrain main content to container width. Without this, long
unbreakable content (bare URLs on the bio page) sets .ka-main's
intrinsic width beyond the viewport in column flex. */
.ka-main {
width: 100%;
}
.ka-main p {
max-width: none;
}
}
/* ── Tablet two-column: 900px–1024px ──────────────── */
@media (min-width: 900px) and (max-width: 1024px) {
:root {
--ka-sidebar-width: 180px;
}
.ka-site-container {
padding: var(--ka-space-md);
}
.ka-layout {
gap: var(--ka-space-md);
}
}
/* ── Desktop: > 1024px ────────────────────────────── */
@media (min-width: 1025px) {
.ka-main p {
max-width: none;
}
}
/* ── WP 7.0 Navigation Overlay ───────────────────── */
/* When a custom overlay is active, hide the default (sidebar) nav list
and only show our overlay template part content */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
> .wp-block-navigation__responsive-close
> .wp-block-navigation__responsive-dialog
> .wp-block-navigation__responsive-container-content
> .wp-block-navigation__container {
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open {
background: var(--ka-color-bg) !important;
font-family: var(--ka-font-body);
padding: var(--ka-space-xl) var(--ka-space-lg);
width: 100% !important;
height: 100% !important;
}
/* Full coverage for overlay inner elements */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
background: var(--ka-color-bg);
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
font-family: var(--ka-font-body);
font-size: 1.125rem;
color: var(--ka-color-primary);
padding: var(--ka-space-sm) 0;
min-height: var(--ka-touch-min);
display: block;
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover {
color: var(--ka-color-link-hover);
}
/* Submenu styling in overlay */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container {
border-left: 2px solid var(--ka-color-accent);
padding-left: var(--ka-space-md);
margin-left: var(--ka-space-sm);
}
.wp-block-navigation .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
padding: .25em .5em;
}
/* Submenu toggle indicator */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu__toggle {
color: var(--ka-color-accent);
}
/* Close button */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-overlay-close {
color: var(--ka-color-primary);
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-overlay-close:hover {
color: var(--ka-color-accent);
}
/* ==========================================================================
Post content layout
========================================================================== */
/* Post content stacks vertically */
.ka-main .wp-block-post-content,
.ka-main .entry-content {
display: block;
max-width: 100%;
}
/* Gallery takes full width of the content column */
.ka-main .wp-block-gallery {
width: 100%;
max-width: 100%;
margin-bottom: var(--ka-space-lg);
}
/* Gallery grid tiles (is-cropped): enforce exact square tiles with the image
center-cropped inside. Matches the legacy site's uniform square thumbnails.
Images retain original aspect ratios in the media library — only the
gallery-view display is squared via CSS. */
.ka-main .wp-block-gallery.has-nested-images.is-cropped .wp-block-image,
.ka-main .wp-block-gallery.has-nested-images.is-cropped .wp-block-image > a,
.ka-main .wp-block-gallery.has-nested-images.is-cropped .wp-block-image figure {
aspect-ratio: 1 / 1;
width: 100%;
height: 100%;
}
/* Gallery inside a Columns block: triple-flex nesting (columns > column >
gallery) means height: 100% has no concrete ancestor to resolve against,
collapsing images to zero. Let aspect-ratio drive the height instead. */
.wp-block-column .wp-block-gallery.has-nested-images.is-cropped .wp-block-image {
height: auto;
}
.ka-main .wp-block-gallery.has-nested-images.is-cropped .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Gallery image crop position utilities.
Add "crop-bottom" or "crop-top" to an image block's Additional CSS Classes
field to control where the crop anchor sits when "Crop images to fit" is on. */
.crop-bottom img { object-position: bottom !important; }
.crop-top img { object-position: top !important; }
.crop-center img { object-position: center !important; }
/* Partial-row fix: WP core's flex-grow lets items in an incomplete last row
stretch unevenly (e.g. 2 items → one huge, one small). Disable flex-grow on
all gallery items so partial rows keep the same tile width. Full rows are
unaffected. :not(:only-child) preserves single-image galleries. */
.ka-main .wp-block-gallery.has-nested-images.is-cropped > figure.wp-block-image:not(:only-child) {
flex-grow: 0;
}
.ka-main .wp-block-gallery.has-nested-images.is-cropped.columns-2 > figure.wp-block-image:not(:only-child) {
width: calc((100% - var(--wp--style--unstable-gallery-gap, 16px)) / 2);
}
.ka-main .wp-block-gallery.has-nested-images.is-cropped:not(.columns-2) > figure.wp-block-image:not(:only-child) {
width: calc((100% - var(--wp--style--unstable-gallery-gap, 16px) * 2) / 3);
}
/* Homepage-only: force children (buttons + slideshow + paragraph) into a
vertical stack. Scoped to .home so inner-page galleries keep WP's grid. */
body.home .ka-main .wp-block-post-content > *,
body.home .ka-main .entry-content > * {
max-width: 100%;
width: 100%;
}
/* Lightbox rules consolidated below (end of file). */
/* ==========================================================================
Homepage Slideshow (Gallery block as slideshow)
========================================================================== */
/* When slideshow JS is active, convert grid to positioned slideshow.
Target both plain and the WP 6.x nested-images variant. */
.wp-block-gallery.ka-slideshow-active,
.wp-block-gallery.ka-slideshow-active.has-nested-images {
position: relative !important;
display: block !important; /* override WP flex/grid */
flex-wrap: unset !important;
grid-template-columns: unset !important;
width: 100%;
max-width: 731px;
overflow: hidden;
border: 1px solid var(--ka-color-gray);
background-color: #000;
margin: 0 0 var(--ka-space-md) 0;
}
.wp-block-gallery.ka-slideshow-active .wp-block-image {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
opacity: 0;
transition: opacity 0.3s ease-in-out;
margin: 0 !important;
padding: 0 !important;
/* override any WP flex/grid sizing on child items */
flex: unset !important;
max-width: none !important;
}
.wp-block-gallery.ka-slideshow-active .wp-block-image.ka-slide-active {
opacity: 1;
}
/* Ensure figure and img fill the slide container */
.wp-block-gallery.ka-slideshow-active .wp-block-image figure,
.wp-block-gallery.ka-slideshow-active .wp-block-image figure.wp-block-image {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.wp-block-gallery.ka-slideshow-active .wp-block-image img,
.wp-block-gallery.ka-slideshow-active .wp-block-image figure img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
margin: 0;
padding: 0;
}
/* Responsive: full-width on narrow viewports */
@media (max-width: 800px) {
.wp-block-gallery.ka-slideshow-active,
.wp-block-gallery.ka-slideshow-active.has-nested-images {
max-width: 100%;
border-left: none;
border-right: none;
}
}
/* ==========================================================================
Mobile Hamburger Navigation (issue #14)
========================================================================== */
/* Hamburger button (created by JS) */
.ka-mobile-nav-toggle {
position: fixed;
top: 16px;
right: 16px;
width: 44px;
height: 44px;
z-index: 10000;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: none; /* Hidden by default, shown via media query */
}
/* Three-line hamburger icon */
.ka-nav-toggle-line {
display: block;
position: absolute;
left: 8px;
width: 28px;
height: 2px;
background-color: var(--ka-color-primary);
transition: transform var(--ka-transition-speed) ease, opacity var(--ka-transition-speed) ease;
}
.ka-nav-toggle-line:nth-child(1) {
top: 14px;
}
.ka-nav-toggle-line:nth-child(2) {
top: 21px;
}
.ka-nav-toggle-line:nth-child(3) {
top: 28px;
}
/* Transform to X when active */
.ka-nav-toggle--active .ka-nav-toggle-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.ka-nav-toggle--active .ka-nav-toggle-line:nth-child(2) {
opacity: 0;
}
.ka-nav-toggle--active .ka-nav-toggle-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Focus styles */
.ka-mobile-nav-toggle:focus-visible {
outline: 2px solid var(--ka-color-accent);
outline-offset: 2px;
}
/* Hide the hamburger while the overlay is open (issue #68). The in-overlay
close button (.ka-mobile-panel-close) is the sole close affordance; without
this rule the hamburger (z-index 10000) stacks over the overlay (z-index
9999) and intercepts clicks meant for the close button. */
.ka-mobile-nav-toggle[aria-expanded="true"] {
display: none;
}
/* Full-viewport overlay */
.ka-mobile-nav-overlay {
position: fixed;
inset: 0;
z-index: 9999;
/* Hard-coded spec color (#fafaf8 warm off-white). `--ka-color-bg` is
#ffffff globally; don't mutate the global token just for the overlay. */
background: #fafaf8;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity var(--ka-transition-speed) ease, visibility var(--ka-transition-speed) ease;
}
.ka-overlay--open {
opacity: 1;
visibility: visible;
}
/* --- Drill-down panel stack --- */
.ka-mobile-nav-stack {
position: relative;
width: 100%;
min-height: 100%;
overflow: hidden;
}
.ka-mobile-panel {
position: absolute;
inset: 0;
padding: 24px 20px 40px;
background: #fafaf8;
box-sizing: border-box;
transition: transform 220ms ease-out;
}
.ka-mobile-panel-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 24px;
}
.ka-mobile-panel-back,
.ka-mobile-panel-close {
background: none;
border: none;
padding: 8px;
margin: -8px;
cursor: pointer;
font-family: 'EB Garamond', Garamond, serif;
color: var(--ka-color-primary);
}
.ka-mobile-panel-back {
font-size: 14px;
letter-spacing: 0.02em;
color: var(--ka-color-gray, #6D6E71);
}
.ka-mobile-panel-close {
font-size: 24px;
line-height: 1;
min-width: 44px;
min-height: 44px;
}
.ka-mobile-panel-back-spacer {
display: block;
}
.ka-mobile-panel-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ka-color-gray, #6D6E71);
padding-bottom: 6px;
}
.ka-mobile-panel-title {
font-family: 'EB Garamond', Garamond, serif;
font-size: 24px;
font-weight: 500;
letter-spacing: 0.02em;
margin: 0 0 18px 0;
padding-bottom: 18px;
border-bottom: 2px solid var(--ka-color-primary);
}
.ka-mobile-panel-list {
list-style: none;
margin: 0;
padding: 0;
}
.ka-mobile-panel-row {
list-style: none;
margin: 0;
border-bottom: 1px solid var(--ka-color-overlay-border);
}
.ka-mobile-panel-row:last-child {
border-bottom: none;
}
.ka-mobile-panel-row-button,
.ka-mobile-panel-row-link,
.ka-mobile-panel-overview {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-family: 'EB Garamond', Garamond, serif;
font-size: 17px;
color: var(--ka-color-primary);
text-decoration: none;
background: none;
border: none;
padding: 12px 0;
text-align: left;
letter-spacing: 0.02em;
line-height: 1.4;
cursor: pointer;
box-sizing: border-box;
}
.ka-mobile-panel-row-button:hover,
.ka-mobile-panel-row-link:hover,
.ka-mobile-panel-overview:hover {
color: var(--ka-color-link-hover);
}
.ka-mobile-panel-row-button:focus-visible,
.ka-mobile-panel-row-link:focus-visible,
.ka-mobile-panel-overview:focus-visible,
.ka-mobile-panel-back:focus-visible,
.ka-mobile-panel-close:focus-visible {
outline: 2px solid var(--ka-color-accent);
outline-offset: 2px;
}
.ka-mobile-panel-row-chevron {
font-size: 14px;
color: var(--ka-color-muted, #888);
margin-left: 12px;
}
.ka-mobile-panel-row--overview {
border-bottom: 1px solid var(--ka-color-overlay-border);
}
.ka-mobile-panel-overview {
font-size: 15px;
font-style: italic;
color: var(--ka-color-accent, #0b57d0);
}
/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
.ka-nav-toggle-line,
.ka-mobile-nav-overlay,
.ka-mobile-panel {
transition: none;
}
}
/* Responsive: show hamburger and overlay only on mobile */
@media (max-width: 899px) {
.ka-mobile-nav-toggle {
display: block;
}
/* Hide sidebar navigation on mobile (overlay will be used) */
.ka-sidebar .wp-block-navigation {
display: none;
}
}
@media (min-width: 900px) {
.ka-mobile-nav-toggle {
display: none !important;
}
/* Ensure sidebar nav is visible on desktop */
.ka-sidebar .wp-block-navigation {
display: block;
}
}
/* ==========================================================================
WP 7.0 native lightbox ("Expand on click")
--------------------------------------------------------------------------
The overlay is printed once per page by wp_footer (via
block_core_image_print_lightbox_overlay() in wp-includes/blocks/image.php).
WP inlines styles from theme.json globals and the Interactivity API:
.scrim style="background-color: {color.background}"
close/nav buttons style="fill: {color.text}"
lightbox ![]()
style copied from thumbnail (object-fit, aspect-ratio, etc.)
container style with JS-calculated width/height from thumbnail size
No selector specificity can beat inline styles, so !important is required
on every rule here. All selectors are scoped to .wp-lightbox-overlay so
they cannot leak into page styling.
Why viewport-relative container sizing:
Gallery tiles use object-fit:cover to square-crop thumbnails. WP's JS
reads the thumbnail's offsetWidth/offsetHeight and constrains the lightbox
container to that (square) ratio, making landscape/portrait images display
25-53% smaller than their natural size. Override with 90vw/85vh and let
object-fit:contain on the img handle aspect ratio.
Docs:
https://developer.wordpress.org/news/2023/11/introducing-the-image-lightbox-with-a-cool-zoom-animation/
https://make.wordpress.org/core/6.4/image-lightbox
========================================================================== */
/* Fully-opaque dark scrim so artwork pops with zero background bleed.
opacity must NOT use !important — it blocks WP core's turn-off-visibility
animation on close, causing the scrim to cut out instead of fading. */
.wp-lightbox-overlay .scrim {
background-color: #111 !important;
opacity: 1;
}
/* White close + nav icons. Broad `button` selector covers both WP 6.x
(.close-button) and WP 7.0+ (.wp-lightbox-close-button, .wp-lightbox-
navigation-button). The overlay only contains control buttons so there's
no risk of over-matching. */
.wp-lightbox-overlay button {
fill: #fff !important;
}
/* Keep the source thumbnail visible while the lightbox is open. WP core
adds .hide to the ![]()
on open and plays show-content-image on close,
but our zoom-from-center animation doesn't fly out of the thumbnail,
so hiding it just creates a visible gap in the gallery grid. The scrim
(z-index 100000) fully covers the page, so the thumbnail is invisible
behind it anyway. */
.wp-block-image img.hide,
.wp-block-image img.show {
visibility: visible !important;
animation: none !important;
}
/* Replace WP's zoom-from-thumbnail with zoom-from-center. WP's default
calculates --wp--lightbox-scale from the thumbnail position, but our 90vw
container override makes the initial frame much larger than the thumbnail.
Zooming from center avoids the position math entirely — the container is
already at top:50%;left:50%;transform:translate(-50%,-50%) so scaling
from center just works.
Scale only — no opacity. The scrim handles the backdrop fade; adding
opacity here caused page bleed-through during open/close transitions. */
@keyframes ka-lightbox-zoom-in {
0% { transform: translate(-50%, -50%) scale(0.6); }
100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes ka-lightbox-zoom-out {
0% { transform: translate(-50%, -50%) scale(1); }
100% { transform: translate(-50%, -50%) scale(0.6); }
}
@media not (prefers-reduced-motion) {
.wp-lightbox-overlay.zoom.active .lightbox-image-container {
animation: ka-lightbox-zoom-in 0.4s ease-out !important;
transform-origin: center center !important;
}
.wp-lightbox-overlay.zoom.active .lightbox-image-container img {
animation: none !important;
}
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
animation: ka-lightbox-zoom-out 0.4s ease-in !important;
transform-origin: center center !important;
}
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img {
animation: none !important;
}
}
/* Beat the inline object-fit:cover that WP's Interactivity API copies
from gallery thumbnails onto the lightbox ![]()
during zoom animation.
Broad selector ensures coverage regardless of DOM nesting stage. */
.wp-lightbox-overlay img {
object-fit: contain !important;
object-position: center center !important;
aspect-ratio: auto !important;
}
/* Fill the viewport, capped at 1200px for ultra-wide screens. */
.wp-lightbox-overlay .lightbox-image-container {
width: 90vw !important;
height: 85vh !important;
max-width: 1200px !important;
}
/* Force the image to fill the container at its natural aspect ratio.
aspect-ratio:auto prevents WP copying the thumbnail's 1:1 ratio
from is-cropped galleries. */
.wp-lightbox-overlay .lightbox-image-container img {
width: 100% !important;
height: 100% !important;
min-width: unset !important;
min-height: unset !important;
object-fit: contain !important;
aspect-ratio: auto !important;
}
/* Thin white border for images in the lightbox.
Add "lightbox-white-border" in the block editor's Additional CSS Classes
field on any image that needs it. WP 7.0's Interactivity API copies
figureClassNames from the source block to the lightbox's inner ,
so the class carries through. */
.wp-lightbox-overlay figure.lightbox-white-border img {
border: 2px solid #fff !important;
}
/* Lightbox original swap: WP's lightbox renders two image containers:
1. Zoom container — shows the page thumbnail (currentSrc) for the zoom animation
2. Enlarged container — shows the full image (uploadedSrc/enlargedSrc)
When we swap the lightbox source to a different original, the zoom container
still shows the crop thumbnail, creating a visual overlap. Hide the zoom
container's image so only the original is visible.
The second container has sizes="100vw" (static attribute in WP core),
the first does not — that's how we differentiate them. */
.wp-lightbox-overlay figure.has-lightbox-original img:not([sizes]) {
opacity: 0 !important;
}