; with-image tiles need
it positioned inside the body, not at the bottom of the whole card. */
.apex-category-tiles--with-image .apex-category-tile::after {
padding: 0 24px 18px;
margin-top: -4px;
}
/* ───── Studio page header — descriptor next to H1 ─────────────────
Marker class `apex-studio-header` is added by the studio-page patcher
to the heading-block group. Restructures the natural source order
(descriptor → H1 → columns) into a two-row grid that puts the
descriptor in-line with the H1, saving a full row of vertical space
at the top of every studio page. Drops to a stacked layout on
narrow screens so the descriptor doesn't crash into the big H1. */
.apex-studio-header {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 24px;
row-gap: 0;
align-items: baseline;
}
.apex-studio-header > .wp-block-heading {
grid-column: 1;
grid-row: 1;
margin-top: 0 !important;
margin-bottom: 8px !important;
}
/* The descriptor paragraph is the first child ; pin it to row 1,
right side of the H1. */
.apex-studio-header > p:first-child {
grid-column: 2;
grid-row: 1;
margin: 0 !important;
align-self: baseline;
}
/* The columns block (description paragraph + stats grid) spans both
columns on row 2. */
.apex-studio-header > .wp-block-columns {
grid-column: 1 / -1;
grid-row: 2;
margin-top: 4px;
}
/* Mobile: stack the header so the descriptor sits ABOVE the studio title
(updated per Whitley — beside the big H1 it was cramped on phones).
display:block drops the grid, so children flow in source order and the
descriptor
(first child) lands above the H1. */
@media (max-width: 700px) {
.apex-studio-header {
display: block;
}
.apex-studio-header > p:first-child {
margin-bottom: 8px !important;
}
}
/* ───── Studio page: hero image + sticky booking widget (top fold) ───── */
.apex-studio-stage {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.apex-studio-stage .apex-photo--hero {
aspect-ratio: 16 / 11;
height: auto;
}
.apex-studio-stage__widget {
/* Widget container locked to an EXACT height (not max-height) so it
stays at the hero image's height regardless of how tall the iframe
content wants to be. JS sets the height inline at runtime from the
measured hero; the CSS fallback uses a sensible viewport fraction
for the brief window before JS runs.
The iframe inside scrolls its own content via cross-origin scroll
(the booking app handles its own internal scrolling), so customers
can still reach everything in the form even when the widget is
clamped to a short height.
overflow is visible (not hidden) so the .apex-widget-expand pill
can hang ~50px below the widget edge without being clipped. The
iframe is bounded by its own `height: 100% !important` so it
doesn't need a parent overflow:hidden to clip it. */
position: sticky;
top: 24px;
height: 60vh;
border-radius: 6px;
align-self: start;
}
#apex-booking {
/* Fill the widget container so iframe + overlay anchor against the
whole widget area, not just the iframe's intrinsic height. */
height: 100%;
}
/* Expanded state — widget pops out as a fixed-position overlay so the
photo strip + body content below the .apex-studio-stage don't shift
down when customers want more breathing room in the booking flow.
Collapsed state stays inline + sticky as before. */
.apex-studio-stage__widget.is-expanded {
position: fixed;
/* Anchored to viewport edges; explicit width/height with calc so the
iframe inside (height: 100%) has a definite parent height to
inherit from. Plain `height: auto` left the iframe collapsed to
its intrinsic 150px default in expanded mode. */
top: 8px;
left: 24px;
width: calc(100vw - 48px) !important;
height: calc(100vh - 16px) !important;
max-height: none !important;
z-index: 200;
background: var(--wp--preset--color--white);
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.3);
border-radius: 8px;
}
@media (max-width: 600px) {
.apex-studio-stage__widget.is-expanded {
top: 6px;
left: 6px;
width: calc(100vw - 12px) !important;
height: calc(100vh - 12px) !important;
}
}
/* Backdrop injected by JS when expanded. Dims the page behind the
floating widget so the customer's focus stays on the booking flow. */
.apex-widget-backdrop {
position: fixed;
inset: 0;
z-index: 150;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(2px);
animation: apex-backdrop-in 180ms ease-out;
}
@keyframes apex-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Loading skeleton + spinner for #apex-booking. Pinned absolutely on
top of the iframe slot so the iframe can load + boot in the
background; we remove the .is-loading class only once the iframe
posts its first apex:resize message (handled by JS in functions.php),
which means the booking app's React tree has actually painted —
not just that an empty iframe element exists in the DOM. */
#apex-booking {
position: relative;
/* height: 100% is set above in the studio-stage block so the
spinner overlay covers the whole widget area, not just the
iframe's intrinsic height. */
}
.apex-booking-loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
background: linear-gradient(
180deg,
var(--wp--preset--color--soft) 0%,
var(--wp--preset--color--off-white) 100%
);
color: var(--wp--preset--color--ink-3);
font-family: var(--wp--preset--font-family--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 6px;
z-index: 2;
pointer-events: none;
opacity: 1;
transition: opacity 240ms ease;
}
.apex-booking-loading.is-hidden {
opacity: 0;
visibility: hidden;
}
.apex-booking-spinner {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--wp--preset--color--line);
border-top-color: var(--wp--preset--color--ink);
animation: apex-spin 720ms linear infinite;
}
@keyframes apex-spin {
to { transform: rotate(360deg); }
}
.apex-studio-stage__widget iframe {
/* Force the iframe to fill the widget container regardless of the
inline height embed.js sets via postMessage. This is what makes
overflow: hidden actually clip the iframe — without overriding
the inline height, the iframe was rendering its content-fit
intrinsic height (1500px+) and bleeding past the container. */
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
display: block;
}
/* Bottom-edge expand/collapse toggle, injected by the studio-page JS.
Sits over the iframe so it's always reachable; soft white-to-clear
gradient fades the iframe content underneath so the button reads. */
.apex-widget-expand {
position: absolute;
/* -50px floats the pill BELOW the widget's bottom edge so it doesn't
obscure form content. Widget container has overflow:visible so this
isn't clipped; the iframe inside is bounded by its own
`height: 100% !important` so we don't lose the clip behavior. */
bottom: -50px;
left: 0;
right: 0;
z-index: 3;
padding: 8px 12px;
display: flex;
justify-content: center;
pointer-events: none;
}
.apex-widget-expand__btn {
pointer-events: auto;
border: 1px solid var(--wp--preset--color--line);
background: #fff;
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--mono);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.apex-widget-expand__btn:hover {
background: var(--wp--preset--color--ink);
color: #fff;
border-color: var(--wp--preset--color--ink);
}
.is-expanded .apex-widget-expand {
/* Expanded (overlay) mode — pill sits INSIDE the overlay at the
bottom edge so the customer can always reach Close without
scrolling, and we don't want it hanging below the viewport. */
bottom: 12px;
padding: 0;
}
/* Top-right close X on the expanded overlay — separate from the
bottom Close pill so customers have a familiar corner-close
affordance too. Injected by the expand JS on openOverlay(). */
.apex-widget-close-x {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid var(--wp--preset--color--line);
background: #fff;
color: var(--wp--preset--color--ink);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
line-height: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.apex-widget-close-x:hover {
background: var(--wp--preset--color--ink);
color: #fff;
transform: scale(1.05);
}
@media (max-width: 900px) {
.apex-studio-stage {
grid-template-columns: 1fr;
}
.apex-studio-stage__widget {
position: static;
max-height: none;
/* On mobile, single-column stacking means the widget grows to its
natural content height inline. No need for the expand toggle. */
height: auto !important;
}
.apex-studio-stage__widget iframe {
max-height: none !important;
height: auto !important;
min-height: 700px !important;
}
/* Hide the Show More pill on mobile — the widget is fully visible
on scroll, no need to collapse + re-expand. */
.apex-widget-expand { display: none !important; }
}
/* Sub-image strip — small clickable thumbnail nav for the hero above.
Auto-fill grid with ~88px cells so cards stay compact regardless of
how many photos a studio has; thumbnails wrap to a second row on
narrow widths instead of stretching out. Captions hidden — labels
make the strip noisy at thumbnail size; hover the hero arrows or
click any thumb to see the caption in the hero. */
.apex-photo-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(72px, 88px));
gap: 8px;
margin-top: 12px;
}
.apex-photo-strip .apex-photo {
aspect-ratio: 4 / 3;
cursor: pointer;
transition: transform 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
outline: 2px solid transparent;
outline-offset: 2px;
border-radius: 3px;
overflow: hidden;
}
.apex-photo-strip .apex-photo:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.18);
}
.apex-photo-strip .apex-photo.is-active {
outline-color: var(--wp--preset--color--ink);
}
.apex-photo-strip .apex-photo__caption {
display: none; /* too noisy at thumbnail size */
}
/* Mobile: hide the thumbnail strip entirely — the hero's prev/next
arrows handle gallery nav (matterport + future videos included)
without eating vertical space below the hero on phones. */
@media (max-width: 720px) {
.apex-photo-strip { display: none; }
}
/* Prev/next arrows injected into the hero anchor by the gallery JS.
Centered vertically against the hero, with a subtle white pill so
they read on any image. */
.apex-photo--hero { position: relative; }
.apex-photo-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--wp--preset--color--ink);
font-size: 24px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
transition: background 120ms ease, transform 120ms ease;
z-index: 2;
}
.apex-photo-nav:hover {
background: #fff;
transform: translateY(-50%) scale(1.06);
}
.apex-photo-nav--prev { left: 12px; }
.apex-photo-nav--next { right: 12px; }
@media (max-width: 600px) {
.apex-photo-nav { width: 36px; height: 36px; font-size: 22px; }
}
/* ───── Case-study photo slider — N-at-a-time carousel with nav arrows ───
Generic reusable slider: wraps a row of .apex-photo tiles (same
lightbox-enabled anchors used elsewhere) in a viewport + track. JS
(in functions.php) steps the track by one slide-width per click and
clamps at both ends. Visible-slide count is CSS-only (3 desktop /
2 tablet / 1 phone) — the JS just measures rendered widths, so it
adapts across breakpoints without hardcoding a count. */
.apex-slider {
position: relative;
}
.apex-slider__viewport {
overflow: hidden;
}
.apex-slider__track {
display: flex;
gap: 16px;
transition: transform 320ms ease;
}
.apex-slider__track > .apex-photo {
flex: 0 0 calc((100% - 16px * 2) / 3);
min-width: 0;
aspect-ratio: var(--apex-slider-ratio, 2 / 3);
}
@media (max-width: 900px) {
.apex-slider__track { gap: 12px; }
.apex-slider__track > .apex-photo {
flex-basis: calc((100% - 12px) / 2);
}
}
@media (max-width: 600px) {
.apex-slider__track > .apex-photo {
flex-basis: 100%;
}
}
.apex-slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--wp--preset--color--ink);
font-size: 24px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
transition: background 120ms ease, transform 120ms ease, opacity 120ms ease;
z-index: 2;
}
.apex-slider-nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.apex-slider-nav--prev { left: 12px; }
.apex-slider-nav--next { right: 12px; }
.apex-slider-nav[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
@media (max-width: 600px) {
.apex-slider-nav { width: 36px; height: 36px; font-size: 20px; }
}
/* ───── Front-page studio cards — equal heights + crop fix ─────────
Targets only the 3-up studio card grid on the home page. Makes each
column stretch to the row's tallest height, hangs the body off flex:1
so the footer (price + Details) sits at the bottom regardless of
description length, and removes WP's default figure margin that was
leaving a thin background gap below the image. */
.apex-studio-cards.wp-block-columns {
align-items: stretch;
}
.apex-studio-cards > .wp-block-column {
display: flex;
}
.apex-studio-cards > .wp-block-column > .wp-block-group {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
}
.apex-studio-cards .wp-block-image {
margin: 0;
display: block;
}
.apex-studio-cards .wp-block-image figure {
margin: 0;
}
.apex-studio-cards .wp-block-image img {
display: block;
width: 100%;
}
/* Card body — the inner padded group below the image. Make it grow so
short cards still extend to the column height, and let the footer
row stick to the bottom. */
.apex-studio-cards > .wp-block-column > .wp-block-group > .wp-block-group:not(.wp-block-image) {
display: flex;
flex-direction: column;
flex: 1;
}
.apex-studio-cards > .wp-block-column > .wp-block-group > .wp-block-group:not(.wp-block-image) > .wp-block-group:last-child {
margin-top: auto;
}
/* Whole-card link — matches the "Browse by type" tile hover feedback
above it. The outer card is now an , not a . */
.apex-home-studio-card {
transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.apex-home-studio-card:hover {
border-color: var(--wp--preset--color--ink) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.15);
}
.apex-home-studio-card:hover .wp-image-1505,
.apex-home-studio-card:hover .wp-image-1167,
.apex-home-studio-card:hover .wp-image-1037 {
transform: scale(1.03);
transition: transform 400ms ease;
}
/* ───── Sticky "Book this studio" floating pill ──────────────────────
Appears once the inline booking widget scrolls out of view. Smooth-
scrolls back to the widget on click. Hidden by default + faded in
via .is-visible to avoid a flash before JS runs. */
.apex-sticky-book {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--ink);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.28);
opacity: 0;
transform: translateY(8px);
transition: opacity 200ms ease, transform 200ms ease, background-color 120ms ease;
}
.apex-sticky-book.is-visible {
opacity: 1;
transform: translateY(0);
}
.apex-sticky-book:hover {
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--ink);
}
.apex-sticky-book__arrow {
display: inline-block;
font-size: 16px;
line-height: 1;
}
@media (max-width: 600px) {
.apex-sticky-book {
bottom: 16px;
right: 16px;
padding: 12px 18px;
font-size: 13px;
}
}
.apex-matterport-tile {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
color: #fff;
text-align: center;
text-decoration: none;
transition: background 200ms ease;
}
.apex-matterport-tile:hover {
background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
}
.apex-matterport-tile__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
}
.apex-matterport-tile__label {
font-family: var(--wp--preset--font-family--serif, inherit);
font-size: 18px;
font-weight: 600;
letter-spacing: -0.01em;
}
.apex-matterport-tile__hint {
font-family: var(--wp--preset--font-family--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.7;
}
/* Compact label for the matterport tile when it lives in the
small-thumbnail strip — full label + hint doesn't fit at 88px. */
.apex-photo-strip .apex-matterport-tile__inner {
padding: 4px;
gap: 2px;
}
.apex-photo-strip .apex-matterport-tile__inner svg {
width: 18px;
height: 18px;
}
.apex-photo-strip .apex-matterport-tile__label {
font-size: 9px;
letter-spacing: 0;
font-weight: 600;
text-transform: uppercase;
}
.apex-photo-strip .apex-matterport-tile__hint { display: none; }
/* ───── Inline media in the hero (matterport iframe + videos) ───────
Gallery JS replaces the hero
![]()
with an