bars from the original hamburger are hidden; a "Menu" label +
chevron are rendered via pseudo-elements so no per-page HTML change is needed. */
.nav-toggle {
display: inline-flex;
align-items: center;
gap: 0.5em;
cursor: pointer;
padding: 0.4rem 0.95rem;
background: none;
border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
border-radius: 999px;
color: var(--color-white);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-caps);
text-transform: uppercase;
line-height: 1;
transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.nav-toggle:hover {
border-color: currentColor;
background-color: color-mix(in srgb, currentColor 10%, transparent);
}
/* "Menu" / "Close" label */
.nav-toggle::before {
content: "Menu";
}
.nav-toggle[aria-expanded="true"]::before {
content: "Close";
}
/* Chevron that flips when open */
.nav-toggle::after {
content: "";
width: 0.5em;
height: 0.5em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-0.12em) rotate(45deg);
transition: transform var(--transition-fast);
}
.nav-toggle[aria-expanded="true"]::after {
transform: translateY(0.08em) rotate(-135deg);
}
/* Hide the original hamburger bars — replaced by the text label above */
.nav-toggle span {
display: none;
}
/* Solid-header state: toggle text/border go dark to stay legible on white */
.site-header.is-solid .nav-toggle {
color: var(--color-dark);
}
/* Dropdown menu panel (repurposed from the old full-screen overlay, 2026-06-01).
Compact card anchored top-right under the header. Holds the 6 page links + Book CTA. */
.mobile-nav {
position: fixed;
top: clamp(64px, 8vw, 88px);
right: clamp(1rem, var(--page-padding), var(--page-padding-max));
z-index: 99;
width: min(280px, calc(100vw - 2rem));
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-3);
background-color: var(--color-white);
border-radius: 12px;
box-shadow: 0 12px 40px rgba(23, 41, 54, 0.18);
border: 1px solid var(--color-light-accent);
/* hidden state: faded + lifted + non-interactive */
opacity: 0;
transform: translateY(-8px) scale(0.985);
transform-origin: top right;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s var(--ease-out), transform 0.3s var(--ease-out), visibility 0.3s;
}
.mobile-nav.is-open {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
}
.mobile-nav a {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-meta);
color: var(--color-dark);
text-decoration: none;
text-align: left;
padding: 0.7rem 0.8rem;
border-radius: 8px;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.mobile-nav a:hover {
background-color: var(--color-light-accent);
color: var(--color-dark);
}
/* Book CTA inside the dropdown — accented pill, separated from the link list */
.mobile-nav .btn {
margin-top: var(--space-2);
text-align: center;
background-color: var(--color-accent);
color: var(--color-white);
border: none;
}
.mobile-nav .btn:hover {
background-color: var(--color-accent-dark);
color: var(--color-white);
}
/* Close (×) button: hidden — the Menu/Close toggle in the header handles it now */
.mobile-nav__close {
display: none;
}
/* ============================================================
6. HERO SECTION
============================================================ */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden; /* clip the 120%-tall parallax image's overflow */
background-color: var(--color-dark); /* fallback until image loads */
}
.hero__bg img {
position: absolute;
top: -20%; /* centre the 140%-tall image so it can drift both ways */
left: 0;
width: 100%;
height: 140%; /* DOUBLED overflow (was 120%): 40% total = 20% travel each way,
so the parallax can move twice as far without revealing edges */
object-fit: cover;
display: block;
will-change: transform;
transform: translate3d(0, 0, 0); /* JS updates Y on scroll (parallax) */
}
/* Overlay — live site uses imageOverlayOpacity 0.0 (bright, warm hero photo).
We keep the image essentially un-darkened to MATCH the live feel, and add a
soft bottom-up gradient scrim ONLY behind the centred text block so the white
logo/H1/tagline stay legible without muddying the whole photo. */
.hero__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(23, 41, 54, 0.04) 0%,
rgba(23, 41, 54, 0.06) 38%,
rgba(23, 41, 54, 0.30) 78%,
rgba(23, 41, 54, 0.46) 100%
);
}
.hero__content {
position: relative;
z-index: 1;
max-width: 800px;
padding: var(--space-24) clamp(1rem, var(--page-padding), var(--page-padding-max));
color: var(--color-white);
}
/* Centred hero brand logo above the H1 (2026-06-02).
Sized to span the H1's measured width so logo + heading share the same left/right
edges. The H1 wraps to ~2 lines at a width close to its max-inline-size; we match
that visually with a larger clamp. Enlarged + heading shrunk 2026-06-02 per owner. */
.hero__logo {
display: block;
margin: 0 auto var(--space-8);
width: clamp(338px, 52vw, 624px); /* +30% (was 260-480px) per request 2026-06-02 */
max-width: 100%;
height: auto;
}
/* Phones: the 338px clamp floor left only ~10px of side margin on a 390px
screen — let the logo breathe instead (2026-06-10). */
@media (max-width: 480px) {
.hero__logo {
width: min(300px, 80vw);
}
}
.hero__content h1 {
font-size: clamp(1.35rem, 1.0rem + 1.3vw, 1.95rem); /* reduced — logo is the focal point now (2026-06-02) */
font-weight: var(--font-weight-normal); /* live headings are weight 400 */
line-height: 1.35;
letter-spacing: 0.015em; /* a touch of air at this small display size (2026-06-10) */
color: var(--color-white);
margin-bottom: var(--space-5);
max-width: 18em; /* keeps the heading's measure close to the logo's width */
margin-inline: auto;
text-wrap: balance;
text-shadow: 0 1px 12px rgba(23, 41, 54, 0.35);
}
/* Lead: was pale-blue #CEDBE1 on a bright skin-tone photo — washed out and
borderline-legible. Near-white + a soft shadow + a calmer measure (2026-06-10). */
.hero__content p {
font-size: var(--font-size-lg);
line-height: 1.75;
color: rgba(255, 255, 255, 0.94);
margin-bottom: var(--space-10);
max-width: 54ch;
margin-inline: auto;
text-wrap: pretty;
text-shadow: 0 1px 10px rgba(23, 41, 54, 0.4);
}
.hero__actions {
display: flex;
gap: var(--space-5);
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
7. BUTTONS
============================================================ */
.btn {
display: inline-block;
padding: var(--space-3) var(--space-8);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-caps);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
border: 1.5px solid transparent;
/* BRAND.md §6 — no transform-based motion. Buttons respond via shadow + colour only. */
transition: background-color var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast),
box-shadow var(--transition-fast);
line-height: 1;
}
/* Micro-interaction: the button "rises in light" — a soft shadow bloom on hover/focus,
NO transform (§6 opacity/shadow/brightness-only). It still reads responsive, just
warms and softly lifts in shadow rather than zooming. Reduced-motion users get colour
change only (shadow suppressed in the reduced-motion block). (P2-G, 2026-06-11) */
.btn:hover,
.btn:focus-visible {
box-shadow: var(--shadow-rise);
}
.btn:active {
box-shadow: var(--shadow-sm);
}
/* Primary — solid accent teal */
.btn--primary {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
}
.btn--primary:hover {
background-color: var(--color-accent-dark);
border-color: var(--color-accent-dark);
color: var(--color-white);
}
/* Secondary — was white-outline-on-dark; now dark outline on white backgrounds.
Hero buttons use this: hero is still photo/dark, so we keep it legible there
too — accent border + white text reads on the dark photo, and dark text on hover. */
.btn--outline-white {
background-color: transparent;
border-color: var(--color-accent);
color: var(--color-accent);
}
.btn--outline-white:hover {
background-color: var(--color-accent);
color: var(--color-white);
}
/* Outline on light */
.btn--outline {
background-color: transparent;
border-color: var(--color-accent);
color: var(--color-accent-deep);
}
.btn--outline:hover {
background-color: var(--color-accent);
color: var(--color-white);
}
/* On LIGHT sections (closing CTA), the outline-white button's pale teal text
was ~2.1:1 on the near-white background — deepen the text only, keep the
pale teal border as the brand accent. (2026-06-10) */
.cta-section .btn--outline-white {
border-color: var(--color-accent);
color: var(--color-accent-deep);
}
.cta-section .btn--outline-white:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
}
/* Hero context override — .btn--outline-white inside .hero__actions sits on a
dark photo/gradient; restore white border + white text for maximum contrast
on that specific dark background. Hover fills accent teal. */
.hero__actions .btn--outline-white {
border-color: var(--color-white);
color: var(--color-white);
}
.hero__actions .btn--outline-white:hover {
background-color: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
}
/* ============================================================
8. SITE FOOTER
============================================================ */
.site-footer {
/* White fallback + section-background-3.jpg botanical illustration (near-white,
~1287×894 WebP). The illustration is a single composition (not a tile) so
background-size:cover + no-repeat shows it full-bleed, anchored right where
the artwork is — matching the live site's section treatment.
A left-to-right white veil (2026-06-10) keeps the nav columns legible where
they sit over the busiest part of the artwork, while the right edge stays
full-strength so the botanical still reads. */
background-color: var(--color-white);
background-image: linear-gradient(to right,
rgba(255, 255, 255, 0.96) 0%,
rgba(255, 255, 255, 0.82) 55%,
rgba(255, 255, 255, 0.35) 100%),
url('/assets/images/section-background-3.jpg?v=20260626b');
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
color: var(--color-text);
padding-block: var(--space-16);
}
.site-footer__inner {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: clamp(1rem, var(--page-padding), var(--page-padding-max));
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--space-10);
}
/* Footer brand logo — enlarged via CSS (overrides the 160x40 width/height attrs).
The invert filter was removed (2026-06-02) so the colour logo shows on the white footer. */
.site-footer__brand > a img {
width: 264px; /* +20% (was 220px) 2026-06-02 */
height: auto;
margin-bottom: var(--space-4);
}
.site-footer__brand h2,
.site-footer__brand p {
color: var(--color-dark);
}
.site-footer__brand h2 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-4);
}
/* Call button for the South Granville clinic — moved into the footer from the
old pre-footer brand strip (2026-06-02). Sits below the NAP in the brand col. */
.site-footer__clinic-call {
display: inline-block;
margin-top: var(--space-4);
}
.site-footer__nap {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.7;
}
.site-footer__nap a {
color: var(--color-accent-deep);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.site-footer__nap a:hover,
.site-footer__nap a:focus-visible {
color: var(--color-dark);
text-decoration-color: var(--color-accent-deep);
}
.site-footer__nav h3 {
color: var(--color-dark);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-caps);
margin-bottom: var(--space-4);
}
.site-footer__nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__nav li { margin-bottom: var(--space-2); }
.site-footer__nav a {
color: var(--color-accent-deep);
/* Quiet underline that warms in on hover/focus (pale → deep accent) so footer links
read interactive without shouting. text-underline-offset keeps it elegant. (P0-D) */
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: transparent;
text-underline-offset: 3px;
font-size: var(--font-size-sm);
transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
color: var(--color-dark);
text-decoration-color: var(--color-accent-deep);
}
.site-footer__bottom {
max-width: var(--max-width);
margin-inline: auto;
padding-inline: clamp(1rem, var(--page-padding), var(--page-padding-max));
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
margin-top: var(--space-10);
}
.site-footer__acknowledgement {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: var(--space-4);
}
.site-footer__acknowledgement a {
color: var(--color-accent-deep);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.site-footer__copyright {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
/* ============================================================
9. CARD COMPONENTS
============================================================ */
.card {
background-color: var(--color-white);
/* Border softened to a near-invisible navy hairline + slightly rounder corners; the
soft tinted shadow now carries the card edge so it reads as a gentle lift rather
than a hard double outline. (P0-B, 2026-06-11) */
border: 1px solid rgba(23,41,54,0.06);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-normal);
}
.card:hover {
box-shadow: var(--shadow-rise);
}
.card__image {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}
.card__body {
padding: var(--space-6);
}
.card__body h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-3);
}
/* Therapist card */
.therapist-card {
text-align: center;
}
.therapist-card .card__image {
aspect-ratio: 1 / 1;
border-radius: 50%;
width: 180px;
height: 180px;
margin-inline: auto;
object-fit: cover;
/* Portrait-medallion treatment (P1-D, 2026-06-11): a thin pale-accent ring plus a
second hairline white ring (via box-shadow spread) and the soft tinted elevation,
so the portrait reads as a considered medallion rather than a flat bordered circle. */
border: 3px solid var(--color-white);
box-shadow: 0 0 0 1px var(--color-light-accent),
var(--shadow-md);
}
.therapist-card .card__body {
padding: var(--space-4) 0;
}
.therapist-card h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-1);
}
.therapist-card .credential {
font-size: var(--font-size-sm);
color: var(--color-accent-deep);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-caps);
margin-bottom: var(--space-3);
}
/* Service card */
/* Landscape image card — heading overlaid on the photo (2026-06-02).
Clean, tranquil look matching the live site: no body text, just the H3 over
the image with a soft bottom gradient scrim for legibility. */
.service-card {
position: relative;
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
}
/* Gradient scrim so the white heading stays readable over any photo */
.service-card .card__image {
filter: brightness(0.92);
/* §6: brightness-only transition — NO transform/scale. The photo gently brightens
on hover (a calm "light coming up"), the card lifts in shadow. (P2-G, 2026-06-11) */
transition: filter 0.7s var(--ease-out);
}
.service-card__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: var(--space-5) var(--space-6);
background: linear-gradient(
to top,
rgba(23, 41, 54, 0.62) 0%,
rgba(23, 41, 54, 0.28) 38%,
rgba(23, 41, 54, 0.04) 70%,
rgba(23, 41, 54, 0) 100%
);
/* Scrim eases its opacity on hover (§6 opacity-only) so the label settles calmly */
transition: opacity 0.7s var(--ease-out);
}
.service-card__overlay h3 {
color: var(--color-white);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: 1.25;
margin: 0;
text-shadow: 0 1px 8px rgba(23, 41, 54, 0.45);
}
/* Gentle brighten on hover — feels alive but calm; no zoom/transform (§6). The card
itself lifts in shadow via the shared .card:hover rule (--shadow-rise). (P2-G) */
.service-card:hover .card__image,
.service-card:focus-visible .card__image {
filter: brightness(1.03);
}
/* The scrim eases back very slightly so the photo reads a touch more open on hover,
while the heading stays well above AA contrast. (P2-G) */
.service-card:hover .service-card__overlay,
.service-card:focus-visible .service-card__overlay {
opacity: 0.88;
}
/* ============================================================
10. FEATURE STRIP (3-column)
============================================================ */
.feature-strip {
padding-block: var(--space-12);
background-color: var(--color-bg-alt);
}
.feature-strip__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-8);
max-width: var(--max-width);
margin-inline: auto;
padding-inline: clamp(1rem, var(--page-padding), var(--page-padding-max));
}
.feature-item {
text-align: center;
padding: var(--space-6);
}
.feature-item__icon {
width: 48px;
height: 48px;
margin-inline: auto;
margin-bottom: var(--space-4);
color: var(--color-accent);
}
.feature-item h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-2);
}
.feature-item p {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
/* ============================================================
11. TESTIMONIAL SECTION
============================================================ */
/* WHAT OUR CLIENTS SAY — refined to a calm, clean, light treatment (2026-06-02).
Removed the muddy faded background photo; now sits on the soft near-white
--color-bg-alt with airy spacing and a large pale quotation-mark accent.
Matches the live site's tranquil, uncluttered feel. */
.testimonials {
background-color: var(--color-bg-alt);
padding-block: var(--space-24);
position: relative;
overflow: hidden;
}
/* Background photo removed from the visual — kept in the DOM but hidden so the
section reads clean (no muddy faded image behind the text). */
.testimonials__bg {
display: none;
}
.testimonials__inner {
position: relative;
z-index: 1;
max-width: 760px;
margin-inline: auto;
padding-inline: clamp(1rem, var(--page-padding), var(--page-padding-max));
text-align: center;
}
/* Large decorative opening quote mark — pale accent, sets the tranquil tone */
.testimonials__inner::before {
content: "\201C";
display: block;
font-family: var(--font-family-heading);
font-size: 5rem;
line-height: 0.5;
color: var(--color-light-accent);
margin-bottom: var(--space-6);
}
.testimonials__label {
text-transform: uppercase;
letter-spacing: var(--letter-spacing-caps);
font-size: var(--font-size-sm);
color: var(--color-accent-deep);
font-weight: var(--font-weight-semibold);
text-align: center;
margin-bottom: var(--space-10);
}
/* Testimonial crossfade — items are stacked; the active one fades in over 0.6s to
match the site's fade language (was an instant `hidden` swap). main.js toggles
.is-active instead of the `hidden` attribute. Stacking needs a positioned track. */
.testimonials__track {
position: relative;
}
.testimonial-item {
text-align: center;
padding: var(--space-4) 0;
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s var(--anim-ease), visibility 0s linear 0.6s;
pointer-events: none;
}
.testimonial-item.is-active {
position: relative; /* the visible one drives the track's height */
opacity: 1;
visibility: visible;
transition: opacity 0.6s var(--anim-ease);
pointer-events: auto;
}
.testimonial-item blockquote {
border: none;
padding: 0;
margin: 0 0 var(--space-6) 0;
color: var(--color-dark);
font-style: normal;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-normal);
line-height: 1.7;
}
.testimonial-item cite {
font-style: normal;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-caps);
}
/* Simple carousel controls */
.testimonials__nav {
display: flex;
justify-content: center;
gap: 0; /* the 44px buttons carry their own breathing room */
margin-top: var(--space-6);
}
/* Dots redrawn as a ::after inside a 44px button (2026-06-10): the old 8px
buttons were far below the 44px touch-target minimum and frustrating to tap. */
.testimonials__dot {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: 50%;
cursor: pointer;
padding: 0;
}
.testimonials__dot::after {
content: "";
width: 9px;
height: 9px;
border-radius: 50%;
/* §6: inactive dots are the pale accent at reduced opacity; the active dot is the
full accent at full opacity. Differentiation is opacity/colour only — no scale.
(P2-G, 2026-06-11) */
background-color: var(--color-accent);
opacity: 0.35;
transition: background-color var(--transition-fast), opacity var(--transition-fast);
}
.testimonials__dot:hover::after {
background-color: var(--color-accent-dark);
opacity: 0.7;
}
.testimonials__dot.is-active::after {
background-color: var(--color-accent);
opacity: 1;
}
/* ============================================================
12. FORM ELEMENTS
============================================================ */
.form-group {
margin-bottom: var(--space-5);
}
.form-group label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-meta);
color: var(--color-text);
margin-bottom: var(--space-2);
}
.form-group input,
.form-group textarea,
.form-group select {
display: block;
width: 100%;
/* Roomier, spa-like fields — one step more vertical breathing room. Static padding,
so no CLS at load or on focus. (P0-C, 2026-06-11) */
padding: var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
color: var(--color-text);
background-color: var(--color-light-accent);
border: 1px solid var(--color-border);
border-radius: 0; /* matches Squarespace square form field shape */
outline: none;
/* Brand-warm caret so the insertion point is on-palette. (P2-D detail folded in) */
caret-color: var(--color-accent-deep);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
appearance: none;
-webkit-appearance: none;
}
/* Two-layer focus state: a deep-accent hairline inner ring (clear AA-contrast affordance,
3F6B7D ≈ 5.8:1 on white) + a soft diffuse pale-accent halo around it. Box-shadow only,
so there is no layout shift on focus. (P0-C, 2026-06-11) */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--color-accent-deep);
box-shadow: 0 0 0 1px var(--color-accent-deep),
0 0 0 5px rgba(142, 186, 200, 0.22);
}
.form-group textarea {
min-height: 140px;
resize: vertical;
}
/* Honeypot field — must be invisible to humans, visible to bots */
.field--honeypot {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
tab-index: -1;
}
/* ============================================================
13. SECTION-LEVEL CONTENT BLOCKS
(shared by service pages, location page, and WP blog single)
============================================================ */
/* TL;DR / summary block — AI-extractability per lessons */
/* IN BRIEF — softened to a calm, borderless, centred treatment (2026-06-02).
Removed the pale-blue box + chunky left bar; now a quiet hairline-topped block
with airy spacing to match the live site's tranquil feel. Content unchanged,
so AI-extractability / SEO is preserved. */
.tldr-block {
background-color: transparent;
border: none;
border-top: 1px solid var(--color-border);
padding: var(--space-8) 0 0;
margin-inline: auto;
margin-bottom: var(--space-8);
max-width: 720px;
text-align: center;
}
.tldr-block__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-caps);
color: var(--color-accent-deep);
margin-bottom: var(--space-4);
}
.tldr-block p {
font-size: var(--font-size-lg);
line-height: 1.75;
margin-bottom: 0;
color: var(--color-text);
}
/* FAQ section */
.faq-section {
margin-block: var(--space-10);
}
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: var(--space-5) 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-dark);
}
.faq-item__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform var(--transition-fast);
color: var(--color-accent);
}
.faq-item.is-open .faq-item__icon {
transform: rotate(45deg);
}
/* Smooth accordion open (2026-06-10): was an instant display:none → block snap —
the only hard cut on the site. Grid-rows animation needs no JS measuring and
the inner just needs min-height:0 + overflow:hidden to collapse cleanly. */
.faq-item__answer {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows 0.4s var(--ease-out), opacity 0.35s var(--ease-out),
padding-bottom 0.4s var(--ease-out);
color: var(--color-text);
line-height: var(--line-height-body);
}
.faq-item__answer > * {
min-height: 0;
overflow: hidden;
margin-bottom: 0;
}
.faq-item.is-open .faq-item__answer {
grid-template-rows: 1fr;
opacity: 1;
padding-bottom: var(--space-5);
}
/* Question rows: quiet teal shift on hover so the accordion reads as interactive */
.faq-item__question {
transition: color var(--transition-fast);
}
.faq-item__question:hover {
color: var(--color-accent-deep);
}
/* CTA section — white background; text dark for legibility */
/* Lifted to the --space-24 major-section breath so the closing CTA shares the same
vertical rhythm as the other full-width sections. (P0-E, 2026-06-11) */
.cta-section {
background-color: var(--color-bg-alt);
padding-block: var(--space-24);
text-align: center;
}
.cta-section h2 {
color: var(--color-dark);
margin-bottom: var(--space-4);
}
.cta-section p {
color: var(--color-text-muted);
max-width: 560px;
margin-inline: auto;
margin-bottom: var(--space-8);
}
/* ============================================================
14. SCROLL-REVEAL ANIMATION SYSTEM
============================================================ */
/*
* Fade-in on scroll — faithful reproduction of Squarespace's global
* animations: style=fade, duration=0.9s, delay=0.6s, easing=ease.
* BRAND.md §6: pure opacity fade — NO slide, scale, or parallax.
* IntersectionObserver in main.js adds .is-visible to .animate-on-scroll.
* If JS is absent or blocked, elements display normally (opacity:1 fallback
* is applied via the @media prefers-reduced-motion block below).
*/
.animate-on-scroll {
opacity: 0;
/* No transform — BRAND.md §6 specifies pure opacity fade, no slide/scale */
transition: opacity var(--anim-duration) var(--anim-ease);
transition-delay: var(--anim-delay);
}
/* Safety net (2026-06-10): if JS never runs (blocked, failed fetch, exotic
crawler), nothing would ever add .is-visible and the page would render as
blank sections. Browsers that support the scripting media query show
everything immediately in that case. */
@media (scripting: none) {
.animate-on-scroll {
opacity: 1;
transition: none;
}
}
.animate-on-scroll.is-visible {
opacity: 1;
}
/* ------------------------------------------------------------
P1-A — opacity + gentle brightness "bloom" for images that
live INSIDE an already-animating wrapper. The light comes up
on the photo as the section fades in — "light as material" —
unifying photo + text entrance. Pure opacity/filter (compositor-
only, §6-safe), NO transform/scale.
Scope is deliberately limited to images within .animate-on-scroll
so it requires ZERO new HTML hooks and can NEVER touch the hero
LCP image (.hero__bg carries no animate class) or eager LCP banners
(e.g. the contact .contact-image-banner has no animate wrapper).
The image starts very slightly dimmed and resolves to full; the
wrapper's own opacity carries the fade. No-JS / reduced-motion
users see the finished frame (handled in the blocks below).
Excludes .card__image and .therapist-card__photo — those own a
tuned resting brightness + their own hover behaviour, so the
generic bloom must not clobber them. (P1-A, 2026-06-11)
------------------------------------------------------------ */
.animate-on-scroll img:not(.card__image):not(.therapist-card__photo) {
filter: brightness(0.96);
transition: filter var(--anim-duration) var(--anim-ease);
transition-delay: var(--anim-delay);
}
.animate-on-scroll.is-visible img:not(.card__image):not(.therapist-card__photo) {
filter: brightness(1);
}
/* No-JS: never leave images dimmed/hidden. */
@media (scripting: none) {
.animate-on-scroll img:not(.card__image):not(.therapist-card__photo) {
filter: none;
transition: none;
}
}
/* Staggered delay classes — applied to grid items by main.js.
Base is --anim-delay (0.6s); stagger adds on top for grid children. */
.animate-delay-1 { transition-delay: calc(var(--anim-delay) + 0.05s); }
.animate-delay-2 { transition-delay: calc(var(--anim-delay) + 0.10s); }
.animate-delay-3 { transition-delay: calc(var(--anim-delay) + 0.15s); }
.animate-delay-4 { transition-delay: calc(var(--anim-delay) + 0.20s); }
.animate-delay-5 { transition-delay: calc(var(--anim-delay) + 0.25s); }
.animate-delay-6 { transition-delay: calc(var(--anim-delay) + 0.30s); }
/* Rendering perf on a small box: skip layout/paint for these below-the-fold sections
until they're near the viewport. contain-intrinsic-size reserves space so the
scrollbar + anchor offsets don't jump. Purely a performance hint — zero visual change.
Scoped to known late sections so we never affect above-fold content. */
.testimonials,
.cta-section {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
/* Ken Burns — a very slow, almost-imperceptible scale "breath" on the hero photo.
Adds spa-like life without distracting movement. ~4% scale, ~28s period.
The hero ![]()
shares its `transform` with the JS parallax translate, so CSS can't
own scale independently (inline transform would win). Instead the parallax loop in
main.js composites BOTH: translate3d(parallax) scale(ken-burns). When JS is absent the
image is simply static at scale(1) — graceful. Reduced-motion gated (JS bails + CSS reset). */
/* Respect user's reduced-motion preference — show everything immediately */
@media (prefers-reduced-motion: reduce) {
.animate-on-scroll {
opacity: 1;
transition: none;
}
/* P1-A: images resolve to their finished brightness instantly. */
.animate-on-scroll img:not(.card__image):not(.therapist-card__photo),
.animate-on-scroll.is-visible img:not(.card__image):not(.therapist-card__photo) {
filter: none;
transition: none;
}
/* No parallax drift for users who prefer reduced motion — reset to a static,
frame-filling image (JS also skips the scroll handler under this preference). */
.hero__bg img,
.studio-fullbleed__bg img {
height: 100%;
transform: none !important;
animation: none !important;
will-change: auto;
}
/* Reduced-motion: all hover feedback resolves instantly (no animated transition) and
the shadow/brightness "lift" is suppressed to its resting finished state. (P2-G) */
.btn,
.btn:hover,
.btn:focus-visible,
.btn:active {
transition: background-color var(--transition-fast), color var(--transition-fast),
border-color var(--transition-fast);
box-shadow: none;
}
/* FAQ answers open instantly; card photos stay still; menu appears in place. */
.faq-item__answer,
.service-card .card__image,
.service-card__overlay,
.therapist-card--homepage .therapist-card__photo,
.testimonials__dot::after,
.mobile-nav {
transition: none;
}
/* Card photos keep their resting brightness/scrim; no hover brightness shift. */
.service-card:hover .card__image,
.service-card:focus-visible .card__image {
filter: brightness(0.92);
}
.service-card:hover .service-card__overlay,
.service-card:focus-visible .service-card__overlay {
opacity: 1;
}
.therapist-card--homepage:hover .therapist-card__photo,
.therapist-card--homepage:focus-visible .therapist-card__photo {
filter: none;
box-shadow: var(--shadow-sm);
}
.testimonial-item,
.testimonial-item.is-active {
transition: none;
}
}
/* ============================================================
15. IMAGE HELPERS
============================================================ */
img {
max-width: 100%;
height: auto;
display: block;
}
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Placeholder block shown until client-confirmed images are supplied */
.img-placeholder {
background-color: var(--color-light-accent);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
text-align: center;
padding: var(--space-8);
width: 100%;
aspect-ratio: 16 / 9;
}
.img-placeholder--portrait {
aspect-ratio: 3 / 4;
}
.img-placeholder--square {
aspect-ratio: 1 / 1;
}
/* ============================================================
16. BLOG (WP /blog/ enqueues this file — these styles apply there too)
============================================================ */
.blog-card {
display: grid;
gap: var(--space-4);
}
.blog-card__meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
letter-spacing: var(--letter-spacing-meta);
text-transform: uppercase;
}
.blog-card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
line-height: 1.3;
}
.blog-card__title a {
color: var(--color-dark);
text-decoration: none;
}
.blog-card__title a:hover {
color: var(--color-accent);
}
.blog-card__excerpt {
font-size: var(--font-size-base);
color: var(--color-text-muted);
}
/* Article content — blog single.php */
.entry-content h2 { margin-block: var(--space-8) var(--space-4); }
.entry-content h3 { margin-block: var(--space-6) var(--space-3); }
.entry-content p { margin-bottom: var(--space-4); }
.entry-content ul,
.entry-content ol { margin-bottom: var(--space-4); }
.entry-content img { margin-block: var(--space-6); border-radius: var(--radius-sm); }
/* ============================================================
17. ACCESSIBILITY
============================================================ */
/* Skip-to-main link */
.skip-link {
position: absolute;
top: -100%;
left: var(--space-4);
background: var(--color-dark);
color: var(--color-white);
padding: var(--space-2) var(--space-4);
text-decoration: none;
font-weight: var(--font-weight-semibold);
z-index: 9999;
transition: top 0s;
}
.skip-link:focus {
top: var(--space-4);
}
/* Focus rings — visible for keyboard nav */
*:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 2px;
}
/* ============================================================
18. RESPONSIVE BREAKPOINTS
============================================================ */
@media (max-width: 1024px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.site-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
.grid--2,
.grid--3,
.grid--4 { grid-template-columns: 1fr; }
/* nav + toggle visibility now handled globally (Menu dropdown, 2026-06-01) — no override needed here */
.site-footer__inner { grid-template-columns: 1fr; gap: var(--space-8); }
.feature-strip__grid { grid-template-columns: 1fr; }
.section { padding-block: var(--space-10); }
.section--lg { padding-block: var(--space-16); }
/* Unified-rhythm sections step down on phones so the --space-24 desktop breath
doesn't become dead space on a small screen. (P0-E, 2026-06-11) */
.services-intro,
.testimonials,
.cta-section { padding-block: var(--space-16); }
.hero__content h1 { font-size: var(--font-size-3xl); }
}
@media (max-width: 480px) {
.hero__actions { flex-direction: column; align-items: center; }
.btn { width: 100%; text-align: center; }
}
/* ============================================================
19. SECTION BACKGROUND IMAGES
Applied to sections that use real photography as backgrounds.
Overlay is handled by ::before pseudo-element.
============================================================ */
/* Testimonials section — chuttersnap Unsplash (free commercial) */
.testimonials__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.3; /* dark overlay at ~30% — matches Squarespace imageOverlayOpacity */
}
/* ============================================================
25. STUDIO FULL-BLEED SECTION
Live site: section-60db66cad408e3551c8be375 — clean-rmt-studio-vancouver.jpg
full-bleed background, section-height--large, imageOverlayOpacity: 0.0,
imageEffect: tilt (Squarespace proprietary; we render as static cover).
sectionTheme: white (dark text over photo — photo is a bright studio interior).
============================================================ */
.studio-fullbleed {
position: relative;
min-height: clamp(560px, 70vw, 900px); /* enlarged 2026-06-02 (was 420-700) — bigger image */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.studio-fullbleed__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.studio-fullbleed__bg img {
position: absolute;
top: -10%; /* centre the 120%-tall image so it can drift both ways */
left: 0;
width: 100%;
height: 120%; /* taller than frame so the parallax translate never reveals edges */
object-fit: cover;
object-position: center center;
display: block;
will-change: transform;
transform: translate3d(0, 0, 0); /* JS updates Y on scroll (parallax) */
}
/* Static, paint-once art-direction grade (P1-B, 2026-06-11): a whisper-soft white
scrim concentrated top + bottom so the centred quote floats cleanly while the
middle of the bright studio photo stays essentially clean. NEVER animated, never
scroll-linked — the parallax transform lives on the ![]()
, not this ::after, so
there's no filter/transform conflict. Replaces the heavy double text-shadow that
read as a fix rather than a finish. */
.studio-fullbleed__bg::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.38) 0%,
rgba(255, 255, 255, 0.10) 22%,
rgba(255, 255, 255, 0) 45%,
rgba(255, 255, 255, 0) 58%,
rgba(255, 255, 255, 0.12) 80%,
rgba(255, 255, 255, 0.40) 100%
);
}
.studio-fullbleed__inner {
position: relative;
z-index: 1;
max-width: 800px;
margin-inline: auto;
padding: var(--space-20) clamp(1rem, var(--page-padding), var(--page-padding-max));
text-align: center;
}
/* Text on the studio image — TRANSPARENT backing block (2026-06-02, per request).
The white box is removed; the text sits directly on the photo. A soft text-shadow
keeps it legible over the bright studio image without a visible block. */
.studio-fullbleed__inner p {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-normal);
line-height: 1.5;
color: var(--color-dark);
background-color: transparent;
padding: var(--space-8) var(--space-10);
/* Lighter halo now that the static grade scrim carries most of the legibility (P1-B) */
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.75);
}
@media (max-width: 768px) {
.studio-fullbleed {
min-height: 320px;
}
.studio-fullbleed__inner p {
font-size: var(--font-size-xl);
padding: var(--space-6);
}
}
/* ============================================================
26. BACKGROUND-3 SECTION (white/light pattern)
Live site: section-60a6e978648b4062adebe3b4 — background-3.jpg
full-bleed background, section-height--medium, imageOverlayOpacity: 0.15,
sectionTheme: white. Content: colour logo + credits.
Used in our build as a pre-footer brand strip.
============================================================ */
.brand-strip {
position: relative;
padding-block: var(--space-16);
overflow: hidden;
background-color: var(--color-white); /* fallback */
}
.brand-strip__bg {
position: absolute;
inset: 0;
z-index: 0;
background-image: url('/assets/images/section-background-3.jpg?v=20260626b');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
/* imageOverlayOpacity: 0.15 — very light dark overlay on the white pattern */
.brand-strip__bg::after {
content: '';
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.15);
}
.brand-strip__inner {
position: relative;
z-index: 1;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: clamp(1rem, var(--page-padding), var(--page-padding-max));
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
text-align: center;
}
.brand-strip__logo img {
height: 60px;
width: auto;
}
@media (max-width: 768px) {
.brand-strip__logo img {
height: 44px;
}
}
/* Inner page banners — light botanical background (matches live site's inner page headers).
The botanical illustration is very faint/light — text is dark on a near-white background.
Used on: /approach/, /therapists/, /rates-faq/, /contact/, and all 6 service pages. */
.page-banner {
background-image: url('/assets/images/dark-background-1.jpg');
background-size: cover;
background-position: left center;
background-color: var(--color-white);
position: relative;
padding-top: 9rem;
padding-bottom: 5rem;
text-align: center;
}
.page-banner .container {
position: relative;
z-index: 1;
}
.page-banner h1 {
color: var(--color-dark);
}
.page-banner .page-banner__eyebrow {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-caps);
text-transform: uppercase;
color: var(--color-accent-deep);
margin-bottom: var(--space-4);
}
.page-banner .lead {
color: var(--color-text-muted);
max-width: 600px;
margin-inline: auto;
margin-top: var(--space-4);
}
.page-banner .page-banner__actions {
margin-top: var(--space-8);
}
/* Legacy — kept for any pages not yet migrated; identical to .page-banner above */
.section-hero--dark-bg {
background-image: url('/assets/images/dark-background-1.jpg');
background-size: cover;
background-position: left center;
background-color: var(--color-white);
position: relative;
}
.section-hero--dark-bg > * {
position: relative;
z-index: 1;
}
/* Approach section — studio interior image styling */
.approach-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-sm);
}
/* ============================================================
21. HOMEPAGE SERVICE CARDS — portrait orientation
Live site uses portrait-ratio cards with service photos.
============================================================ */
.service-card .card__image {
aspect-ratio: 3 / 2; /* LANDSCAPE — matches the live site card treatment (2026-06-02) */
width: 100%;
object-fit: cover;
object-position: center 30%; /* favour upper body / face within the wider crop */
}
/* Phones: 6 stacked 3/2 cards made a very long monotonous run — a wider 16/9
crop keeps every card's photo + label while shortening the scroll (2026-06-10). */
@media (max-width: 768px) {
.service-card .card__image {
aspect-ratio: 16 / 9;
}
}
/* Homepage "Find out if an RMT Massage is right for you" section */
/* Unified to the --space-24 major-section breath so the page cadence reads composed
rather than incidental (matches .section--lg + .testimonials). Mobile step-down is
handled by the existing .section @media rules. (P0-E, 2026-06-11) */
.services-intro {
padding-block: var(--space-24);
}
/* Centred intro lead — calm, airy statement above the services heading (2026-06-02),
matching the live site's centred lead line. Larger than body, light weight, muted. */
.services-intro__lead {
max-width: 760px;
margin: 0 auto var(--space-10);
text-align: center;
font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
font-weight: var(--font-weight-normal);
line-height: 1.6;
color: var(--color-text);
}
.services-intro__heading {
/* Brand fidelity (2026-06-10): live headings are Source Sans weight 400 at the
H2 scale — this one was bold + undersized, the only heavy heading on the page. */
font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.57rem);
font-weight: var(--font-weight-normal);
color: var(--color-dark);
margin-bottom: var(--space-12);
text-align: center;
text-wrap: balance;
}
/* Shrink the service cards under this heading by ~30% (2026-06-02).
Constraining the grid to 70% width + centering scales all three cards
(and their images) down proportionally while keeping the 3-up layout.
Only applied on wide screens (3-up); on tablet/mobile the grid collapses
to 2-up / 1-up, so we leave those full-width for legibility. */
@media (min-width: 1025px) {
.services-intro .grid {
max-width: 70%;
margin-inline: auto;
}
}
/* ============================================================
22. HOMEPAGE THERAPIST CARDS — portrait photo + below-text
Live site's homepage therapist section uses portrait
rectangular photos (not circles), with name + short bio below.
============================================================ */
/* Whole card is now a link to the team page (2026-06-02). Reset anchor styling.
§6: hover reads as a soft shadow-lift on the portrait + a gentle brighten — NO
transform/translate. The card warms and lifts in light, never moves. (P2-G) */
.therapist-card--homepage {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.therapist-card--homepage .therapist-card__photo {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
border-radius: var(--radius-md);
display: block;
box-shadow: var(--shadow-sm);
transition: filter var(--transition-normal), box-shadow var(--transition-normal);
}
.therapist-card--homepage:hover .therapist-card__photo,
.therapist-card--homepage:focus-visible .therapist-card__photo {
filter: brightness(1.02);
box-shadow: var(--shadow-rise);
}
/* All three team cards are landscape 1342×894 composites on the grey + anatomy-
engraving backdrop, subject in the LEFT third (Suzanne & Dustin rebuilt 2026-07-03
from the 4Z0A8445/4Z0A8280 webfinal portraits via rembg cutout, matching Bryan's
2026-06-26 treatment). Anchor the 3/4 card crop left so the face fills the card
and the engraving shows on the right. */
.therapist-card__photo--suzanne,
.therapist-card__photo--dustin,
.therapist-card__photo--bryan {
object-position: 22% center !important;
}
.therapist-card--homepage .therapist-card__body {
padding: var(--space-5) 0;
}
.therapist-card--homepage .therapist-card__name {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-dark);
margin-bottom: var(--space-1);
}
.therapist-card--homepage .therapist-card__cred {
font-size: var(--font-size-sm);
color: var(--color-accent-deep);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-caps);
margin-bottom: var(--space-3);
}
.therapist-card--homepage .therapist-card__bio {
font-size: var(--font-size-base);
color: var(--color-text-muted);
line-height: var(--line-height-body);
margin-bottom: 0;
}
/* Away badge */
.badge--away {
display: inline-block;
background: var(--color-light-accent);
color: var(--color-dark);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
padding: 0.2rem 0.6rem;
border-radius: var(--radius-pill);
margin-bottom: var(--space-2);
}
/* ============================================================
24. CONTACT PAGE IMAGE BANNER
Matches live site's full-bleed photo at top of contact page.
Photo is displayed at natural 16:9-ish ratio, ~420px tall.
============================================================ */
.contact-image-banner {
width: 100%;
height: clamp(280px, 35vw, 440px);
object-fit: cover;
object-position: center center;
display: block;
/* Margin-top to clear the fixed header after scroll */
margin-top: var(--header-height-desktop);
}
@media (max-width: 768px) {
.contact-image-banner {
height: clamp(200px, 40vw, 300px);
margin-top: var(--header-height-mobile);
}
}
/* ============================================================
23. HEADER — tighter, more minimal to match live site
Live header is very airy: minimal height, tight padding,
nav items feel lightweight. Small refinements here.
============================================================ */
/* Reduce default header block padding — live site is slimmer */
.site-header {
padding-block: 0.8rem; /* tighter than the original 1.5vw at all sizes */
}
/* Header nav: slightly more spread on desktop */
.site-header__nav {
gap: var(--space-6); /* down from --space-8 */
}
/* Logo height: slightly smaller in header to feel more airy */
.site-header__logo img {
height: 38px; /* tighter than 50px token — matches live airy feel */
}
/* ============================================================
20. MOBILE HEADER OVERFLOW FIX
On 390px viewports the header CTA clips; hide it on mobile
and rely on the mobile-nav overlay booking button instead.
============================================================ */
@media (max-width: 768px) {
.btn--booking { display: none; } /* dropdown carries its own Book CTA */
.nav-toggle { display: inline-flex; flex-shrink: 0; }
/* P0 FIX (2026-06-10): at phone widths the single-line wordmark
("CASCADE MASSAGE THERAPY" at 0.3em tracking) + emblem overflowed the bar
and pushed the Menu toggle outside the overflow:hidden header — mobile
users had NO way to open the menu. Match the live site instead: the
wordmark wraps to two short lines at a smaller size, emblem stays, and
the toggle keeps its space. */
.site-header__logo::after {
white-space: normal;
max-width: 11em; /* forces the two-line wrap */
font-size: 0.72rem;
letter-spacing: 0.22em;
line-height: 1.7;
}
.site-header__logo::before {
width: 2em;
height: 2em;
margin-right: 0.55em;
}
/* Ensure hero text doesn't clip on narrow viewports */
.hero__content {
padding-inline: 1.25rem;
max-width: 100%;
}
.hero__content h1 {
font-size: clamp(1.5rem, 6vw, 2.5rem);
word-break: break-word;
}
/* Site header inner: logo + burger only, no overflow */
.site-header__inner {
flex-wrap: nowrap;
overflow: hidden;
}
/* Logo on mobile: constrain height */
.site-header__logo img {
height: var(--header-logo-height-mobile);
width: auto;
max-width: 160px;
}
}