/**
* Pilates Rockhampton — site styles.
*
* Loaded after Blocksy's stylesheet, so plain selectors override the parent
* without needing !important.
*
* Prefer Blocksy's Customizer for anything it exposes (colours, fonts,
* header/footer layout). Use this file for things the Customizer cannot
* express — that keeps the two from fighting each other.
*
* Blocksy exposes its palette as CSS custom properties, so use those rather
* than hard-coded hex values. That way a palette change in the Customizer
* flows through here too:
*
* var(--theme-palette-color-1) … through --theme-palette-color-8
* var(--theme-text-color)
* var(--theme-link-initial-color)
* var(--theme-content-spacing)
*
* Sections below are placeholders, ready for the fixes on the review list.
*/
/* -----------------------------------------------------------------
* 1. Base / typography
* -------------------------------------------------------------- */
/* The "New to Pilates" popup's close button was 32px, too small for a
fingertip; 44px is the usual minimum. The id outranks the theme rule. */
#popmake-1037 .pum-content + .pum-close {
top: -18px;
width: 44px;
height: 44px;
font-size: 28px;
line-height: 40px;
}
/* -----------------------------------------------------------------
* 2. Header & navigation
* -------------------------------------------------------------- */
/* Social icons. Blocksy draws each one as a filled circle 2.5× the icon
* size, so the default felt oversized next to the logo — and on tablet
* widths the row wrapped, dropping the last circle onto the hero logo.
* One size token shrinks the circle and the icon together; nowrap keeps
* the row on one line (at this size all five fit with room to spare).
*
* Selector is (0,3,0) — class + attribute inside .ct-header — because
* Blocksy's global.css addresses these same tokens at (0,3,0) via
* '[data-header*="type-1"] [data-id="socials"].ct-header-socials', both
* at top level and again inside its mobile media query. Matching that
* weight lets source order decide, and this file loads later. */
.ct-header .ct-header-socials[data-id="socials"] {
--theme-icon-size: 14px;
--items-spacing: 10px;
--wrap: nowrap;
}
/* Gift voucher. Blocksy's header button is a text pill, the odd shape out in
* a row of circles. Draw it as a fifth circle: the socials' size and spacing,
* brand purple, with a gift glyph (Lucide "gift", ISC licence). The label
* stays in the markup for screen readers and as a tooltip; the offcanvas
* menu and footer spell it out. Blocksy sizes the pill through tokens on
* [data-size], so those are overridden rather than its padding rules. */
/* Blocksy gives every header item a 10px margin each side, which puts 20px
between this circle and the socials against their own 10px; drop the
trailing one. */
.ct-header .ct-header-cta[data-id="button"] {
--margin: 0 0 0 10px;
}
.ct-header .ct-header-cta[data-id="button"] .ct-button {
--theme-button-min-height: 35px;
--theme-button-padding: 0;
--theme-button-font-size: 0;
width: 35px;
border-radius: 50%;
justify-content: center;
}
/* On desktop Blocksy uses this pseudo-element as the button's hover shadow:
absolute, transparent and behind it. Put it back in flow. */
.ct-header .ct-header-cta[data-id="button"] .ct-button::before {
content: "";
display: block;
position: static;
opacity: 1;
z-index: auto;
border-radius: 0;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
/* Hamburger. Blocksy's trigger is the bare 24px glyph, a small thing to hit
with a thumb. A pseudo-element widens the tap area to 44px without moving
anything; clicks on it land on the button. */
.ct-header .ct-header-trigger {
position: relative;
}
.ct-header .ct-header-trigger::after {
content: "";
position: absolute;
inset: -10px;
}
/* Mobile: the icons take the logo's place.
*
* Below the tablet breakpoint the row cannot hold all three items — a 24px
* hamburger, a ~117px centred logo and a ~215px run of circles inside
* 375px — so the icons ended up sitting on the logo. Only ~106px is free
* beside the logo, which is two icons at a decent tap size, not five.
*
* Rather than collapse the icons behind a toggle, drop the logo and let the
* icons have the space: on a phone they are the useful half (call, email,
* the two socials), and the brand is not lost — the offcanvas panel carries
* the logo when the menu opens, and the page itself leads with it.
*
* That leaves the hamburger and a ~215px icon run inside ~329px of content
* width, which fits with room to spare and needs no JavaScript. */
@media (max-width: 999.98px) {
.ct-header [data-row="middle"] [data-id="logo"] {
display: none;
}
}
/* Sticky header background: warm stone, palette 7, like the cards. It was
* the old gold-to-pink wash until the stone went in (Praj, 30/10/2026).
* Selector matches the specificity of the rule global.css emits (0,4,0);
* this file loads later, so source order settles it. */
[data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
background-color: var(--theme-palette-color-7, #f1ebe5);
background-image: none;
box-shadow: 0 6px 18px rgba(27, 47, 60, 0.08);
}
/* Desktop menu on narrower screens (1000-1365px): Blocksy's 50px between
* items and 70px before the menu leave the five items too little room, so
* both close up. functions.php stops Blocksy folding them into "More". */
@media (max-width: 1365.98px) {
[data-header*="type-1"] .ct-header [data-id="menu"] {
--menu-items-spacing: 30px;
--margin: 0 0 0 24px !important;
}
}
/* The small header logo waits until the hero logo has scrolled away
(header-autohide.js sets .pr-past-hero), so there are never two. */
html:not(.pr-past-hero) .ct-header [data-sticky*="yes"] [data-id="logo"] {
opacity: 0;
visibility: hidden;
}
/* Header logo. The big logo lives in the hero, so the header's own logo
* item stays hidden at the top of the page and fades in once the sticky
* state engages — a compact brand mark for the bar without doubling the
* hero logo underneath it. */
.ct-header [data-id="logo"] {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease;
}
.ct-header [data-sticky*="yes"] [data-id="logo"] {
opacity: 1;
visibility: visible;
}
/* Other pages have no hero logo, so the stone row shows its own from the
top (Praj, 30/10/2026). */
body:not(.home) .ct-header [data-id="logo"] {
opacity: 1;
visibility: visible;
}
/* The stone row at 80px rather than Blocksy's 120px, which left the menu
floating in it (Praj, 30/10/2026). */
.ct-header [data-device="desktop"] [data-row*="middle"] {
--height: 80px;
}
.ct-header [data-device="desktop"] [data-row*="middle"] > .ct-container {
height: 80px !important;
}
/* Blocksy writes the sticky placeholder's height inline from its own 120px
setting, which left a strip of page between the row and the band. */
#header [data-device="desktop"] .ct-sticky-container {
height: 80px !important;
}
.ct-header [data-id="logo"] .site-logo-img,
.ct-header [data-id="logo"] img {
max-height: 44px;
width: auto;
}
/* The logo item fills the bar's height but its link sat at the top, so the
* 44px logo hung high in the sticky bar. Centre it on the menu and icons. */
.ct-header [data-id="logo"] {
display: flex;
align-items: center;
}
.ct-header [data-id="logo"] .site-logo-container {
display: flex;
align-items: center;
}
/* Offcanvas (hamburger) panel: the sticky bar's stone, so the menu feels
* like part of the header it slides out of. */
[data-header*="type-1"] #offcanvas .ct-panel-inner {
background-color: var(--theme-palette-color-7, #f1ebe5);
background-image: none;
}
/* -----------------------------------------------------------------
* 3. Home page
* -------------------------------------------------------------- */
/* Phones. Long centred paragraphs are hard to read - every line starts in a
different place - so the class-card descriptions and the studio paragraph
after the prices go left. Short centred lines (price notes) stay centred.
And stacked, the white price cards lose their edges against the white page,
so all three get a hairline to keep reading as cards. */
@media (max-width: 767.98px) {
/* Weighted to beat core's ":root .has-text-align-center" and Stackable
3.20's doubled ".stk-block.stk-block [class*=has-text-align-]". */
:root .stk-17d3694 .stk-block .stk-block-text__text,
:root .stk-d8d5ed7 + p.has-text-align-center {
text-align: left;
}
.stk-a4dc2a8 .stk-block-column {
box-shadow: inset 0 0 0 1px var(--theme-palette-color-5, #e2e7ed);
}
}
/* Google reviews. The plugin makes each review a 76px scrolling box; iOS hides
the scrollbar, so reviews looked cut off mid-sentence. Clamp to 8 lines with
a real ellipsis instead - no cap at all left short reviews in huge cards. */
#g-review.layout_style-1 .g-review .gr-inner-body {
max-height: none;
overflow: visible;
}
#g-review.layout_style-1 .g-review .gr-inner-body p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
line-clamp: 8;
overflow: hidden;
}
/* "Pilates to Suit Everyone" is the page's H1 (seo-tune.php; the hero is
the logo), kept at the size it had as an h3. Phones keep the block's
own 25px. */
.stk-99466fa .stk-block-heading__text {
font-size: 30px;
}
/* No review dates. "2 years ago" beside a five-star review only dates it;
the plugin's own hide-date switch is a paid feature, and it is this rule. */
#g-review .gr-stars .time {
display: none;
}
/* -----------------------------------------------------------------
* 3a. Gift voucher form
* -------------------------------------------------------------- */
/* Simple Pay's button is set to no style of its own (see
style-gift-voucher-button.php), which leaves the browser default. Dress
it as the site's pill buttons, at a size a thumb can find. Weighted above
the plugin's ".simpay-styled .simpay-btn:not(.stripe-button-el)". */
.simpay-form-control button.simpay-btn.simpay-payment-btn {
min-height: 48px;
padding: 12px 40px;
border: 0;
border-radius: 50px;
background: var(--theme-palette-color-1, #7224ff);
color: #fff;
font-family: inherit;
font-size: 1.05rem;
font-weight: 500;
line-height: 1.3;
cursor: pointer;
transition: background-color 0.12s ease;
}
.simpay-form-control button.simpay-btn.simpay-payment-btn:hover,
.simpay-form-control button.simpay-btn.simpay-payment-btn:focus-visible {
background: var(--theme-palette-color-2, #ff3e00);
color: #fff;
}
.simpay-form-control button.simpay-btn.simpay-payment-btn:disabled {
opacity: 0.6;
cursor: default;
}
/* The page around the form (see design-gift-voucher-page.php): a voucher
preview beside the form, quick-pick amounts, three steps, fine print. */
.pr-voucher {
--pr-gold: var(--theme-palette-color-1, #f7941d); /* was the old gold, #e9b949 */
--pr-ink: var(--theme-palette-color-4, #111518);
--pr-line: var(--theme-palette-color-5, #e4d9cd); /* stone, not cool grey */
}
.pr-voucher__intro {
max-width: 62ch;
margin: 0 auto 2.5rem;
text-align: center;
font-size: 1.1rem;
}
.pr-voucher__layout {
gap: 2.5rem;
align-items: flex-start;
}
/* Voucher preview card. Dark with the gold of the logo, so it reads as the
real thing. Names and amount fill in as the form is typed. */
.pr-voucher-card {
position: relative;
overflow: hidden;
padding: 1.75rem 1.75rem 1.5rem;
border-radius: 20px;
color: #fff;
background:
radial-gradient(120% 90% at 100% 0%, rgba(233, 185, 73, 0.28), transparent 55%),
var(--pr-ink);
box-shadow: 0 18px 40px -24px rgba(17, 21, 24, 0.6);
}
.pr-voucher-card__logo {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 72px;
height: 72px;
border-radius: 50%;
background: #fff;
padding: 4px;
}
.pr-voucher-card__kicker {
margin: 0 0 2.25rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pr-gold);
}
.pr-voucher-card__amount {
margin: 0 0 1.5rem;
font-family: "Merriweather", Georgia, serif;
font-size: 3rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
}
.pr-voucher-card__amount.is-low {
color: rgba(255, 255, 255, 0.5);
}
.pr-voucher-card__names {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 0 0 1.5rem;
}
.pr-voucher-card__names dt {
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
.pr-voucher-card__names dd {
margin: 0.2rem 0 0;
font-weight: 600;
overflow-wrap: anywhere;
}
.pr-voucher-card__foot {
margin: 0;
padding-top: 1rem;
border-top: 1px dashed rgba(255, 255, 255, 0.28);
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
}
/* The studio's real voucher artwork across the top of the card (Tracy's
"Gift Voucher Standard (Basic)", its drop shadow cropped off), with the
amount and names filling in below it. The art has its own logo and
"Gift Voucher", so the card's are hidden (Praj, 30/10/2026). */
.pr-voucher-card {
padding-top: calc(584 / 1400 * 100% + 1.25rem);
background: url("../img/gift-voucher-card.jpg") top center / 100% auto no-repeat, var(--theme-palette-color-4, #1b2f3c);
}
.pr-voucher-card__logo,
.pr-voucher-card__kicker {
display: none;
}
.pr-voucher-card .pr-voucher-card__amount {
margin-bottom: 1rem;
font-size: 2.25rem;
}
/* Form first, then the card and photo: the form is what people came for
(Praj, 30/10/2026). */
@media (min-width: 782px) {
.pr-voucher__aside {
order: 2;
}
}
.pr-voucher__photo {
margin: 1.5rem 0 0;
}
.pr-voucher__photo img {
border-radius: 20px;
}
/* The form, in a card like the class cards. */
.pr-voucher__form {
padding: 1.75rem;
border-radius: 20px;
background: var(--theme-palette-color-7, #f1ebe5);
}
.pr-voucher__heading {
margin-top: 0;
}
.pr-voucher__form .simpay-checkout-form .simpay-conditional-field + .simpay-conditional-field {
margin-top: 1.1rem;
}
.pr-voucher__form .simpay-form-control label {
display: block;
margin-bottom: 0.35rem;
font-weight: 600;
color: var(--pr-ink);
}
.pr-voucher__form .simpay-form-control input[type="text"],
.pr-voucher__form .simpay-form-control input[type="email"],
.pr-voucher__form .simpay-form-control input[type="tel"],
.pr-voucher__form .simpay-form-control input[type="number"] {
width: 100%;
padding: 0.75rem 0.9rem;
border: 1px solid var(--pr-line);
border-radius: 12px;
background: #fff;
font-size: 1rem;
box-shadow: none;
}
.pr-voucher__form .simpay-form-control input:focus {
outline: none;
border-color: var(--theme-palette-color-1, #7224ff);
box-shadow: 0 0 0 3px rgba(114, 36, 255, 0.15);
}
.pr-voucher__form .simpay-form-control .simpay-payment-btn {
width: 100%;
margin-top: 0.5rem;
}
/* Quick picks. Authored in the page, moved above the amount field by
voucher-page.js. */
.pr-voucher-picks {
margin: 0 0 1.1rem;
}
.pr-voucher-picks__label {
margin: 0 0 0.35rem;
font-weight: 600;
color: var(--pr-ink);
}
.pr-voucher-picks__row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.pr-voucher-picks__row button {
min-height: 40px;
padding: 0.4rem 1rem;
border: 1px solid var(--theme-palette-color-1, #7224ff);
border-radius: 50px;
background: #fff;
color: var(--theme-palette-color-1, #7224ff);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
}
.pr-voucher-picks__row button[aria-pressed="true"] {
background: var(--theme-palette-color-1, #7224ff);
color: #fff;
}
.pr-voucher-picks__hint {
margin: 0.5rem 0 0;
font-size: 0.85rem;
color: var(--theme-palette-color-3, #636c72);
}
/* How it works: three numbered steps. */
.pr-voucher-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin: 1.5rem 0 2.5rem;
padding: 0;
list-style: none;
counter-reset: step;
}
.pr-voucher-steps li {
counter-increment: step;
padding-left: 3.25rem;
position: relative;
}
.pr-voucher-steps li::before {
content: counter(step);
position: absolute;
left: 0;
top: 0;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--theme-palette-color-1, #7224ff);
color: #fff;
font-family: "Merriweather", Georgia, serif;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.pr-voucher-steps strong {
display: block;
margin-bottom: 0.25rem;
color: var(--pr-ink);
}
.pr-voucher-steps span {
color: var(--theme-palette-color-3, #636c72);
}
.pr-voucher__fine {
max-width: 60ch;
margin: 0 auto;
text-align: center;
font-size: 0.9rem;
color: var(--theme-palette-color-3, #636c72);
}
@media (max-width: 781px) {
.pr-voucher__layout {
gap: 1.5rem;
}
.pr-voucher__form {
padding: 1.25rem;
}
.pr-voucher-steps {
grid-template-columns: 1fr;
}
.pr-voucher-card__amount {
font-size: 2.5rem;
}
}
/* -----------------------------------------------------------------
* 4. Class schedule
* -------------------------------------------------------------- */
/* Two sections: group classes as cards in a column per day, then private
appointment hours as text. Total Body Fitness is cream with an amber
edge, Beginner teal; the edge and the label both carry the type too, so
it never rests on the tint alone. */
/* Labels take the body face. Captured here because Blocksy redefines
--theme-font-family on h1-h6 themselves (see section 5). */
.pr-schedule {
--pr-schedule-label-font: var(--theme-font-family);
--pr-schedule-ink: var(--theme-palette-color-4, #1b2f3c);
--pr-schedule-muted: #3f5459;
--pr-schedule-line: #e8e3da;
--pr-schedule-tbf: #fff7e6;
--pr-schedule-tbf-edge: var(--theme-palette-color-1, #f7941d);
--pr-schedule-beginner: #e0f2ef;
--pr-schedule-beginner-edge: #2a9d8f;
color: var(--pr-schedule-ink);
}
.pr-schedule__section {
margin-bottom: 3rem;
}
.pr-schedule .pr-schedule__heading {
margin: 0 0 0.35rem;
font-size: 1.5rem;
}
.pr-schedule__lead {
margin: 0 0 1rem;
color: var(--pr-schedule-muted);
}
/* Key: a small swatch of each type, edge and all. */
.pr-schedule__key {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
margin: 0 0 1rem;
font-size: 0.875rem;
color: var(--pr-schedule-muted);
}
.pr-schedule__key-item::before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin-right: 6px;
border-radius: 3px;
vertical-align: -2px;
}
.pr-schedule__key-item--tbf::before {
background: var(--pr-schedule-tbf);
border-left: 4px solid var(--pr-schedule-tbf-edge);
}
.pr-schedule__key-item--beginner::before {
background: var(--pr-schedule-beginner);
border-left: 4px solid var(--pr-schedule-beginner-edge);
}
/* A column per day on a desktop, two across on a phone. */
.pr-schedule__days {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem 0.75rem;
}
@media (min-width: 690px) {
.pr-schedule__days {
grid-template-columns: repeat(5, 1fr);
}
}
.pr-schedule .pr-schedule__day-name {
margin: 0 0 0.6rem;
padding: 0.4rem 0;
border-bottom: 2px solid var(--pr-schedule-ink);
font-family: var(--pr-schedule-label-font);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.pr-schedule__day-name abbr {
text-decoration: none;
border: 0;
cursor: default;
}
.pr-schedule__sessions {
display: grid;
gap: 0.6rem;
margin: 0;
padding: 0;
list-style: none;
}
.pr-schedule__session {
margin: 0;
border: 1px solid var(--pr-schedule-line);
border-left: 4px solid var(--pr-schedule-tbf-edge);
border-radius: 10px;
background: var(--pr-schedule-tbf);
line-height: 1.3;
}
.pr-schedule__session--beginner {
border-left-color: var(--pr-schedule-beginner-edge);
background: var(--pr-schedule-beginner);
}
/* The link fills the card, so the whole card is the tap target. Scoped
under .pr-schedule to beat the theme's a:hover colour. */
.pr-schedule .pr-schedule__link {
position: relative;
display: block;
padding: 0.65rem 0.75rem 0.7rem;
border-radius: 0 9px 9px 0;
color: inherit;
text-decoration: none;
}
.pr-schedule .pr-schedule__link:hover {
color: inherit;
background: rgba(17, 21, 24, 0.05);
}
.pr-schedule .pr-schedule__link:focus-visible {
outline: 2px solid var(--pr-schedule-ink);
outline-offset: 2px;
}
/* The tappable cue. #5f6f73, a teal grey, clears 3:1 on both card colours. */
.pr-schedule__book {
position: absolute;
top: 50%;
right: 0.65rem;
transform: translateY(-50%);
padding: 3px 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.3;
color: #1b2f3c;
background: #fde3c0;
border-radius: 999px;
box-shadow: inset 0 0 0 1.5px var(--theme-palette-color-1, #f7941d);
transition: background-color 0.15s ease;
}
.pr-schedule__link:hover .pr-schedule__book,
.pr-schedule__link:focus-visible .pr-schedule__book {
background: var(--theme-palette-color-1, #f7941d);
}
.pr-schedule__time {
display: block;
font-weight: 700;
}
.pr-schedule__name {
display: block;
margin-top: 0.15rem;
font-size: 0.8rem;
color: var(--pr-schedule-muted);
}
/* Private sessions: a compact bar under the class grid, the same shape as
the class cards (radius, edge) in grey with a navy edge. The heading and
line sit on the left, Book on the right; on a phone the button drops
under the line. As a plain section it hung loose at the foot of the page. */
.pr-schedule__section--private {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.25rem 2rem;
padding: 1.25rem 1.5rem;
border: 1px solid var(--pr-schedule-line);
border-left: 4px solid var(--pr-schedule-ink);
border-radius: 10px;
background: var(--theme-palette-color-7, #f1ebe5);
}
.pr-schedule .pr-schedule__section--private .pr-schedule__heading {
grid-column: 1;
margin: 0;
font-size: 1.25rem;
}
.pr-schedule__section--private .pr-schedule__lead {
grid-column: 1;
margin: 0;
}
.pr-schedule .pr-schedule__section--private .pr-schedule__cta {
grid-column: 2;
grid-row: 1 / span 2;
justify-content: flex-end;
margin: 0;
}
@media (max-width: 689px) {
.pr-schedule__section--private {
grid-template-columns: 1fr;
}
.pr-schedule .pr-schedule__section--private .pr-schedule__cta {
grid-column: 1;
grid-row: auto;
justify-content: flex-start;
margin-top: 1rem;
}
}
/* Both Book buttons wide enough to read as buttons, not tags. */
.pr-schedule .pr-schedule__cta .ct-button {
min-width: 160px;
justify-content: center;
}
.pr-schedule__cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin: 1.75rem 0 0;
}
/* The group buttons sit between the key and the grid, lined up with the
heading rather than centred. */
.pr-schedule .pr-schedule__cta--top {
justify-content: flex-start;
margin: 0 0 1.5rem;
}
/* The group buttons wear the key's colours, like the cards: the pale tint
with a border in the class colour, navy type. Hover fills with the
class colour; navy reads on both (6.4:1 on amber, 4.4:1 on teal). */
.pr-schedule .pr-schedule__cta--top .ct-button {
background: var(--pr-schedule-tbf);
box-shadow: inset 0 0 0 2px var(--pr-schedule-tbf-edge);
color: var(--pr-schedule-ink);
}
.pr-schedule .pr-schedule__cta--top .ct-button:hover {
background: var(--pr-schedule-tbf-edge);
color: var(--pr-schedule-ink);
}
.pr-schedule .pr-schedule__cta--top .pr-schedule__button--beginner {
background: var(--pr-schedule-beginner);
box-shadow: inset 0 0 0 2px var(--pr-schedule-beginner-edge);
}
.pr-schedule .pr-schedule__cta--top .pr-schedule__button--beginner:hover {
background: var(--pr-schedule-beginner-edge);
}
/* The private button is the quieter one: outlined in navy. */
.pr-schedule .pr-schedule__outline {
background: transparent;
box-shadow: inset 0 0 0 2px var(--pr-schedule-ink);
color: var(--pr-schedule-ink);
}
.pr-schedule .pr-schedule__outline:hover {
background: var(--pr-schedule-ink);
color: #fff;
}
.pr-schedule__note,
.pr-schedule__updated {
margin: 0;
font-size: 0.875rem;
text-align: center;
}
/* Muted by colour, not opacity: #5f6f73, a teal grey, on white is 5.2:1. */
.pr-schedule__updated {
margin-top: 0.25rem;
color: #5f6f73;
}
/* -----------------------------------------------------------------
* 5. Footer
*
* The footer had drifted into three unrelated type treatments — the
* links column came from a Stackable block forcing Bahnschrift and a
* gradient text fill, the headings were Merriweather, and everything
* else fell back to the system stack across five different sizes with
* ad-hoc opacity on top.
*
* Everything below runs off the tokens in .ct-footer: two sizes, two
* text colours, one heading treatment. Opacity is not used to make text
* quieter — that stacks unpredictably and wrecked the contrast of the
* ABN line. Colour is set explicitly instead.
*
* Contrast against the footer's teal navy #273f4f, measured:
* --pr-footer-text #d5cec5 7.0:1 passes AA (warm stone; the cool
* grey #868f97 was too faint)
* --pr-footer-bright palette 5 #e4d9cd, headings and hover
* The previous #636c72 body colour was 3.4:1, which failed.
* -------------------------------------------------------------- */
/* Blocksy's own footer background was a pale grey behind the rows; navy,
so no gap between rows can ever show it. */
footer.ct-footer {
background-color: #273f4f;
}
.ct-footer {
--pr-footer-text: #d5cec5;
--pr-footer-bright: var(--theme-palette-color-5, #e2e7ed);
--pr-footer-size-body: 0.9375rem;
--pr-footer-size-sm: 0.8125rem;
--pr-footer-leading: 1.75;
/* The body face, captured here rather than used directly on the
headings below.
Blocksy's heading typography redefines --theme-font-family *on the
h1-h6 elements themselves* (to Merriweather), so a var() read inside
a heading rule resolves to the heading font, not the body font —
setting 'font-family: var(--theme-font-family)' on an h3 is a no-op
that looks like it should work. Reading it here, on a div where the
variable is not shadowed, resolves it to the real body stack; the
headings then inherit that resolved value. */
--pr-footer-label-font: var(--theme-font-family);
}
.ct-footer [data-row="middle"] > .ct-container {
align-items: start;
column-gap: clamp(2rem, 6vw, 5rem);
row-gap: 3rem;
}
/* One body treatment for every column, whatever block produced it.
*
* Body size steps down one notch from the site's 16px body copy — at
* full size the footer read heavier than the quiet, secondary role it
* plays on the page. This selector's specificity (0,2,1) already beats
* Blocksy's '.ct-widget > *' (0,1,0), so no !important is needed.
*
* :is() keeps these selectors at a predictable weight (0,2,1), which
* the two-class overrides further down clear cleanly. */
.ct-footer [data-row="middle"] :is(p, li) {
font-size: var(--pr-footer-size-body);
line-height: var(--pr-footer-leading);
color: var(--pr-footer-text);
}
.ct-footer [data-row="middle"] a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.ct-footer [data-row="middle"] a:hover,
.ct-footer [data-row="middle"] a:focus-visible {
color: var(--pr-footer-bright);
}
/* Fine print — the one deliberate step down from body size. Two
classes deep so it beats the (0,2,1) default above. */
.ct-footer [data-row="middle"] .pr-footer__note {
font-size: var(--pr-footer-size-sm);
}
/* Column headings.
*
* These were Merriweather, the site's heading face, on the reasoning that
* matching the headings elsewhere was the consistent choice. In practice it
* read badly: Merriweather is a text serif with heavy, bracketed serifs, and
* at 12.8px in all-caps with tracking those serifs turn to noise — the
* letterforms muddy together instead of reading as a crisp label.
*
* The rule these follow is by role, not by tag. Merriweather is for headings
* that are read as prose — the h2s up the page. These are interface labels
* that name a column, closer to the nav than to a headline, so they take the
* body face and earn their emphasis from weight, caps and tracking instead.
*
* font-family comes from the token above, not from --theme-font-family
* directly — see the note there for why the direct read silently fails. */
.pr-footer__heading {
font-family: var(--pr-footer-label-font);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
line-height: 1.4;
color: var(--pr-footer-bright);
margin: 0 0 1rem;
}
.pr-footer__heading--tight {
margin-top: 2rem;
}
/* --- Column one: brand ------------------------------------------ */
.pr-footer__logo img {
max-width: 100%;
height: auto;
}
.pr-footer__tagline {
margin: 1rem 0 0;
max-width: 26ch;
}
/* --- Column two: links ------------------------------------------ */
.pr-footer__links {
margin: 0;
padding: 0;
list-style: none;
}
.pr-footer__links li + li {
margin-top: 0.55rem;
}
/* The link text is 18px tall; pad the tap target to 28px and pull the
padding back out with margins so the list spacing stays as it is. */
.pr-footer__links a {
display: inline-block;
padding: 5px 0;
margin: -5px 0;
}
/* --- Column three: visiting and contact -------------------------- */
.pr-footer__address {
margin: 0 0 0.75rem;
}
.pr-footer__note {
margin: 0 0 0.9rem;
max-width: 34ch;
}
.pr-footer__directions {
margin: 0;
font-weight: 600;
}
/* The one call to action down here, so it gets the bright treatment
rather than inheriting the muted body colour. Scoped deep enough to
clear the generic footer link rule above. */
.ct-footer [data-row="middle"] .pr-footer__directions a {
color: var(--pr-footer-bright);
}
.pr-footer__contact {
margin: 0;
}
/* --- Copyright bar ---------------------------------------------- */
.ct-footer [data-row="bottom"] {
font-size: var(--pr-footer-size-sm);
color: var(--pr-footer-text);
}
/* Blocksy colours copyright links #ff0000 from the Customizer; links here
read as the text around them, as in the columns above. */
.ct-footer [data-row="bottom"] a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.ct-footer [data-row="bottom"] a:hover,
.ct-footer [data-row="bottom"] a:focus-visible {
color: var(--pr-footer-bright);
}
/* The ABN now sits beside the copyright. Fade the divider rather than
the text either side of it, so both read at full strength. */
.pr-copyright__sep {
margin: 0 0.35em;
opacity: 0.45;
}
/* On a phone, put the ABN on its own line - wrapping left the divider orphaned. */
@media (max-width: 689.98px) {
.pr-copyright__sep {
display: none;
}
.pr-copyright__abn {
display: block;
}
/* Policies and Sitemap share the last line, so keep the dot between them. */
.pr-copyright__policies + .pr-copyright__sep {
display: inline;
}
}
@media (prefers-reduced-motion: reduce) {
.ct-footer :is([data-row="middle"], [data-row="bottom"]) a {
transition: none;
}
}
@media (max-width: 999px) {
.ct-footer [data-row="middle"] > .ct-container {
row-gap: 2.5rem;
}
.pr-footer__heading--tight {
margin-top: 1.5rem;
}
}
/* Blocksy's default footer grid drops straight from 3 columns to a full
* single-column stack at its tablet breakpoint (max-width: 999.98px) — so
* anything narrower than a small laptop stacked, including tablets and
* large phones in landscape. Hold 2 columns through that range instead,
* via the same --grid-template-columns custom property Blocksy's own
* dynamic CSS sets on this element, and let the true single-column stack
* happen only below 640px, where Blocksy's mobile CSS already takes over. */
@media (min-width: 640px) and (max-width: 999.98px) {
.ct-footer [data-row="middle"] > div {
--grid-template-columns: repeat(2, 1fr) !important;
}
}
/* -----------------------------------------------------------------
* 5a. Page title band and small labels
* -------------------------------------------------------------- */
/* Blocksy's breadcrumb is 11px with the home link in the accent colour, so
it reads as a stray link rather than a trail. Larger, tracked, muted. */
.hero-section .ct-breadcrumbs {
margin-top: 0.6rem;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero-section .ct-breadcrumbs,
.hero-section .ct-breadcrumbs a {
color: var(--theme-palette-color-4, #111518);
opacity: 0.6;
}
.hero-section .ct-breadcrumbs .ct-separator {
width: 6px;
height: 6px;
margin: 0 0.6em;
}
/* The band was too tall for a title and a breadcrumb: a 60px title, 50px
under it, and on the blog index a 250px minimum on top. A smaller title
and less space under it, and no minimum, so the band is as tall as what
is in it. Blocksy sets both through these variables per page type, as
[data-prefix="..."] .hero-section, hence body[data-prefix] to outrank it. */
body[data-prefix] .hero-section[data-type="type-2"] {
--min-height: 0px;
--container-padding: 0 0 2.25rem;
}
.hero-section[data-type="type-2"] .page-title {
font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
line-height: 1.2;
}
/* On a phone or tablet the header row holds only the hamburger and the
icons, so 120px of it was mostly empty. The band's top padding follows
--header-height, so it shrinks with the row. */
@media (max-width: 999.98px) {
[data-header] {
--header-height: 80px;
}
#header [data-row="middle"] {
--height: 80px;
}
body[data-prefix] .hero-section[data-type="type-2"] {
--container-padding: 0.5rem 0 1.75rem;
}
}
/* Contact page: the CALL / EMAIL / FACEBOOK / INSTAGRAM labels above each
link. Their size is the block's (fix-contact-labels.php); this spaces
and mutes them. */
.stk-813190a .stk-block-text__text,
.stk-f5dd45e .stk-block-text__text,
.stk-4139cf1 .stk-block-text__text,
.stk-db46650 .stk-block-text__text {
letter-spacing: 0.12em;
color: var(--theme-palette-color-3, #636c72);
}
/* -----------------------------------------------------------------
* 5b. Home class cards, two by two
* -------------------------------------------------------------- */
/* Four cards in one row squeezed each photo to a sliver and ran the sauna
text into a tall column. Two rows of two: Total Body Fitness beside
Beginner, Private beside Sauna. Phones still stack (Stackable's own
rule under 768px). */
@media (min-width: 768px) {
.stk-17d3694-column {
flex-wrap: wrap;
}
.stk-17d3694-column > .stk-block-column {
/* Stackable sets flex-basis per column count with !important. */
flex: 0 0 calc(50% - var(--stk-column-gap, 35px) / 2) !important;
max-width: calc(50% - var(--stk-column-gap, 35px) / 2) !important;
}
}
/* Real photos of the studio now, so no tint: the blocks carry a grey-sepia
filter (and a 30% lift) from when the cards held mismatched stock shots. */
body .stk-17d3694 .stk-block-image .stk-img-wrapper img {
filter: none !important;
}
/* Two to a row, the cards are twice as wide, so the photos fill them: less
padding and the image at the card's full inner width (the blocks set 110%,
which the oval then clipped). */
body .stk-17d3694 .stk-block-image .stk-img-wrapper {
width: 100% !important;
}
body .stk-17d3694 .stk-block-image .stk-img-wrapper img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover !important;
}
/* Rounded rectangles rather than the oval the blocks set, which cut into
people at the sides (Praj, 30/10/2026, 2026-10-30-card-photo-shapes.png). */
body .stk-17d3694 .stk-block-image {
border-radius: 16px !important;
}
/* The same stone on all four (two had none). Phones had no padding, which
only showed once the cards were stone rather than near-white. */
body .stk-17d3694-column > .stk-block-column {
padding: 20px 20px 28px !important;
border-radius: 20px;
background-color: var(--theme-palette-color-7, #f1ebe5) !important;
}
@media (min-width: 768px) {
/* Same height in each row, and the Book button at the foot of each card
whatever the text length. */
body .stk-17d3694-column > .stk-block-column {
align-self: stretch !important;
padding: 28px 28px 36px !important;
}
/* The price cards below get the same: their Buy and Book buttons level
along the row, whatever the text above them. */
:is(.stk-17d3694-column, .stk-a4dc2a8-column) > .stk-block-column > .stk-column-wrapper {
flex: 1;
display: flex;
flex-direction: column;
}
:is(.stk-17d3694-column, .stk-a4dc2a8-column) > .stk-block-column .stk-block-content.stk-inner-blocks {
flex: 1;
display: flex;
flex-direction: column;
}
:is(.stk-17d3694-column, .stk-a4dc2a8-column) > .stk-block-column .stk-block-button-group {
margin-top: auto;
}
}
/* -----------------------------------------------------------------
* 5c. Amber and navy (apply-amber-colourway.php does the database side)
* -------------------------------------------------------------- */
/* White on amber is 2:1. Navy on amber reads; so does navy on the white
outlined buttons. Weighted past Stackable's per-block inline colours. */
body .stk-block-button .stk-button .stk-button__inner-text {
color: var(--theme-palette-color-4, #1b2f3c) !important;
}
.ct-button,
.wp-block-button__link {
color: var(--theme-palette-color-4, #1b2f3c);
}
/* The header voucher circle sits with the white-on-amber social icons, so
its glyph is white too, and solid: the line icon was too faint beside the
filled Facebook and Instagram marks. */
.ct-header .ct-header-cta[data-id="button"] .ct-button {
color: #fff;
}
.ct-header .ct-header-cta[data-id="button"] .ct-button::before {
filter: none; /* Blocksy blurs this pseudo-element for its hover shadow. */
width: 20px;
height: 20px;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
/* Class card titles take palette 1 from their blocks, and amber on the
cards' pale grey is too faint to read. Navy, like the other headings. */
body .stk-17d3694 .stk-block-heading .stk-block-heading__text,
.stk-17d3694 .stk-block-heading__text .stk-highlight {
color: var(--theme-palette-color-4, #1b2f3c) !important;
}
/* Hero: Book a Class is the one filled button; Class Schedule is outlined. */
body .stk-b34024c .stk-button {
background: transparent !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-4, #1b2f3c);
}
/* Prices: "From" in front of the membership rate, small so the figure
still leads (membership-copy-and-benefits-photo.php). */
.pr-price-from {
margin-right: 0.2em;
font-size: 0.45em;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
vertical-align: middle;
}
/* The Benefits of Pilates: Tracy's photo beside the intro. The text column
keeps the room; the photo sits level with the heading. */
@media (min-width: 768px) {
.stk-49edb04-column > .stk-aaab2c0 {
flex: 1 1 58% !important;
}
.stk-49edb04-column > .stk-b7e21c4 {
flex: 1 1 42% !important;
align-self: flex-start;
margin-top: var(--stk--preset--spacing--60, 2.25rem);
}
}
.pr-benefits-photo img {
border-radius: 20px;
}
/* Private card: the specialities as dot points (private-card-copy.php).
The card is centred, so the list sits as a centred block with its own
lines left-aligned, which keeps the bullets in a column. */
.stk-17d3694 .pr-private-list {
display: table;
margin: 0.75rem auto;
padding-left: 1.2em;
text-align: left;
font-size: 15px;
font-weight: 600;
color: var(--theme-palette-color-4, #1b2f3c);
}
/* The lead line's block brings its own bottom margin, which doubled the
gap above the list. The list's margin alone spaces both sides. */
.stk-17d3694 .stk-0546430 {
margin-bottom: 0 !important;
}
.stk-17d3694 .pr-private-list li::marker {
color: var(--theme-palette-color-1, #f7941d);
}
.stk-17d3694 .pr-private-note {
margin-bottom: 1.5rem;
font-size: 15px;
text-align: center;
}
@media (max-width: 767.98px) {
.stk-17d3694 .pr-private-note {
text-align: left;
}
}
/* Menu: navy and a touch bolder, not Blocksy's grey, which washed out over
the home hero photo once its white wash came down to 75%. The current
page in the darker amber. The navy band's white menu (below) still wins
on inner pages; it's more specific. */
.ct-header .ct-menu-link {
color: var(--theme-palette-color-4, #1b2f3c) !important;
font-weight: 600;
}
.ct-header .current-menu-item > .ct-menu-link,
.ct-header .ct-menu-link:hover {
color: #b45309 !important; /* the one text orange (amber text fails contrast) */
}
/* Navy title band (apply-amber-colourway.php sets its colour). The header
is its own stone row above it now, so only the title and breadcrumbs sit
on the navy. Stone, not white, on the band (Praj, 30/10/2026): the warm stone that
replaced the greys, so the band ties in with the rest of the page. */
.hero-section[data-type="type-2"] {
--theme-heading-color: var(--theme-palette-color-7, #f1ebe5);
--theme-text-color: var(--theme-palette-color-7, #f1ebe5);
}
/* A curved bottom edge, after the rounded photos and cards (Praj,
30/10/2026, 2026-10-30-band-edge-options.png, 4). */
body .hero-section[data-type="type-2"] {
border-radius: 0 0 50% 50% / 0 0 56px 56px;
overflow: hidden;
padding-bottom: 30px !important;
}
@media (max-width: 689.98px) {
body .hero-section[data-type="type-2"] {
border-radius: 0 0 50% 50% / 0 0 28px 28px;
padding-bottom: 16px !important;
}
}
.hero-section[data-type="type-2"] .page-title,
.hero-section[data-type="type-2"] h1 {
color: var(--theme-palette-color-7, #f1ebe5) !important;
}
.hero-section[data-type="type-2"] .ct-breadcrumbs,
.hero-section[data-type="type-2"] .ct-breadcrumbs a,
.hero-section[data-type="type-2"] .entry-meta,
.hero-section[data-type="type-2"] .entry-meta a {
color: var(--theme-palette-color-7, #f1ebe5) !important;
opacity: 0.8;
}
/* Every page: the menu and icons are their own stone row above the navy
band or the home hero, not laid over them, and that row is the one that
sticks on scroll (Praj, 30/10/2026; home had a stone pill over the hero
photo). Blocksy's transparent header is on everywhere, so it is undone
here: back in flow, and the band loses the 120px it kept clear for it. */
#header [data-transparent] {
position: relative !important;
}
.ct-header [data-transparent-row="yes"] {
background-color: var(--theme-palette-color-7, #f1ebe5) !important;
border-top: 1px solid rgba(27, 47, 60, 0.08);
}
body:not(.home) .hero-section[data-type="type-2"] {
padding-top: 56px !important;
}
.ct-header [data-transparent-row="yes"] .current-menu-item > .ct-menu-link,
.ct-header [data-transparent-row="yes"] .ct-menu-link:hover {
color: #b45309 !important;
}
/* Header icons and the gift voucher circle in navy, not amber (Praj,
30/10/2026). Blocksy colours them from palette 1, so they're overridden
here rather than in the theme settings. */
.ct-header [data-id="socials"] .ct-icon-container,
.ct-header .ct-header-cta[data-id="button"] .ct-button {
background-color: #273f4f !important;
}
.ct-header [data-id="socials"] a:hover .ct-icon-container,
.ct-header .ct-header-cta[data-id="button"] .ct-button:hover {
background-color: #1b2f3c !important;
}
/* Home hero: the white wash over the studio photo at 83%, not the block's
90%, so the photo reads as a photo. The navy logo and menu still hold. */
body .stk-1284f2b:before {
opacity: 0.83 !important;
}
/* The same curved bottom edge as the navy title bands on other pages. */
body .stk-1284f2b {
border-radius: 0 0 50% 50% / 0 0 56px 56px !important;
overflow: hidden;
}
@media (max-width: 689.98px) {
body .stk-1284f2b {
border-radius: 0 0 50% 50% / 0 0 28px 28px !important;
}
}
/* Home page buttons: two-tone amber (Praj, 30/10/2026: "all the buttons two
tone orange"). A light amber fill, #fde3c0 (amber at 22% on white, made
solid so it reads the same on the navy hero), inside an amber outline,
bold navy text, and on hover solid amber with Stackable's
"lift-scale-more" lift and shadow. Class Schedule has its own look. */
body.home .stk-block-button:not(.stk-b34024c) .stk-button {
background: #fde3c0 !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
body.home .stk-block-button:not(.stk-b34024c) .stk-button .stk-button__inner-text {
font-weight: 700;
}
/* Monthly Memberships, the price card to notice: navy, not the deeper stone,
where the amber price clashed (Praj, 30/10/2026,
2026-10-30-membership-card-options.png, D). White type, "From" in amber,
and a solid amber Sign Up. */
body.home .stk-0b0e561 {
background-color: #273f4f !important;
/* The header and footer's sheen (Praj, 30/10/2026). */
background-image: linear-gradient(135deg, #1b2f3c 0%, #34516a 50%, #1b2f3c 100%) !important;
background-size: 100% 100% !important; /* Stackable sized it to 250px */
background-repeat: no-repeat !important;
}
body.home .stk-0b0e561 :is(h1, h2, h3, h4, p, li, span):not(.stk-button__inner-text) {
color: #fff !important;
}
body.home .stk-0b0e561 .stk-2e7337f :is(p, span) {
color: rgba(255, 255, 255, 0.85) !important;
}
body.home .stk-0b0e561 .stk-45dfed3 span {
color: var(--theme-palette-color-1, #f7941d) !important;
}
body.home .stk-0b0e561 .stk-block-button:not(.stk-b34024c) .stk-button {
background: #fde3c0 !important; /* two-tone, as every button */
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d) !important;
}
body.home .stk-0b0e561 .stk-block-button:not(.stk-b34024c) .stk-button .stk-button__inner-text {
color: #1b2f3c !important;
}
/* The class cards' Book buttons, the hero's width: "Book" alone made a
stubby pill. */
body.home .stk-17d3694 .stk-block-button .stk-button {
padding-left: 40px !important;
padding-right: 40px !important;
}
body.home .stk-block-button:not(.stk-b34024c) .stk-button:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d), 0 4px 10px -2px rgba(0, 0, 0, 0.2) !important;
transform: translateY(-8px) scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
body.home .stk-block-button:not(.stk-b34024c) .stk-button:hover {
transform: none;
}
}
/* -----------------------------------------------------------------
* 5e. New-client offer bar (functions.php, pilates_rock_offer_bar)
* -------------------------------------------------------------- */
/* Navy on every page, white text and an amber link, so it stands apart
from the stone header row under it (Praj, 30/10/2026). */
.pr-offer-bar {
background-color: #273f4f;
background-image: none;
color: #fff;
font-size: 14px;
line-height: 1.4;
text-align: center;
}
/* On the home page the header under the bar is light, so a navy rule
marks where the bar ends. Elsewhere the navy header does that itself. */
body.home .pr-offer-bar {
border-bottom: 2px solid var(--theme-palette-color-4, #1b2f3c);
}
.pr-offer-bar p {
margin: 0 auto;
padding: 9px 16px;
max-width: 1290px;
}
.pr-offer-bar a {
margin-left: 0.6em;
font-weight: 700;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
.pr-offer-bar a::after {
content: " \2192";
}
.pr-offer-bar a {
color: var(--theme-palette-color-1, #f7941d);
}
.pr-offer-bar a:hover {
color: #fff;
}
.pr-offer-bar__short {
display: none;
}
@media (max-width: 689.98px) {
.pr-offer-bar {
font-size: 13px;
}
.pr-offer-bar__long {
display: none;
}
.pr-offer-bar__short {
display: inline;
}
/* Two lines on phones, the second ending "Sign me up!" (Praj,
30/10/2026), so no arrow. */
.pr-offer-bar a {
margin-left: 0.3em;
}
.pr-offer-bar a::after {
content: none;
}
}
/* -----------------------------------------------------------------
* 5f. Footer: map pin and map (address-and-footer-map.php)
* -------------------------------------------------------------- */
/* A pin beside the address, so it reads as "find us" at a glance. */
.pr-footer__address {
position: relative;
padding-left: 1.6em;
}
.pr-footer__address::before {
content: "";
position: absolute;
left: 0;
top: 0.15em;
width: 1.1em;
height: 1.1em;
background-color: var(--theme-palette-color-1, #f7941d);
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
.pr-footer__map {
margin-top: 1rem;
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
.pr-footer__map iframe {
width: 100%;
height: 220px;
border: 0;
}
/* One third / two thirds (Praj, 30/10/2026). The left third is the brand
line over the Explore links; the right two thirds are everything about
reaching the studio - Get in touch and Find the studio side by side, the
map across both, Get directions under it. footer-split.php moved Get in
touch into the Find the studio widget for this. Tablets keep the split
with the right side stacked; phones stack everything. */
@media (min-width: 690px) {
[data-footer*="type-1"] .ct-footer [data-row*="middle"] > .ct-container {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
column-gap: 72px;
}
/* The brand line moved down to the copyright bar (footer-slogan.php), so
the first widget area is empty: Explore takes the left third alone,
level with the headings on the right. */
.ct-footer [data-row*="middle"] > .ct-container > [data-column="widget-area-1"],
.ct-footer [data-row*="middle"] > .ct-container > [data-column="ghost"] {
display: none;
}
.ct-footer [data-row*="middle"] > .ct-container > [data-column="widget-area-2"] {
grid-column: 1;
grid-row: 1;
}
.ct-footer [data-row*="middle"] > .ct-container > [data-column="widget-area-3"] {
grid-column: 2;
grid-row: 1;
}
}
/* Phones: no empty first area either. */
.ct-footer [data-row*="middle"] > .ct-container > [data-column="ghost"] {
display: none;
}
/* Inside the right two thirds. The map comes after the address and
Get directions after the map at every width. */
.ct-footer .ct-widget:has(.pr-footer__map) {
display: flex;
flex-direction: column;
}
.ct-footer .ct-widget:has(.pr-footer__map) > .pr-footer__map {
order: 1;
margin-top: 1.5rem;
}
.ct-footer .ct-widget:has(.pr-footer__map) > .pr-footer__directions {
order: 2;
margin-top: 0.75rem;
}
.ct-footer .pr-footer__contact {
margin-bottom: 1.75rem;
}
/* Get in touch sits under Explore in the left column (footer-two-columns.php),
with a gap above it. */
.ct-footer .pr-footer__links + .pr-footer__heading--touch,
.ct-footer .pr-footer__heading--touch {
margin-top: 2.25rem;
}
@media (min-width: 1000px) {
.pr-footer__map iframe {
height: 240px;
}
}
@media (min-width: 690px) and (max-width: 999.98px) {
.pr-footer__map iframe {
height: 260px;
}
}
/* The Contact page has its own large map, so the footer's would repeat it
a scroll further down. Hidden there only; Get directions then sits just
under the parking note. Keyed to the contact block rather than a page
ID, which differs between sites. */
body:has(.stk-3946ec7) .ct-footer .pr-footer__map {
display: none;
}
body:has(.stk-3946ec7) .ct-footer .ct-widget:has(.pr-footer__map) > .pr-footer__directions {
margin-top: 0.25rem;
}
/* -----------------------------------------------------------------
* 5d. Contact page (contact-page-layout.php and contact-page-compact.php
* do the blocks)
* -------------------------------------------------------------- */
/* One block: heading, address, how to get here and the contact rows on
the left, the map filling the right. Phones stack it, map last. */
body .stk-3946ec7 {
margin-bottom: 3.5rem !important;
}
/* Heading and lead line as on the schedule page. The heading block brings
a 16px bottom margin; the schedule's is tight. */
.stk-3946ec7 .stk-bcdcbe3 .stk-block-heading__text {
margin: 0 0 0.35rem;
font-size: 1.5rem;
}
body .stk-3946ec7 .stk-bcdcbe3 {
margin-bottom: 0.35rem !important;
}
.stk-3946ec7 .pr-contact-lead {
margin: 0 0 0.75rem;
font-weight: 600;
color: var(--theme-palette-color-4, #1b2f3c);
}
.stk-3946ec7 .pr-getting-here {
max-width: 52ch;
margin: 0 0 1.75rem;
color: #3f5459; /* the schedule's grey, tinted to the navy */
}
/* Contact rows: the icon column only as wide as the icon, and the icon at
its left, so the rows start on the same edge as the words above. */
.stk-3946ec7 .stk-4017857 :is(.stk-fd3d143, .stk-b34c269, .stk-6f6370a, .stk-2b090c1) {
flex: 0 0 64px !important;
max-width: 64px !important;
padding: 0 !important;
}
.stk-3946ec7 .stk-4017857 .stk-block-icon {
display: flex;
justify-content: flex-start;
margin: 0 !important;
}
/* The icon blocks are saved centre-aligned. */
.stk-3946ec7 .stk-4017857 .stk-block-icon.has-text-align-center,
.stk-3946ec7 .stk-4017857 .stk-block-icon .stk-link {
text-align: left !important;
}
.stk-3946ec7 .stk-4017857 :is(.stk-e923ae8, .stk-4ed9b35, .stk-a1c7947, .stk-97d217d) .stk-column-wrapper {
margin-left: 0 !important;
margin-right: 0 !important;
}
.stk-3946ec7 .stk-4017857 :is(.stk-fd97347, .stk-ac3f4fb, .stk-31a8569, .stk-66b66f4) {
padding-left: 0 !important;
}
/* The contact rows sit closer together than they did with a column to
themselves. */
.stk-3946ec7 .stk-4017857 :is(.stk-e923ae8, .stk-4ed9b35, .stk-a1c7947, .stk-97d217d) {
margin-bottom: 0.9rem !important;
}
/* Map: as tall as the words beside it on desktop, a fixed height when it
stacks under them. */
@media (min-width: 1000px) {
.stk-3946ec7 .stk-9bc8237 {
align-self: stretch !important;
}
.stk-3946ec7 .stk-9bc8237 :is(.stk-column-wrapper, .stk-block-content) {
height: 100%;
}
body .stk-3946ec7 .stk-8376fdd {
height: 100% !important;
min-height: 380px;
margin: 0 !important;
}
/* Stackable sizes the iframe itself; let it fill the stretched block. */
body .stk-3946ec7 .stk-8376fdd iframe {
height: 100% !important;
min-height: 380px;
}
}
@media (max-width: 999.98px) {
body .stk-3946ec7 .stk-8376fdd,
body .stk-3946ec7 .stk-8376fdd iframe {
height: 320px !important;
}
}
/* Contact icons: filled amber circles with white glyphs, like the header
icons, not grey outlines. Weighted past Stackable's per-block colours. */
body .stk-3946ec7 .stk-block-icon .stk--inner-svg {
border: 0 !important;
background: var(--theme-palette-color-1, #f7941d) !important;
}
body .stk-3946ec7 .stk-block-icon .stk--inner-svg svg:last-child,
body .stk-3946ec7 .stk-block-icon .stk--inner-svg svg:last-child :is(g, path, rect, polygon, ellipse) {
fill: #fff !important;
}
/* The phone number, email and handles: one size everywhere (the email
dropped to 13px on phones), and allowed to wrap rather than overflow. */
body .stk-3946ec7 :is(.stk-8d37ed6, .stk-e91b116, .stk-0a981d2, .stk-e8aa462) .stk-block-text__text {
font-size: 16px !important;
overflow-wrap: anywhere;
}
/* The email address is the one long value: at 16px it is wider than the
column on a phone. A size down keeps it on a line; on the narrowest
phones the break point after the @ (contact-page-layout.php) splits it. */
@media (max-width: 479.98px) {
body .stk-3946ec7 .stk-e91b116 .stk-block-text__text {
font-size: 14px !important;
}
}
@media (max-width: 379.98px) {
body .stk-3946ec7 .stk-e91b116 .stk-block-text__text {
font-size: 13px !important;
}
}
/* -----------------------------------------------------------------
* 5g. HTML sitemap page (Rank Math's [rank_math_html_sitemap])
* -------------------------------------------------------------- */
/* Pages in a narrow column, articles beside them in two; navy links with
amber markers, like the rest of the site. Stacks on phones. */
.rank-math-html-sitemap {
display: grid;
gap: 2.5rem;
}
@media (min-width: 768px) {
.rank-math-html-sitemap {
grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
gap: 3.5rem;
align-items: start;
}
}
.rank-math-html-sitemap__title {
margin: 0 0 1rem;
padding-bottom: 0.6rem;
font-size: 1.5rem;
border-bottom: 2px solid var(--theme-palette-color-1, #f7941d);
}
.rank-math-html-sitemap__list {
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 768px) {
.rank-math-html-sitemap__section--post .rank-math-html-sitemap__list {
columns: 2;
column-gap: 2.5rem;
}
}
.rank-math-html-sitemap__item {
position: relative;
margin: 0;
padding: 0.35rem 0 0.35rem 1.1rem;
break-inside: avoid;
line-height: 1.45;
}
.rank-math-html-sitemap__item::before {
content: "";
position: absolute;
left: 0;
top: 0.9em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--theme-palette-color-1, #f7941d);
}
.rank-math-html-sitemap__link {
color: var(--theme-palette-color-4, #1b2f3c);
text-decoration: none;
}
.rank-math-html-sitemap__link:hover {
color: #b45309;
text-decoration: underline;
}
/* Slogan above the copyright line (footer-slogan.php). */
.ct-footer .pr-slogan {
margin: 0 0 0.5rem;
font-size: 1.15rem;
font-style: italic;
letter-spacing: 0.01em;
color: rgba(255, 255, 255, 0.85);
}
/* The title band and the footer a step lighter than the text navy
(Praj, 30/10/2026): #273f4f rather than #1b2f3c. Blocksy paints both from
palette 4, which also colours headings and the menu, so they're set here
rather than by changing the palette. */
/* Behind the navy: the home hero's photo (standing.jpg, a class standing at
the reformers), faint under the navy (87%), so every page opens on the
same picture (Praj, 30/10/2026; it replaced the straps shot, IMG_9493).
The photo is in the theme (assets/img/band-standing.jpg), so it works on
any domain. */
.hero-section[data-type="type-2"] {
background-image:
linear-gradient(rgba(39, 63, 79, 0.87), rgba(39, 63, 79, 0.87)),
url("../img/band-standing.jpg") !important;
background-size: cover !important;
background-position: center 45% !important;
background-color: #273f4f !important;
}
[data-footer*="type-1"] .ct-footer [data-row*="middle"],
[data-footer*="type-1"] .ct-footer [data-row*="bottom"] {
background-color: #273f4f;
}
/* Hero Book: two-tone like every button. */
body.home .stk-block-button.stk-104b74c:not(.stk-b34024c) .stk-button {
background: #fde3c0 !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
/* Class Schedule: a light blue fill inside the navy outline, navy text -
the cool partner to Book's soft amber (Praj, 30/10/2026). */
body.home .stk-b34024c .stk-button {
background: #e3ecf7 !important;
box-shadow: inset 0 0 0 2px #273f4f !important;
}
body.home .stk-b34024c .stk-button,
body.home .stk-b34024c .stk-button .stk-button__inner-text {
color: #273f4f !important;
}
body.home .stk-block-button.stk-104b74c:not(.stk-b34024c) .stk-button:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
}
body.home .stk-b34024c .stk-button:hover {
background: #cfdcee !important;
}
/* Home hero photo. Stackable pinned it to the screen (background-attachment:
fixed), so the barre on the studio wall always sat behind the menu and
icons. It now scrolls with the page, framed lower so the barre clears the
header; and the spacer under the buttons is cut from 60px so the hero
ends closer under them (Praj, 30/10/2026). iOS ignores fixed anyway. */
body .stk-1284f2b {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center 55% !important;
}
body .stk-405620a {
height: 24px !important;
}
/* The hero logo a size down, about 290px rather than 360px on desktop, and
270px rather than the full width on phones (Praj, 30/10/2026). */
body .stk-e3eda3e .stk-img-wrapper {
width: 290px !important;
max-width: 72vw;
margin-left: auto;
margin-right: auto;
}
/* The slogan under the hero logo (header-menu-and-slogan.php). One line
from tablet up; it can wrap on phones. */
@media (min-width: 690px) {
.stk-1284f2b .pr-hero-slogan {
white-space: nowrap;
}
}
.stk-1284f2b .pr-hero-slogan {
margin: 0.2rem 0 0;
font-family: "Dancing Script", "Brush Script MT", cursive;
font-weight: 500;
font-size: clamp(1.9rem, 3vw, 2.4rem);
font-style: normal;
line-height: 1.2;
text-align: center;
color: var(--theme-palette-color-4, #1b2f3c);
/* The script's hairlines vanish on the photo; a soft white halo and a
faint stroke give them body. */
text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
/* Wider than the logo's column on desktop; let it run into the margins
rather than be clipped. */
margin-left: -40%;
margin-right: -40%;
}
/* Offer bar on the home page: navy with white text, so it stands apart
from the pale hero under it (Praj, 30/10/2026). Other pages keep theirs. */
body.home .pr-offer-bar {
background: #273f4f;
color: #fff;
}
body.home .pr-offer-bar a {
color: var(--theme-palette-color-1, #f7941d);
}
body.home .pr-offer-bar a:hover {
color: #fff;
}
/* -----------------------------------------------------------------
* 5h. Blog list: search on top, posts as a two-column grid of cards
* -------------------------------------------------------------- */
/* Blocksy's grid (blog-grid.php): two columns from tablet up, one on phones.
The search box arrives inside the grid, so it spans the full row and sits
centred above the cards (Praj, 30/10/2026). */
[data-prefix="blog"] .entries .pr-blog-search,
.pr-blog-search {
grid-column: 1 / -1;
width: 100%;
max-width: 560px;
margin: 0 auto 1rem;
}
/* "Load more" brings each page's own copy of the search box into the grid;
only the first one shows. */
[data-prefix="blog"] .entries > .pr-blog-search ~ .pr-blog-search {
display: none;
}
/* The search box in the site's stone and navy: a stone field with a navy
edge, a navy icon on a small navy circle, and an amber ring on focus. */
.pr-blog-search .ct-search-form-inner {
background: var(--theme-palette-color-7, #f1ebe5) !important;
border: 1.5px solid #273f4f !important;
border-radius: 999px !important;
transition: box-shadow 0.15s ease;
}
.pr-blog-search .ct-search-form-inner:focus-within {
box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.35);
}
.pr-blog-search input[type="search"] {
color: var(--theme-palette-color-4, #1b2f3c) !important;
padding-left: 1.4rem !important;
}
.pr-blog-search input[type="search"]::placeholder {
color: #5f6873;
opacity: 1;
}
.pr-blog-search button[type="submit"] {
align-self: center;
margin-right: 7px;
width: 32px;
height: 32px;
min-height: 0;
padding: 0;
border-radius: 50% !important;
background: #273f4f !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
--theme-icon-color: var(--theme-palette-color-7, #f1ebe5);
}
.pr-blog-search button[type="submit"] svg {
fill: var(--theme-palette-color-7, #f1ebe5) !important;
}
.pr-blog-search button[type="submit"]:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
}
/* The grid narrower than the page and the photos wider, so the cards are
a size you read rather than posters (Praj: "perhaps a bit big"). */
@media (min-width: 768px) {
[data-prefix="blog"] .entries[data-layout="grid"] {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
}
/* Cards in the warm stone of the class cards, rounded, no shadow. */
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card {
background: var(--theme-palette-color-7, #f1ebe5) !important;
border-radius: 20px;
overflow: hidden;
box-shadow: none !important;
}
/* A 16:9 photo rather than Blocksy's tall 4:3 at this width. */
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card .ct-media-container {
aspect-ratio: 16 / 9;
border-radius: 0 !important;
}
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card .ct-media-container img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0 !important;
}
/* "By Pilates Rockhampton / In Articles" was the same on every card. */
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card .entry-meta {
display: none;
}
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card .entry-title {
margin-top: 0.3rem;
font-size: 1.15rem;
line-height: 1.3;
}
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card .entry-title a {
color: var(--theme-palette-color-4, #1b2f3c);
}
/* Three lines of excerpt at most, so the cards in a row line up. */
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card .entry-excerpt {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-prefix="blog"] .entries[data-layout="grid"] .entry-card .entry-button {
font-weight: 700;
}
/* -----------------------------------------------------------------
* 5f. Heading levels (fix-heading-order.php)
* -------------------------------------------------------------- */
/* These headings moved up the outline (h5 to h2/h3) so it reads in
order; this keeps them at the 20px/30px they had as h5s. The price
figures (now h4) keep the 36px set in their own blocks. */
body .stk-17d3694 .stk-block-heading__text,
body .stk-a4dc2a8 :is(.stk-63da088, .stk-210c50d, .stk-458b4a0) .stk-block-heading__text,
body :is(.stk-09b6ae1, .stk-e1d2cba, .stk-d80a24b, .stk-7a5bdfd, .stk-9539769, .stk-7393d17, .stk-f3333b6, .stk-8849c94) .stk-block-heading__text {
font-size: 20px !important;
line-height: 30px !important;
}
/* -----------------------------------------------------------------
* 5i. Phone menu: a cream card sliding in from the left (design C)
* -------------------------------------------------------------- */
@media (max-width: 999.98px) {
[data-header*="type-1"] #offcanvas {
--side-panel-width: 86vw !important;
}
[data-header*="type-1"] #offcanvas .ct-panel-inner {
background: var(--theme-palette-color-7, #f1ebe5) !important;
background-image: none !important;
border-radius: 0 24px 24px 0;
box-shadow: 20px 0 60px rgba(27, 47, 60, 0.25);
}
#offcanvas [data-device="mobile"] .ct-panel-content-inner {
align-items: center !important;
justify-content: flex-start !important;
padding: 0 26px 36px !important;
text-align: center;
}
#offcanvas [data-device="mobile"] [data-id="text"] img {
max-width: 170px;
height: auto;
}
#offcanvas [data-id="mobile-menu"] {
width: 100%;
margin-top: 10px;
}
#offcanvas [data-id="mobile-menu"] li {
margin: 4px 0;
}
#offcanvas [data-id="mobile-menu"] .ct-menu-link {
justify-content: center !important;
padding: 10px 0 !important;
font-family: Merriweather, Georgia, serif;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--theme-palette-color-4, #1b2f3c) !important;
}
#offcanvas [data-id="mobile-menu"] .current-menu-item > .ct-menu-link {
display: inline-flex !important;
padding: 10px 22px !important;
color: #b45309 !important;
background: transparent;
border-radius: 999px;
}
/* Order: booking buttons, a rule, the menu links, a rule, contact. */
.pr-mm-top {
width: 100%;
margin-top: 18px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(39, 63, 79, 0.14);
}
.pr-mm-extra {
width: 100%;
margin-top: 14px;
padding-top: 18px;
border-top: 1px solid rgba(39, 63, 79, 0.14);
}
.pr-mm-extra .pr-mm-contact {
margin-top: 0;
}
.pr-mm-ctas {
display: flex;
flex-direction: column;
gap: 12px;
}
.pr-mm-btn {
display: flex;
align-items: center;
justify-content: center;
height: 52px;
border-radius: 999px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
/* The home hero's two buttons (Praj, 30/10/2026): Book in soft amber
inside an amber outline, Class schedule light blue inside navy. */
.pr-mm-btn--book {
background: #fde3c0;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d);
color: var(--theme-palette-color-4, #1b2f3c) !important;
font-weight: 700;
}
.pr-mm-btn--sched {
background: #e3ecf7;
box-shadow: inset 0 0 0 2px #273f4f;
color: #273f4f !important;
}
/* Call, email, directions: plain rows with a navy icon that show the
details, so they can be read as well as tapped (Praj, 30/10/2026; they
were white cards with amber icons). */
.pr-mm-contact {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 18px;
}
.pr-mm-contact a {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 2px;
font-size: 14px;
font-weight: 500;
text-align: left;
color: var(--theme-palette-color-4, #1b2f3c) !important;
text-decoration: none;
}
/* The long email: a size down, and if it must wrap, after the @. */
.pr-mm-contact .pr-mm-email {
font-size: 13px;
letter-spacing: -0.01em;
}
.pr-mm-contact a:active {
color: #b45309 !important;
}
.pr-mm-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
background: #273f4f;
color: var(--theme-palette-color-7, #f1ebe5);
}
.pr-mm-icon svg {
width: 18px;
height: 18px;
}
.pr-mm-slogan {
margin: 24px 0 0;
font-family: "Dancing Script", cursive;
font-size: 26px;
font-weight: 500;
color: #273f4f;
}
}
/* Desktop never shows the extras (the offcanvas isn't used there). */
@media (min-width: 1000px) {
.pr-mm-extra {
display: none;
}
}
/* -----------------------------------------------------------------
* 6. Utilities
* -------------------------------------------------------------- */
/* -----------------------------------------------------------------
* 5j. Policies page (policies-page-layout.php)
* -------------------------------------------------------------- */
/* A reading column, a contents list up top, each section opened by a rule
and its heading, and the two lines that matter as notices instead of
pure red text. */
.pr-policies {
max-width: 760px;
margin: 0 auto;
font-size: 1rem;
line-height: 1.7;
}
.pr-policies .pr-policies__lead {
color: var(--theme-palette-color-3, #636c72);
}
.pr-policies .pr-policies__contents {
margin: 1.5rem 0 2.5rem;
padding: 1.1rem 1.5rem;
list-style: none;
columns: 2;
column-gap: 2rem;
background: var(--theme-palette-color-7, #f1ebe5);
border-left: 3px solid var(--theme-palette-color-1, #f7941d);
border-radius: 0 10px 10px 0;
}
.pr-policies .pr-policies__contents li {
margin: 0.2rem 0;
break-inside: avoid;
}
.pr-policies .pr-policies__contents a {
color: var(--theme-palette-color-4, #1b2f3c);
font-weight: 600;
text-decoration: none;
}
.pr-policies .pr-policies__contents a:hover {
color: #b45309;
}
.pr-policies h2 {
margin: 2.5rem 0 0.9rem;
padding-top: 2rem;
border-top: 1px solid var(--theme-palette-color-5, #e2e7ed);
font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
scroll-margin-top: 110px;
}
.pr-policies .pr-policies__contents + h2 {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.pr-policies ul:not(.pr-policies__contents) {
padding-left: 1.3em;
}
.pr-policies .pr-policies__notice {
padding: 0.85rem 1.1rem;
font-weight: 700;
color: var(--theme-palette-color-4, #1b2f3c);
background: var(--theme-palette-color-7, #f1ebe5);
border-left: 3px solid var(--theme-palette-color-1, #f7941d);
border-radius: 0 10px 10px 0;
}
@media (max-width: 689.98px) {
.pr-policies .pr-policies__contents {
columns: 1;
}
}
/* -----------------------------------------------------------------
* 5k. About page: one left edge, readable Q&A
* -------------------------------------------------------------- */
/* The three Q&A columns had 0.67rem padding and Stackable's default 8px
wrapper margin, which the intro column turns off, so the answers sat
indented from everything above them. Weighted past the blocks' own
inline rules. */
body :is(.stk-7243a05, .stk-ce5bdaf, .stk-c58de8d) {
padding-left: 0 !important;
padding-right: 0 !important;
}
body :is(.stk-7243a05-container, .stk-ce5bdaf-container, .stk-c58de8d-container) {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* The questions in the heading colour, the answers in body grey, with a
touch more air between each pair (they're one paragraph with breaks). */
:is(.stk-d18dd18, .stk-88d9fed, .stk-8c0a2dd) .stk-block-text__text {
line-height: 1.75;
color: #3f5459; /* the schedule's grey, tinted to the navy */
}
:is(.stk-d18dd18, .stk-88d9fed, .stk-8c0a2dd) .stk-block-text__text strong {
display: inline-block;
margin-top: 0.35rem;
color: var(--theme-palette-color-4, #1b2f3c);
}
/* Tablet and up: the intro row has a 35px gap between its columns and the
instructor rows have none, so the answers started 17.5px left of the
intro. Half the gap puts every text block on one edge. */
@media (min-width: 768px) {
body :is(.stk-7243a05, .stk-ce5bdaf, .stk-c58de8d) {
padding-left: 17.5px !important;
}
}
/* Desktop: each instructor's photo and name stay beside their answers as
you read down, instead of leaving a tall empty column. */
@media (min-width: 768px) {
.stk-7e69663,
.stk-be5bff1,
.stk-78daba6 {
position: sticky;
top: 2rem;
align-self: flex-start !important;
}
}
/* Phone: the intro left-aligned like the Q&A under it (a long centred
paragraph is hard to read), the logo still centred. */
@media (max-width: 767.98px) {
:root .stk-19045a8 .stk-inner-blocks p {
text-align: left;
}
}
/* -----------------------------------------------------------------
* 5l. About: the logo and slogan on a stone card (about-logo-card.php)
* -------------------------------------------------------------- */
/* The card beside the intro, logo and slogan the same width (Praj,
30/10/2026, 2026-10-30-about-logo-options.png, C). */
body .stk-24e8ccc-container {
padding: 40px 28px !important;
border-radius: 20px;
background: var(--theme-palette-color-7, #f1ebe5) !important;
}
body .stk-24e8ccc .stk-24e8ccc-inner-blocks {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
body .stk-47c4e3d {
flex: 0 0 auto;
justify-content: center;
margin-bottom: 0 !important;
}
body .stk-47c4e3d .stk-img-wrapper {
width: 270px !important;
max-width: 100%;
}
.pr-about-slogan {
margin: 14px 0 0;
font-family: "Dancing Script", cursive;
font-weight: 500;
font-size: 28px;
line-height: 1.1;
color: var(--theme-palette-color-4, #1b2f3c);
text-align: center;
white-space: nowrap;
}
/* -----------------------------------------------------------------
* 5m. Home hero in navy (Praj, 30/10/2026: "I didn't like the pale wash,
* it was all too white"; 2026-10-30-hero-navy-options.png, B)
* -------------------------------------------------------------- */
/* The photo under a navy wash at 75%, not the white one at 83%. */
body .stk-1284f2b {
background-color: #273f4f !important;
}
body .stk-1284f2b:before {
background-image: none !important;
background-color: #273f4f !important;
opacity: 0.75 !important;
}
/* The logo in stone, from assets/img/logo-stone.png: the navy logo's
glyphs only, without its drop shadow, which a colour filter turned into
a pale halo (Praj: "too much shadow on the logo"). The block's image
stays in the page for its alt text and is hidden under it. */
body .stk-1284f2b .stk-e3eda3e .stk-img-wrapper {
background: url("../img/logo-stone.png") center / contain no-repeat;
}
body .stk-1284f2b .stk-e3eda3e img {
opacity: 0;
}
body .stk-1284f2b .pr-hero-slogan {
color: var(--theme-palette-color-7, #f1ebe5) !important;
text-shadow: none !important;
-webkit-text-stroke: 0 !important;
}
/* Book solid amber with navy text (Praj, 30/10/2026, after trying an open
outline; 2026-10-30-hero-book-options.png, 2); Class Schedule a stone
outline. */
html body.home .stk-1284f2b .stk-block-button.stk-104b74c:not(.stk-b34024c) .stk-button {
background: #fde3c0 !important; /* two-tone, as every button (Praj, 30/10/2026) */
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d) !important;
}
html body.home .stk-1284f2b .stk-block-button.stk-104b74c:not(.stk-b34024c) .stk-button .stk-button__inner-text {
color: #1b2f3c !important;
}
html body.home .stk-1284f2b .stk-block-button.stk-104b74c:not(.stk-b34024c) .stk-button:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
}
/* Class Schedule: a solid stone button with navy text, so it reads as a
button beside Book rather than an outline (Praj, 30/10/2026). */
html body.home .stk-1284f2b .stk-b34024c .stk-button {
background: var(--theme-palette-color-7, #f1ebe5) !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-4, #1b2f3c) !important; /* the same 2px edge as Book */
}
html body.home .stk-1284f2b .stk-b34024c .stk-button,
html body.home .stk-1284f2b .stk-b34024c .stk-button .stk-button__inner-text {
color: var(--theme-palette-color-4, #1b2f3c) !important;
}
html body.home .stk-1284f2b .stk-b34024c .stk-button:hover {
background: #ffffff !important;
}
/* -----------------------------------------------------------------
* 5n. Gift voucher form in navy, not amber, against the stone card
* (Praj, 30/10/2026)
* -------------------------------------------------------------- */
.pr-voucher__form .pr-voucher-picks__row button {
border-color: #273f4f;
color: #273f4f;
}
.pr-voucher__form .pr-voucher-picks__row button[aria-pressed="true"] {
background: #273f4f;
color: var(--theme-palette-color-7, #f1ebe5);
}
.pr-voucher__form .simpay-form-control button.simpay-btn.simpay-payment-btn,
.pr-voucher__form .simpay-form-control button.simpay-btn.simpay-payment-btn span {
background: #273f4f !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
}
.pr-voucher__form .simpay-form-control button.simpay-btn.simpay-payment-btn:hover,
.pr-voucher__form .simpay-form-control button.simpay-btn.simpay-payment-btn:focus-visible {
background: #1b2f3c !important;
}
/* The hero's top spacer was 120px, room for the header that used to sit
over it. The stone row is above it now, so 50px on desktop. */
@media (min-width: 1000px) {
body .stk-281a693-inner-blocks > .stk-block-spacer:first-child {
height: 50px !important;
}
}
/* -----------------------------------------------------------------
* 5o. Home section headings without the stone box
* -------------------------------------------------------------- */
/* "Pilates to Suit Everyone" and "Prices" sat in stone boxes; on white
they read as headings, not labels (Praj, 30/10/2026: "too much stone").
Weighted past Stackable's per-block background rule. */
html body :is(.stk-99466fa, .stk-00a369f) {
background-color: transparent !important;
}
html body :is(.stk-99466fa, .stk-00a369f)::before {
background: none !important;
}
/* The three-dot dividers in navy rather than amber (Praj, 30/10/2026), so
amber is kept for buttons and links. */
html body .stk-block-divider .stk-block-divider__dot {
background-color: var(--theme-palette-color-4, #1b2f3c) !important;
}
/* -----------------------------------------------------------------
* 5p. Two oranges, one job each (Praj, 30/10/2026)
* -------------------------------------------------------------- */
/* Buttons are two-tone amber: a light amber fill (#fde3c0) inside an amber
(#f7941d) outline, filling solid amber on hover. Orange text is #b45309,
which passes contrast on white. The blog's current page number and "Load
more" are buttons, so they match. */
.ct-pagination .page-numbers.current,
[data-prefix="blog"] .ct-load-more {
background: #fde3c0 !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d) !important;
color: var(--theme-palette-color-4, #1b2f3c) !important;
border: 0 !important;
}
[data-prefix="blog"] .ct-load-more:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
}
/* Articles: photos with the same rounded corners as the cards, and no
"Articles" category link under the title - every post is in it, and the
category page only repeats the blog (Praj, 30/10/2026). */
body.single-post .entry-content img,
body.single-post .ct-featured-image img,
body.single-post .ct-media-container img {
border-radius: 16px;
}
body.single-post .entry-meta .meta-categories {
display: none;
}
/* With the category gone the author is the only item, so drop its "/". */
body.single-post .entry-meta .meta-author::after {
display: none !important;
}
/* Gift voucher page: Tracy's voucher artwork on its own beside the form
(voucher-page-artwork.php). */
.pr-voucher__art {
margin: 0;
}
.pr-voucher__art img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(27, 47, 60, 0.15);
}
/* -----------------------------------------------------------------
* 5q. About page: each instructor a profile card (about-profile-cards.php)
* -------------------------------------------------------------- */
/* Each instructor's row is a white card with a stone edge, instead of a
long run of text between dot dividers (Praj, 30/10/2026). */
html body :is(.stk-fddb1d1, .stk-3deec47, .stk-af5f92f) {
margin: 0 0 2rem !important;
padding: 2rem !important;
background: #fff;
border: 1px solid var(--theme-palette-color-5, #e4d9cd);
border-radius: 20px;
}
html body :is(.stk-6186ea0, .stk-dcd130d, .stk-6af2483) {
display: none !important;
}
/* The long answers run full width; the short facts sit as stone tiles,
two to a row. */
.pr-qa {
display: grid;
grid-auto-flow: row dense;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 0;
}
.pr-qa__item {
padding: 0.85rem 1rem;
background: var(--theme-palette-color-7, #f1ebe5);
border-radius: 12px;
}
/* "What do you love most" (the fourth pair) runs long, so it takes a full
row as a tile and the short facts pair up around it. */
.pr-qa__item:nth-child(4) {
grid-column: 1 / -1;
}
.pr-qa__long {
grid-column: 1 / -1;
padding: 0 0 0.5rem;
background: none;
}
.pr-qa dt {
margin-bottom: 0.3rem;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--theme-palette-color-4, #1b2f3c);
}
.pr-qa__long dt {
font-size: 1.05rem;
letter-spacing: 0;
text-transform: none;
}
.pr-qa dd {
margin: 0;
line-height: 1.65;
color: #3f5459;
}
@media (max-width: 689.98px) {
html body :is(.stk-fddb1d1, .stk-3deec47, .stk-af5f92f) {
padding: 1.25rem !important;
}
.pr-qa {
grid-template-columns: 1fr;
}
}
/* Each profile card split in two: the photo, name and role on a stone panel,
the Q&A on white (Praj, 30/10/2026: separate the photo from the profile). */
html body :is(.stk-fddb1d1, .stk-3deec47, .stk-af5f92f) {
padding: 0 !important;
overflow: hidden;
}
html body :is(.stk-7e69663, .stk-be5bff1, .stk-78daba6) {
align-self: stretch !important;
position: static;
padding: 2.25rem 1.5rem !important;
background: var(--theme-palette-color-7, #f1ebe5);
}
html body :is(.stk-7e69663, .stk-be5bff1, .stk-78daba6) > .stk-column-wrapper {
position: sticky;
top: 2rem;
}
html body :is(.stk-7243a05, .stk-ce5bdaf, .stk-c58de8d) {
padding: 2rem 2rem 2rem 2.25rem !important;
}
/* The Q&A tiles go white on the white side, edged in stone. */
.pr-qa__item {
background: #fff;
box-shadow: inset 0 0 0 1px var(--theme-palette-color-5, #e4d9cd);
}
.pr-qa__long {
box-shadow: none;
}
@media (max-width: 767.98px) {
html body :is(.stk-7243a05, .stk-ce5bdaf, .stk-c58de8d) {
padding: 1.25rem !important;
}
html body :is(.stk-7e69663, .stk-be5bff1, .stk-78daba6) {
padding: 1.75rem 1rem 1.25rem !important;
}
}
/* Voucher page: "How it works" under the artwork beside the form. */
.pr-voucher__aside .pr-voucher__steps-heading {
margin: 2rem 0 1rem;
text-align: left;
font-size: 1.35rem;
}
.pr-voucher__aside .pr-voucher-steps {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0.9rem !important;
max-width: none !important;
margin: 0 !important;
}
/* -----------------------------------------------------------------
* 5r. Contact page in stone and navy (Praj, 30/10/2026)
* -------------------------------------------------------------- */
/* The text side on a stone panel, beside the map. */
html body .stk-3946ec7 {
padding: 2rem 2rem 1.5rem !important;
background: var(--theme-palette-color-7, #f1ebe5);
border-radius: 20px;
}
/* Icon circles navy with stone marks, not amber. */
html body .stk-3946ec7 :is(.stk-788de40, .stk-0da2f2e, .stk-40e512c, .stk-c93e8d4).stk-block .stk--svg-wrapper .stk--inner-svg {
background-color: #273f4f !important;
}
html body .stk-3946ec7 :is(.stk-788de40, .stk-0da2f2e, .stk-40e512c, .stk-c93e8d4).stk-block .stk--svg-wrapper svg,
html body .stk-3946ec7 :is(.stk-788de40, .stk-0da2f2e, .stk-40e512c, .stk-c93e8d4).stk-block .stk--svg-wrapper svg :is(g, path, rect, polygon, ellipse, circle) {
fill: var(--theme-palette-color-7, #f1ebe5) !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
}
/* The phone, email and social details in navy; orange only on hover. */
html body .stk-3946ec7 :is(.stk-8d37ed6, .stk-e91b116, .stk-0a981d2, .stk-e8aa462).stk-block a,
html body .stk-3946ec7 :is(.stk-8d37ed6, .stk-e91b116, .stk-0a981d2, .stk-e8aa462).stk-block .stk-block-text__text {
color: var(--theme-palette-color-4, #1b2f3c) !important;
font-weight: 600;
}
html body .stk-3946ec7 :is(.stk-8d37ed6, .stk-e91b116, .stk-0a981d2, .stk-e8aa462).stk-block a:hover {
color: #b45309 !important;
}
@media (max-width: 767.98px) {
html body .stk-3946ec7 {
padding: 1.5rem 1.25rem 1rem !important;
}
}
/* The detail lines were gradient text (a flat orange gradient clipped to the
letters); switch that off so they take the navy. */
html body .stk-3946ec7 :is(.stk-8d37ed6, .stk-e91b116, .stk-0a981d2, .stk-e8aa462).stk-block .stk-block-text__text.stk--is-gradient,
html body .stk-3946ec7 :is(.stk-8d37ed6, .stk-e91b116, .stk-0a981d2, .stk-e8aa462).stk-block .stk-block-text__text.stk--is-gradient * {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: var(--theme-palette-color-4, #1b2f3c) !important;
-webkit-text-fill-color: var(--theme-palette-color-4, #1b2f3c) !important;
}
html body .stk-3946ec7 :is(.stk-8d37ed6, .stk-e91b116, .stk-0a981d2, .stk-e8aa462).stk-block .stk-block-text__text.stk--is-gradient a:hover {
-webkit-text-fill-color: #b45309 !important;
}
/* About Q&A: the short answers as a tidy two-column list (question left,
answer right, a hairline between rows) rather than uneven tiles. */
html body .pr-qa .pr-qa__item:not(.pr-qa__long) {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 210px 1fr;
gap: 1rem;
align-items: baseline;
padding: 0.8rem 0;
background: none;
box-shadow: none;
border-radius: 0;
border-top: 1px solid var(--theme-palette-color-5, #e4d9cd);
}
html body .pr-qa .pr-qa__item:not(.pr-qa__long) dt {
margin: 0;
}
html body .pr-qa {
row-gap: 0;
}
html body .pr-qa .pr-qa__long {
padding-bottom: 1rem;
}
@media (max-width: 689.98px) {
html body .pr-qa .pr-qa__item:not(.pr-qa__long) {
grid-template-columns: 1fr;
gap: 0.2rem;
}
}
/* -----------------------------------------------------------------
* 5s. Offer bar, scrolled header, article page (Praj, 30/10/2026)
* -------------------------------------------------------------- */
/* Offer bar: an amber "New client offer" tag, the price in amber, and
"Sign me up" as a small two-tone amber button, so the promotion reads as
one at a glance. */
.pr-offer-bar .pr-offer-bar__tag {
display: inline-block;
margin-right: 0.7em;
padding: 2px 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1b2f3c;
background: var(--theme-palette-color-1, #f7941d);
border-radius: 999px;
vertical-align: 1px;
}
.pr-offer-bar strong {
color: var(--theme-palette-color-1, #f7941d);
font-size: 1.1em;
}
html body .pr-offer-bar a {
display: inline-block;
margin-left: 0.8em;
padding: 3px 14px;
color: #1b2f3c !important;
text-decoration: none;
background: #fde3c0; /* two-tone, as every button (Praj, 30/10/2026) */
border-radius: 999px;
box-shadow: inset 0 0 0 1px var(--theme-palette-color-1, #f7941d);
transition: background-color 0.15s ease;
}
html body .pr-offer-bar a:hover {
background: var(--theme-palette-color-1, #f7941d);
color: #1b2f3c !important;
}
@media (max-width: 689.98px) {
.pr-offer-bar .pr-offer-bar__tag {
display: none;
}
html body .pr-offer-bar a {
margin-top: 4px;
padding: 2px 12px;
}
}
/* Scrolled header: once it sticks, the row turns navy with stone type, so
it stands apart from the stone sections it passes over. */
[data-header*="type-1"] .ct-header [data-sticky*="yes"] [data-row*="middle"] {
/* The offer bar's sheen and amber line, so the two read as a pair. */
background: linear-gradient(90deg, #1b2f3c 0%, #34516a 50%, #1b2f3c 100%) !important;
border-bottom: 3px solid var(--theme-palette-color-1, #f7941d) !important;
box-shadow: 0 4px 18px rgba(27, 47, 60, 0.25) !important;
}
html body .ct-header [data-sticky*="yes"] .ct-menu-link {
color: var(--theme-palette-color-7, #f1ebe5) !important;
}
html body .ct-header [data-sticky*="yes"] .current-menu-item > .ct-menu-link,
html body .ct-header [data-sticky*="yes"] .ct-menu-link:hover {
color: var(--theme-palette-color-1, #f7941d) !important;
}
html body .ct-header [data-sticky*="yes"] [data-id="logo"] img {
content: url("../img/logo-stone.png");
}
html body .ct-header [data-sticky*="yes"] [data-id="socials"] .ct-icon-container {
background-color: var(--theme-palette-color-7, #f1ebe5) !important;
}
html body .ct-header [data-sticky*="yes"] [data-id="socials"] svg {
fill: #273f4f !important;
}
html body .ct-header [data-sticky*="yes"] .ct-header-trigger {
--theme-icon-color: var(--theme-palette-color-7, #f1ebe5) !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
}
/* Articles: the post as a stone page with a soft shadow, on white - easier
on the eye for reading than bright white (Praj, 30/10/2026). */
html body.single-post article.post {
padding: 2.5rem 3rem;
background: var(--theme-palette-color-7, #f1ebe5) !important;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(27, 47, 60, 0.04), 0 12px 32px rgba(27, 47, 60, 0.08);
}
@media (max-width: 689.98px) {
body.single-post article.post {
padding: 1.5rem 1.25rem;
}
}
html body .ct-header [data-sticky*="yes"] .ct-header-cta[data-id="button"] .ct-button {
background-color: var(--theme-palette-color-1, #f7941d) !important;
}
/* Offer bar background: a sheen across the navy and an amber line under
it, so the bar reads as a promotion, not part of the header (Praj,
30/10/2026; the amber tag came out). */
html body .pr-offer-bar {
background: linear-gradient(90deg, #1b2f3c 0%, #34516a 50%, #1b2f3c 100%) !important;
border-bottom: 3px solid var(--theme-palette-color-1, #f7941d) !important; /* the $49 amber */
}
/* About: the closing welcome (about-welcome-at-bottom.php). */
.pr-about-welcome {
max-width: 680px;
margin: 3rem auto 1rem;
text-align: center;
}
.pr-about-welcome p {
color: #3f5459;
font-size: 1.05rem;
line-height: 1.7;
}
.pr-about-welcome .wp-block-button__link {
padding: 14px 34px;
font-weight: 700;
color: var(--theme-palette-color-4, #1b2f3c) !important;
background: #fde3c0 !important;
border-radius: 999px;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d);
}
.pr-about-welcome .wp-block-button__link:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
}
/* Articles a step wider: 900px for the page, which still keeps lines to a
comfortable reading length once its padding is taken off. */
html body.single-post article.post {
--theme-narrow-container-max-width: 900px;
max-width: 900px !important;
}
/* Every remaining button two-tone (Praj, 30/10/2026): the Memberships
Sign Up on the navy card, "Load more" on any list, and buttons inside
articles. */
html body .stk-f27a78f .stk-button,
html body .ct-load-more,
html body.single-post .entry-content .wp-block-button__link {
background: #fde3c0 !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d) !important;
color: #1b2f3c !important;
border: 0 !important;
font-weight: 700;
}
html body .stk-f27a78f .stk-button .stk-button__inner-text {
color: #1b2f3c !important;
}
html body .stk-f27a78f .stk-button:hover,
html body .ct-load-more:hover,
html body.single-post .entry-content .wp-block-button__link:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
}
/* Article headings a size down, in step with 16px body text. */
html body.single-post .entry-content h2 {
font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.65rem);
line-height: 1.3;
margin-top: 2rem;
}
html body.single-post .entry-content h3 {
font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
line-height: 1.35;
}
html body.single-post .entry-content h4 {
font-size: 1.1rem;
}
/* Footer with the header's navy sheen. */
[data-footer*="type-1"] .ct-footer [data-row*="middle"],
[data-footer*="type-1"] .ct-footer [data-row*="bottom"],
html body footer.ct-footer {
background: linear-gradient(90deg, #1b2f3c 0%, #34516a 50%, #1b2f3c 100%) !important;
}
/* The card's own background layers drew bands over the sheen. */
html body.home .stk-0b0e561::before,
html body.home .stk-0b0e561 > .stk-column-wrapper,
html body.home .stk-0b0e561 .stk-column-wrapper::before {
background: none !important;
background-color: transparent !important;
}
/* -----------------------------------------------------------------
* 5t. Contact map placeholder while it loads (functions.php)
* -------------------------------------------------------------- */
iframe.pr-deferred-map {
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f7941d'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center 42% / 40px no-repeat,
var(--theme-palette-color-6, #e9e0d6);
transition: opacity 0.3s ease;
}
/* Contact map frame (contact-map-frame.php): the same stone edge and
rounded corners as the old map block. */
.pr-contact-map {
height: 100%;
min-height: 380px;
border: 2px solid var(--theme-palette-color-5, #e4d9cd);
border-radius: 20px;
overflow: hidden;
}
.pr-contact-map iframe {
display: block;
width: 100%;
height: 100%;
min-height: 380px;
border: 0;
}
/* Blog cards: the summary darker and a touch larger, so it reads easily on
the stone (Praj, 30/10/2026). */
html body [data-prefix="blog"] .entries .entry-card .entry-excerpt,
html body [data-prefix="categories"] .entries .entry-card .entry-excerpt {
color: #3f5459 !important;
font-size: 15.5px;
line-height: 1.6;
}
/* Footer on phones: Explore in two columns, a shorter map, the sheen running
down rather than across, and smaller fine print (Praj, 30/10/2026). */
@media (max-width: 689.98px) {
html body footer.ct-footer,
[data-footer*="type-1"] .ct-footer [data-row*="middle"],
[data-footer*="type-1"] .ct-footer [data-row*="bottom"] {
background: linear-gradient(180deg, #1b2f3c 0%, #2c4559 55%, #1b2f3c 100%) !important;
}
.ct-footer .pr-footer__links {
display: grid !important;
grid-template-columns: 1fr 1fr;
column-gap: 1rem;
row-gap: 0.15rem;
}
.ct-footer .pr-footer__links li a {
font-size: 14.5px;
}
.ct-footer .pr-footer__heading {
margin-top: 1.75rem !important;
margin-bottom: 0.7rem !important;
}
.ct-footer .ct-widget:first-child .pr-footer__heading:first-child {
margin-top: 0 !important;
}
.pr-footer__map,
.pr-footer__map iframe {
height: 180px !important;
min-height: 0 !important;
}
.pr-footer__map {
border-radius: 14px;
overflow: hidden;
}
.ct-footer [data-row="bottom"] {
font-size: 13px;
}
}
html body .entry-card .entry-excerpt,
html body .entry-card .entry-excerpt p {
color: #3f5459 !important;
}
@media (max-width: 689.98px) {
html body .ct-footer .pr-footer__links li {
margin: 0 !important;
padding: 5px 0 !important;
}
}
/* Schedule: the private Book button two-tone like every other button
(it was a navy outline). */
html body .pr-schedule .ct-button.pr-schedule__outline {
background: #fde3c0 !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d) !important;
border: 0 !important;
color: #1b2f3c !important;
font-weight: 700;
}
html body .pr-schedule .ct-button.pr-schedule__outline:hover {
background: var(--theme-palette-color-1, #f7941d) !important;
}
/* Title bands with the header and footer's sheen over the photo: deep navy
at the edges, a lighter green-navy in the middle, so they read rich rather
than washed out (Praj, 30/10/2026). */
html body .hero-section[data-type="type-2"] {
background-image:
linear-gradient(90deg, rgba(27, 47, 60, 0.94) 0%, rgba(52, 81, 106, 0.8) 50%, rgba(27, 47, 60, 0.94) 100%),
url("../img/band-standing.jpg") !important;
}
@media (max-width: 689.98px) {
html body .hero-section[data-type="type-2"] {
background-image:
linear-gradient(180deg, rgba(27, 47, 60, 0.9) 0%, rgba(52, 81, 106, 0.82) 60%, rgba(27, 47, 60, 0.92) 100%),
url("../img/band-standing.jpg") !important;
}
}
/* Home hero logo: a faint shadow lifts it off the photo. */
html body.home .stk-1284f2b .stk-block-image .stk-img-wrapper {
filter: drop-shadow(0 2px 6px rgba(15, 25, 32, 0.45)) !important;
}
/* Header row: the menu ran up against the centred logo between about 1000
and 1440px. Tighter item spacing there keeps a clear gap. */
@media (min-width: 1000px) and (max-width: 1439.98px) {
html body #header [data-id="menu"] {
--menu-items-spacing: 30px;
margin-left: 0 !important;
}
}
@media (min-width: 1000px) and (max-width: 1149.98px) {
html body #header [data-id="menu"] {
--menu-items-spacing: 22px;
}
}
/* Title band type white rather than stone, so it reads crisply on the
photo (Praj, 30/10/2026). */
html body .hero-section[data-type="type-2"] .page-title,
html body .hero-section[data-type="type-2"] h1 {
color: #fff !important;
text-shadow: 0 2px 12px rgba(15, 25, 32, 0.35);
}
html body .hero-section[data-type="type-2"] .ct-breadcrumbs,
html body .hero-section[data-type="type-2"] .ct-breadcrumbs a,
html body .hero-section[data-type="type-2"] .ct-breadcrumbs span {
color: #fff !important;
opacity: 0.9;
}
/* -----------------------------------------------------------------
* 5u. Schedule in navy and stone (Praj, 30/10/2026)
* -------------------------------------------------------------- */
/* Day names on a navy strip. The class cells keep their own amber and teal
tints, which tell the two classes apart at a glance (Praj, 30/10/2026). */
html body .pr-schedule .pr-schedule__day-name {
padding: 6px 10px;
color: var(--theme-palette-color-7, #f1ebe5) !important;
background: #273f4f !important;
border: 0 !important;
border-radius: 8px;
}
html body .pr-schedule .pr-schedule__session .pr-schedule__time {
color: var(--theme-palette-color-4, #1b2f3c) !important;
}
/* "Learn more" under the prices (.stk-8ae4935): navy text on hover, like
every two-tone button, not orange on the amber fill. */
html body .stk-8ae4935 .stk-button:hover .stk-button__inner-text,
html body .stk-8ae4935 .stk-button:hover {
color: var(--theme-palette-color-4, #1b2f3c) !important;
}
/* "Morning" / "Afternoon" / "Evening" beside each class time. */
.pr-schedule .pr-schedule__part {
margin-left: 0.25em;
font-size: 0.72em;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #5f6f73;
}
/* The Book pill sits under the class name and the part of day under the
time, on every screen (Praj, 30/10/2026: it read best that way). */
html body .pr-schedule .pr-schedule__link {
padding-bottom: 0.7rem !important;
}
html body .pr-schedule .pr-schedule__book {
position: static;
display: inline-block;
margin-top: 0.5rem;
transform: none;
}
html body .pr-schedule .pr-schedule__part {
display: block;
margin: 0.1rem 0 0;
font-size: 11px;
}
/* Beginner classes: the Book pill in the class's teal, two-tone. */
html body .pr-schedule .pr-schedule__session--beginner .pr-schedule__book {
background: #cdebe6;
box-shadow: inset 0 0 0 1.5px #2a9d8f;
}
html body .pr-schedule .pr-schedule__session--beginner .pr-schedule__link:hover .pr-schedule__book,
html body .pr-schedule .pr-schedule__session--beginner .pr-schedule__link:focus-visible .pr-schedule__book {
background: #2a9d8f;
color: #fff;
}
/* Schedule on phones: one day per row, the day in a navy tab on the left and
its classes beside it, so short days leave no gaps (Praj, 30/10/2026). The
boxes are wide here, so the Book pill sits on the right. */
@media (max-width: 767.98px) {
html body .pr-schedule .pr-schedule__days {
display: flex !important;
flex-direction: column;
gap: 0.75rem !important;
grid-template-columns: none !important;
}
html body .pr-schedule .pr-schedule__day {
display: grid !important;
grid-template-columns: 54px 1fr;
gap: 0.6rem;
align-items: stretch;
}
html body .pr-schedule .pr-schedule__day-name {
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0.5rem 0 !important;
font-size: 12px;
writing-mode: horizontal-tb;
}
html body .pr-schedule .pr-schedule__sessions {
display: flex !important;
flex-direction: column;
gap: 0.5rem !important;
margin: 0 !important;
}
}
@media (max-width: 767.98px) {
html body .pr-schedule .pr-schedule__link {
padding-right: 5.5rem !important;
padding-bottom: 0.6rem !important;
}
html body .pr-schedule .pr-schedule__book {
position: absolute;
top: 50%;
right: 0.8rem;
margin: 0;
transform: translateY(-50%);
font-size: 13px;
padding: 5px 14px;
}
}
/* -----------------------------------------------------------------
* 5v. Phone menu, simplified (Praj, 30/10/2026: "too many styles")
* -------------------------------------------------------------- */
/* The scrolled header's look: navy sheen, stone type, the stone logo, one
two-tone Book button, a plain left-aligned menu with fine dividers, and
the contact details as simple rows. */
@media (max-width: 999.98px) {
html body #offcanvas .ct-panel-inner {
background: linear-gradient(180deg, #1b2f3c 0%, #2c4559 55%, #1b2f3c 100%) !important;
color: var(--theme-palette-color-7, #f1ebe5);
}
html body #offcanvas .ct-toggle-close {
--theme-icon-color: var(--theme-palette-color-7, #f1ebe5) !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
}
html body #offcanvas img.wp-image-1457,
html body #offcanvas img[src*="logo-navy"] {
content: url("../img/logo-stone.png");
max-width: 190px;
height: auto;
}
/* One button: Book, two-tone. Schedule is in the menu below. */
html body #offcanvas .pr-mm-btn--sched {
display: none !important;
}
html body #offcanvas .pr-mm-btn--book {
background: #fde3c0 !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d) !important;
color: #1b2f3c !important;
font-size: 16px !important;
padding: 12px 20px !important;
}
html body #offcanvas .pr-mm-top {
padding-bottom: 1.25rem !important;
border-bottom: 0 !important;
}
/* Menu: left-aligned sans, fine stone dividers, amber for the page
you're on. */
html body #offcanvas nav ul {
width: 100%;
border-top: 1px solid rgba(241, 235, 229, 0.18);
}
html body #offcanvas nav li {
width: 100%;
border-bottom: 1px solid rgba(241, 235, 229, 0.18);
}
html body #offcanvas .ct-menu-link {
display: block !important;
width: 100%;
padding: 14px 4px !important;
font-family: inherit !important;
font-size: 18px !important;
font-weight: 600 !important;
text-align: left !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
background: none !important;
border-radius: 0 !important;
}
html body #offcanvas .current-menu-item > .ct-menu-link {
color: var(--theme-palette-color-1, #f7941d) !important;
background: none !important;
}
/* Contact rows: small stone icons, no filled circles. */
html body #offcanvas .pr-mm-contact {
border-top: 0 !important;
margin-top: 1.25rem !important;
}
html body #offcanvas .pr-mm-contact a {
color: var(--theme-palette-color-7, #f1ebe5) !important;
font-size: 15px;
padding: 7px 0 !important;
background: none !important;
box-shadow: none !important;
border: 0 !important;
}
html body #offcanvas .pr-mm-icon {
width: 22px !important;
height: 22px !important;
background: none !important;
color: var(--theme-palette-color-1, #f7941d) !important;
}
html body #offcanvas .pr-mm-icon svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
}
html body #offcanvas .pr-mm-slogan {
font-size: 1.4rem !important;
color: rgba(241, 235, 229, 0.75) !important;
text-shadow: none !important;
-webkit-text-stroke: 0 !important;
}
}
/* The panel rule above lost to an earlier, more specific one; this wins. */
@media (max-width: 999.98px) {
html body[data-header] #offcanvas .ct-panel-inner,
html body #offcanvas.ct-panel .ct-panel-inner {
background-color: #1b2f3c !important;
background-image: linear-gradient(180deg, #1b2f3c 0%, #2c4559 55%, #1b2f3c 100%) !important;
}
html body #offcanvas nav li,
html body #offcanvas nav li.current-menu-item {
text-align: left !important;
justify-content: flex-start !important;
}
html body #offcanvas .current-menu-item > .ct-menu-link {
display: block !important;
padding: 14px 4px !important;
}
}
/* Footer: the copyright strip a step darker than the rows above it. */
html body [data-footer*="type-1"] .ct-footer [data-row*="bottom"] {
background: #14232d !important;
}
@media (max-width: 999.98px) {
html body #offcanvas [data-id="mobile-menu"] .ct-menu-link {
color: var(--theme-palette-color-7, #f1ebe5) !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 14px 4px !important;
text-align: left !important;
background: none !important;
}
html body #offcanvas [data-id="mobile-menu"] .current-menu-item > .ct-menu-link {
color: var(--theme-palette-color-1, #f7941d) !important;
}
}
/* Hero Class Schedule: inverted - navy with stone text and a stone edge,
stone on hover (Praj, 30/10/2026). */
html body.home .stk-1284f2b .stk-b34024c .stk-button {
background: #1b2f3c !important;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-7, #f1ebe5) !important;
}
html body.home .stk-1284f2b .stk-b34024c .stk-button,
html body.home .stk-1284f2b .stk-b34024c .stk-button .stk-button__inner-text {
color: var(--theme-palette-color-7, #f1ebe5) !important;
}
html body.home .stk-1284f2b .stk-b34024c .stk-button:hover {
background: var(--theme-palette-color-7, #f1ebe5) !important;
}
html body.home .stk-1284f2b .stk-b34024c .stk-button:hover .stk-button__inner-text {
color: #1b2f3c !important;
}
@media (max-width: 999.98px) {
html body #offcanvas [data-id="mobile-menu"] li,
html body #offcanvas [data-id="mobile-menu"] li.current-menu-item {
display: block !important;
text-align: left !important;
}
html body #offcanvas [data-id="mobile-menu"] .current-menu-item > .ct-menu-link {
display: block !important;
border-radius: 0 !important;
}
}
/* Google reviews on a full-width stone band, so they read as their own
section; the dots above them go (Praj, 30/10/2026). */
html body.home .wp-block-group:has(> #g-review),
html body.home .wp-block-group:has(#g-review):not(:has(.wp-block-group #g-review)) {
max-width: none !important;
margin: 0 !important;
padding: 3.5rem max(16px, calc((100vw - 1230px) / 2)) 3rem !important;
background: var(--theme-palette-color-7, #f1ebe5);
}
html body.home .stk-d391f3e {
display: none !important;
}
html body.home #g-review .gr-reviews-card,
html body.home #g-review [class*="review-card"] {
background: #fff;
}
html body.home .wp-block-group:has(> #g-review) {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box;
}
html body.home .wp-block-group:has(> #g-review) > #g-review {
max-width: 1230px;
margin-left: auto !important;
margin-right: auto !important;
}
html body {
overflow-x: clip;
}
/* Phone menu, one row style for the menu links and the contact details:
an amber icon, the same text size, padding and divider (Praj,
30/10/2026). The slogan sits small under the logo. */
@media (max-width: 999.98px) {
html body #offcanvas [data-id="mobile-menu"] .ct-menu-link,
html body #offcanvas .pr-mm-contact a {
display: flex !important;
align-items: center;
gap: 14px;
width: 100% !important;
margin: 0 !important;
padding: 13px 4px !important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
border-bottom: 1px solid rgba(241, 235, 229, 0.16) !important;
border-radius: 0 !important;
}
html body #offcanvas .pr-mm-contact a {
font-weight: 500 !important;
}
html body #offcanvas [data-id="mobile-menu"] li {
border: 0 !important;
}
html body #offcanvas [data-id="mobile-menu"] ul {
border-top: 1px solid rgba(241, 235, 229, 0.16) !important;
}
html body #offcanvas .pr-mm-contact {
margin-top: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
html body #offcanvas .pr-mm-icon {
flex: 0 0 18px;
width: 18px !important;
height: 18px !important;
display: inline-flex;
align-items: center;
justify-content: center;
background: none !important;
border-radius: 0 !important;
color: var(--theme-palette-color-1, #f7941d) !important;
}
html body #offcanvas .pr-mm-icon svg {
width: 18px !important;
height: 18px !important;
}
html body #offcanvas .pr-mm-email {
font-size: 15px !important;
}
html body #offcanvas .pr-mm-top .pr-mm-slogan {
margin: -0.4rem 0 1.1rem !important;
font-size: 1.15rem !important;
text-align: center;
color: rgba(241, 235, 229, 0.8) !important;
}
html body #offcanvas .pr-mm-extra {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
@media (max-width: 999.98px) {
html body #offcanvas [data-id="mobile-menu"] li > .ct-menu-link,
html body #offcanvas [data-id="mobile-menu"] li.current-menu-item > .ct-menu-link {
justify-content: flex-start !important;
text-align: left !important;
font-size: 16px !important;
padding: 13px 4px !important;
}
html body #offcanvas [data-id="mobile-menu"] li.current-menu-item > .ct-menu-link {
color: var(--theme-palette-color-1, #f7941d) !important;
}
html body #offcanvas .pr-mm-email {
font-size: 14px !important;
white-space: nowrap;
}
}
/* The copyright strip darker than the footer above it. */
html body footer.ct-footer [data-row*="bottom"],
html body [data-footer*="type-1"] footer.ct-footer [data-row*="bottom"] {
background: #14232d !important;
background-image: none !important;
}
html body[data-footer] footer.ct-footer [data-row*="bottom"] {
background: #14232d !important;
background-image: none !important;
}
@media (max-width: 999.98px) {
html body #offcanvas [data-id="mobile-menu"] li.current-menu-item > a.ct-menu-link {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
}
/* Home hero on phones: less space above the logo (118px was padding plus
two spacers, one from an empty side column stacked on top). */
@media (max-width: 689.98px) {
html body .stk-1284f2b {
padding-top: 30px !important;
}
html body .stk-1284f2b :is(.stk-da5494a, .stk-d1816d3) {
display: none !important;
}
html body .stk-1284f2b .stk-1f26ccd {
height: 8px !important;
}
}
/* Copyright line smaller on every screen. */
html body[data-footer] footer.ct-footer [data-row*="bottom"],
html body[data-footer] footer.ct-footer [data-row*="bottom"] p,
html body[data-footer] footer.ct-footer [data-row*="bottom"] a {
font-size: 12.5px !important;
line-height: 1.6 !important;
}
/* Phone menu on stone rather than navy (Praj, 30/10/2026: "too teal"):
navy type and logo, amber icons, navy dividers. Layout unchanged. */
@media (max-width: 999.98px) {
html body[data-header] #offcanvas .ct-panel-inner,
html body #offcanvas.ct-panel .ct-panel-inner {
background-color: var(--theme-palette-color-7, #f1ebe5) !important;
background-image: none !important;
color: #1b2f3c;
}
html body #offcanvas .ct-toggle-close {
--theme-icon-color: #1b2f3c !important;
color: #1b2f3c !important;
}
html body #offcanvas img.wp-image-1457,
html body #offcanvas img[src*="logo-navy"] {
content: normal;
}
html body #offcanvas [data-id="mobile-menu"] .ct-menu-link,
html body #offcanvas [data-id="mobile-menu"] li > .ct-menu-link,
html body #offcanvas .pr-mm-contact a {
color: #1b2f3c !important;
border-bottom-color: rgba(27, 47, 60, 0.14) !important;
}
html body #offcanvas [data-id="mobile-menu"] ul {
border-top-color: rgba(27, 47, 60, 0.14) !important;
}
html body #offcanvas [data-id="mobile-menu"] li.current-menu-item > .ct-menu-link {
color: #b45309 !important;
}
html body #offcanvas .pr-mm-top .pr-mm-slogan {
color: #3f5459 !important;
}
html body #offcanvas .pr-mm-icon {
color: #d97b08 !important;
}
}
@media (max-width: 999.98px) {
html body #offcanvas .pr-mm-extra,
html body #offcanvas .pr-mm-contact {
border-top: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
}
@media (max-width: 999.98px) {
html body #offcanvas [data-id="mobile-menu"],
html body #offcanvas [data-id="mobile-menu"] ul {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
}
/* The three-dot dividers go everywhere (Praj, 30/10/2026); section
headings carry the breaks, with more room above them instead. */
html body .stk-block-divider {
display: none !important;
}
html body.home .stk-00a369f {
margin-top: 4.5rem !important;
}
html body.home .stk-99466fa {
margin-top: 3.5rem !important;
margin-bottom: 1.75rem !important;
}
html body .stk-92759f0 {
margin-bottom: 1.75rem !important;
}
/* Phone menu icons in the site's teal-navy, not amber. */
@media (max-width: 999.98px) {
html body #offcanvas .pr-mm-icon {
color: #273f4f !important;
}
html body #offcanvas [data-id="mobile-menu"] li.current-menu-item .pr-mm-icon {
color: #b45309 !important;
}
}
/* Phone menu: the slogan tucked up under the logo. */
@media (max-width: 999.98px) {
html body #offcanvas .ct-header-text {
margin-bottom: 0 !important;
}
html body #offcanvas .pr-mm-top .pr-mm-slogan {
margin-top: 2px !important;
}
}
@media (max-width: 999.98px) {
html body #offcanvas .ct-panel-content-inner {
padding-top: 1.25rem !important;
}
}
/* Phone menu: content from the top, not centred down the panel; no row
dividers, with a little room between the menu and the contact details. */
@media (max-width: 999.98px) {
html body #offcanvas .ct-panel-content {
justify-content: flex-start !important;
padding-top: 1.5rem !important;
}
html body #offcanvas [data-id="mobile-menu"] .ct-menu-link,
html body #offcanvas [data-id="mobile-menu"] li > .ct-menu-link,
html body #offcanvas .pr-mm-contact a {
border-bottom: 0 !important;
padding-top: 11px !important;
padding-bottom: 11px !important;
}
html body #offcanvas [data-id="mobile-menu"] ul {
border-top: 0 !important;
}
html body #offcanvas .pr-mm-contact {
margin-top: 0.9rem !important;
padding-top: 0.9rem !important;
border-top: 1px solid rgba(27, 47, 60, 0.14) !important;
}
}
/* Home hero logo and slogan a size smaller. */
html body.home .stk-1284f2b .stk-block-image {
max-width: 240px !important;
margin-left: auto !important;
margin-right: auto !important;
}
html body.home .stk-1284f2b .stk-block-image .stk-img-wrapper,
html body.home .stk-1284f2b .stk-block-image img {
width: 100% !important;
height: auto !important;
}
html body.home .stk-1284f2b .pr-hero-slogan {
font-size: clamp(1.5rem, 2.4vw, 1.9rem) !important;
}
@media (max-width: 689.98px) {
html body.home .stk-1284f2b .stk-block-image {
max-width: 210px !important;
}
html body.home .stk-1284f2b .pr-hero-slogan {
font-size: 1.45rem !important;
}
}
@media (max-width: 999.98px) {
html body #offcanvas .pr-mm-top {
padding-bottom: 0.6rem !important;
margin-bottom: 0 !important;
}
html body #offcanvas [data-id="mobile-menu"] {
margin-top: 0 !important;
padding-top: 0 !important;
}
html body #offcanvas .ct-panel-content {
padding-top: 0.75rem !important;
}
}
/* Phone menu: the logo and slogan a size up now there's room. */
@media (max-width: 999.98px) {
html body #offcanvas img.wp-image-1457,
html body #offcanvas img[src*="logo-navy"] {
width: 220px !important;
max-width: 220px !important;
height: auto !important;
}
html body #offcanvas .pr-mm-top .pr-mm-slogan {
font-size: 1.45rem !important;
margin-top: 4px !important;
}
}
/* Home hero: a little more room above the logo, less between the slogan
and the buttons (Praj, 30/10/2026). */
html body .stk-1284f2b .stk-1f26ccd {
height: 40px !important;
}
html body .stk-1284f2b .stk-000f4df {
height: 18px !important;
}
@media (max-width: 689.98px) {
html body .stk-1284f2b {
padding-top: 30px !important;
}
html body .stk-1284f2b .stk-1f26ccd {
height: 22px !important;
}
html body .stk-1284f2b .stk-000f4df {
height: 14px !important;
}
}
/* "Pilates to Suit Everyone": tighter above and below. */
html body.home .stk-99466fa {
margin-top: 2rem !important;
margin-bottom: 1rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
@media (max-width: 689.98px) {
html body.home .stk-99466fa {
margin-top: 1.5rem !important;
margin-bottom: 0.75rem !important;
}
}
/* Phones: Prices tighter above and below its heading, and a touch more
room between the hero logo and its buttons (Praj, 30/10/2026). */
@media (max-width: 689.98px) {
html body.home .stk-00a369f {
margin-top: 2.25rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0.75rem !important;
}
html body.home .stk-a4dc2a8-column {
row-gap: 20px !important;
}
html body .stk-1284f2b .stk-000f4df {
height: 24px !important;
}
}
/* Reviews band: less padding above the rating. */
html body.home .wp-block-group:has(> #g-review) {
padding-top: 2rem !important;
padding-bottom: 2.25rem !important;
}
html body #g-review .grwp_header-inner {
padding-top: 0 !important;
}
@media (max-width: 689.98px) {
html body.home .wp-block-group:has(> #g-review) {
padding-top: 1.5rem !important;
}
}
/* Prices on desktop: less space above the heading and to the cards. */
@media (min-width: 690px) {
html body.home .stk-00a369f {
margin-top: 2.5rem !important;
margin-bottom: 1rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/* A full-width 1px stone line where the Prices section starts. */
html body.home .wp-block-group:has(> .stk-00a369f) {
position: relative;
padding-top: 1px;
}
html body.home .wp-block-group:has(> .stk-00a369f)::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 1px;
transform: translateX(-50%);
background: var(--theme-palette-color-5, #e4d9cd);
}
/* Desktop: Prices inside a rounded stone border instead of the line. */
@media (min-width: 690px) {
html body.home .wp-block-group:has(> .stk-00a369f)::before {
display: none;
}
html body.home .wp-block-group:has(> .stk-00a369f) {
margin-top: 2.5rem !important;
padding: 1.75rem 2rem 2rem !important;
border: 1px solid var(--theme-palette-color-5, #e4d9cd);
border-radius: 24px;
max-width: 1230px;
margin-left: auto !important;
margin-right: auto !important;
}
html body.home .wp-block-group:has(> .stk-00a369f) .stk-00a369f {
margin-top: 0 !important;
}
}
html body.home .stk-99466fa {
margin-bottom: 1.75rem !important;
}
@media (max-width: 689.98px) {
html body.home .stk-99466fa {
margin-bottom: 1.25rem !important;
}
}
/* "Every class is different..." at a reading width. */
html body.home .wp-block-group:has(> p):has(> .stk-block-button-group) > p,
html body.home p.has-text-align-center:not(.stk-block-text__text) {
max-width: 760px;
margin-left: auto !important;
margin-right: auto !important;
}
/* Phone menu: a teal-navy top block (stone logo, slogan, Book), the stone
list below (Praj, 30/10/2026: "more teal in places"). */
@media (max-width: 999.98px) {
html body #offcanvas .ct-panel-content {
padding-top: 0 !important;
}
html body #offcanvas .ct-header-text,
html body #offcanvas .pr-mm-top {
margin-left: -24px !important;
margin-right: -24px !important;
padding-left: 24px !important;
padding-right: 24px !important;
background: linear-gradient(180deg, #1b2f3c 0%, #2c4559 100%);
}
html body #offcanvas .ct-header-text {
padding-top: 2.5rem !important;
}
html body #offcanvas .pr-mm-top {
padding-bottom: 1.4rem !important;
margin-bottom: 0.75rem !important;
border-radius: 0 0 20px 20px;
}
html body #offcanvas img.wp-image-1457,
html body #offcanvas img[src*="logo-navy"] {
content: url("../img/logo-stone.png");
}
html body #offcanvas .pr-mm-top .pr-mm-slogan {
color: rgba(241, 235, 229, 0.85) !important;
}
html body #offcanvas .ct-toggle-close {
--theme-icon-color: var(--theme-palette-color-7, #f1ebe5) !important;
color: var(--theme-palette-color-7, #f1ebe5) !important;
z-index: 3;
}
}
@media (max-width: 999.98px) {
html body #offcanvas .ct-header-text,
html body #offcanvas .pr-mm-top {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
background: none !important;
border-radius: 0 !important;
}
html body #offcanvas .ct-header-text {
padding-top: 1.75rem !important;
}
html body #offcanvas .pr-mm-top {
padding-bottom: 1.5rem !important;
margin-bottom: 1.25rem !important;
}
}
/* Phone menu: the teal-navy painted once, full width, from the top of the
panel to just below the Book button; stone from there down. */
@media (max-width: 999.98px) {
html body[data-header] #offcanvas .ct-panel-inner,
html body #offcanvas.ct-panel .ct-panel-inner {
background-color: var(--theme-palette-color-7, #f1ebe5) !important;
background-image: linear-gradient(180deg, #1b2f3c 0, #273f4f 276px, var(--theme-palette-color-7, #f1ebe5) 276px) !important;
/* The panel scrolls when the phone is short (Safari's bars), so the
band scrolls with the rows rather than the rows sliding into it. */
background-attachment: local !important;
}
}
/* "Every class is different": a full-width 1px stone line above it, like
the one above Prices on phones. */
html body.home .wp-block-group[class]:has(> p.has-text-align-center) {
position: relative;
padding-top: 2rem !important;
}
html body.home .wp-block-group[class]:has(> p.has-text-align-center)::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 100vw;
height: 1px;
transform: translateX(-50%);
background: var(--theme-palette-color-5, #e4d9cd);
}
/* 5w: studio lead line, phone menu edge (white beside the navy band, teal
beside the stone), and the Prices link (Praj, 30/10/2026). */
html body.home h3.pr-studio-lead {
font-family: "Merriweather", Georgia, serif;
font-size: 1.4rem !important;
font-weight: 700;
line-height: 1.3;
color: var(--theme-palette-color-4, #1b2f3c) !important;
max-width: 640px !important;
margin: 0 auto 0.75rem !important;
}
html body.home p.pr-studio-more {
font-size: 1rem;
line-height: 1.7;
color: #5f6f73 !important;
max-width: 640px !important;
margin: 0 auto 1.5rem !important;
}
@media (max-width: 999.98px) {
html body #offcanvas.ct-panel .ct-panel-inner {
position: relative;
border-right: 1px solid #4b5b66 !important;
border-bottom: 1px solid #4b5b66 !important;
}
/* Beside the navy band the edge is stone, so the band stands off the header. */
html body #offcanvas.ct-panel .ct-panel-inner::after {
content: "";
position: absolute;
top: 0;
right: -1px;
width: 24px;
height: 276px;
pointer-events: none;
border-right: 1px solid #e4d9cd;
border-top-right-radius: 24px;
}
}
html { scroll-padding-top: 90px; }
/* Prices is a link within home, so it is never the current page. */
html body #offcanvas .menu-item a[href="/#prices"] { color: var(--theme-palette-color-4, #1b2f3c) !important; }
/* Second buttons are light teal: a pale teal fill inside a teal outline,
navy text - Class Schedule in the hero and Read the blog (Praj, 30/10/2026). */
html body.home .stk-1284f2b .stk-b34024c .stk-button,
html body.home .stk-block .stk-block-button.pr-btn-blog.stk-b10gb7n .stk-button {
background: #dcebe9 !important;
box-shadow: inset 0 0 0 2px #3f5459 !important;
}
html body.home .stk-block .stk-block-button.pr-btn-blog.stk-b10gb7n .stk-button:before { border-color: transparent !important; }
html body.home .stk-1284f2b .stk-b34024c .stk-button,
html body.home .stk-1284f2b .stk-b34024c .stk-button .stk-button__inner-text,
html body.home .stk-block .stk-block-button.pr-btn-blog.stk-b10gb7n .stk-button .stk-button__inner-text,
html body.home .stk-1284f2b .stk-b34024c .stk-button:hover .stk-button__inner-text,
html body.home .stk-block .stk-block-button.pr-btn-blog.stk-b10gb7n .stk-button:hover .stk-button__inner-text {
color: #1b2f3c !important;
}
html body.home .stk-1284f2b .stk-b34024c .stk-button:hover,
html body.home .stk-block .stk-block-button.pr-btn-blog.stk-b10gb7n .stk-button:hover {
background: #c3dcd9 !important;
}
/* On the dark hero photo the dark teal ring disappears, so Class Schedule
gets a mid-teal ring and bold text to read like Read the blog. */
html body.home .stk-1284f2b .stk-b34024c .stk-button {
box-shadow: inset 0 0 0 2px #6f9c99 !important;
}
html body.home .stk-1284f2b .stk-b34024c .stk-button .stk-button__inner-text {
font-weight: 700 !important;
}
/* Gift voucher line under the price cards (Praj, 30/10/2026). */
html body.home p.pr-prices-voucher {
margin: 2rem auto 0 !important;
color: #5f6f73;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1rem;
justify-content: center;
align-items: center;
}
html body.home a.pr-prices-voucher__link {
display: inline-block;
padding: 10px 28px;
border-radius: 50px;
background: #fde3c0;
box-shadow: inset 0 0 0 2px var(--theme-palette-color-1, #f7941d);
color: #1b2f3c !important;
font-weight: 700;
text-decoration: none;
}
html body.home a.pr-prices-voucher__link:hover { background: var(--theme-palette-color-1, #f7941d); }
/* The voucher button sits under its line, in the Beginner green (Praj, 30/10/2026). */
html body.home p.pr-prices-voucher { flex-direction: column; }
html body.home a.pr-prices-voucher__link {
background: #d8efec;
box-shadow: inset 0 0 0 2px #2a9d8f;
}
html body.home a.pr-prices-voucher__link:hover { background: #2a9d8f; color: #ffffff !important; }
/* Phone touch targets (Praj, 31/10/2026): the header circles sit 14px
apart instead of 10px, and each one's tap area runs to 45px through
padding the circle itself doesn't show. The menu rows grow to 48px. */
@media (max-width: 999.98px) {
.ct-header .ct-header-socials[data-id="socials"] {
--items-spacing: 14px;
}
.ct-header .ct-header-cta[data-id="button"],
.ct-header .ct-header-socials[data-id="socials"] {
--margin: 0 0 0 14px;
}
.ct-header [data-id="socials"] a,
.ct-header .ct-header-cta[data-id="button"] .ct-button {
position: relative;
}
.ct-header [data-id="socials"] a::after,
.ct-header .ct-header-cta[data-id="button"] .ct-button::after {
content: "";
position: absolute;
inset: -5px;
}
html body #offcanvas [data-id="mobile-menu"] li > .ct-menu-link,
html body #offcanvas [data-id="mobile-menu"] li.current-menu-item > .ct-menu-link,
html body #offcanvas .pr-mm-contact a {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
}
/* Phone menu band: less navy (Praj, 31/10/2026). A 60px logo, no slogan,
tighter under the Book button, so the band ends at 204px, where the
gradient and the stone edge below are retuned to match. */
@media (max-width: 999.98px) {
html body #offcanvas img {
max-height: 60px !important;
width: auto !important;
}
html body #offcanvas .pr-mm-slogan {
display: none !important;
}
html body #offcanvas .pr-mm-top {
padding-bottom: 1rem !important;
}
html body #offcanvas .pr-mm-ctas {
margin-top: 16px !important;
}
html body[data-header] #offcanvas .ct-panel-inner,
html body #offcanvas.ct-panel .ct-panel-inner {
background-image: linear-gradient(180deg, #1b2f3c 0, #273f4f 204px, var(--theme-palette-color-7, #f1ebe5) 204px) !important;
}
html body #offcanvas.ct-panel .ct-panel-inner::after {
height: 204px;
}
}