like the FAQ, so it opens with
JS disabled. The booking button deliberately stays outside the toggle. */
.menu-detail {
flex: 1;
margin-bottom: 32px;
}
.menu-detail summary {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 0;
cursor: pointer;
list-style: none;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-soft);
transition: color 0.3s var(--ease);
}
.menu-detail summary::-webkit-details-marker { display: none; }
.menu-detail summary:hover { color: var(--gold); }
/* Reuses the FAQ's gold plus/minus, one size down to sit on a 12px label. */
.menu-detail .faq-icon { width: 26px; height: 26px; margin-top: 0; }
.menu-detail .faq-icon::before,
.menu-detail .faq-icon::after { width: 11px; }
.menu-detail[open] .faq-icon { background: var(--gold-soft); }
.menu-detail[open] .faq-icon::before,
.menu-detail[open] .faq-icon::after { background: var(--ink); }
.menu-detail[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.menu-detail .menu-includes {
flex: none;
margin: 6px 0 0;
animation: faqReveal 0.45s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.menu-detail .menu-includes { animation: none; }
}
/* ---------- What is a Head Spa? ----------
Dry vs wet, stacked one above the other so the comparison reads
top-to-bottom, each with its own image. */
.spa-types {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
.spa-type {
display: grid;
grid-template-columns: 1fr;
border: 1px solid var(--line);
border-radius: 26px;
background: var(--white);
overflow: hidden; /* lets the image sit flush inside the rounded frame */
}
.spa-type-media {
min-height: 240px;
aspect-ratio: 4 / 3;
border: none;
border-bottom: 1px solid var(--line);
}
.spa-type-body { padding: 40px 34px 44px; }
.spa-type .menu-tag { color: var(--gold); position: static; margin-bottom: 14px; }
.spa-type h3 { font-size: 29px; margin-bottom: 12px; }
.spa-type p { font-size: 16.5px; color: var(--ink-soft); }
.spa-type.is-dreamin {
border-color: var(--gold);
background: var(--ink);
color: var(--cream);
}
.spa-type.is-dreamin h3 { color: var(--white); }
.spa-type.is-dreamin p { color: rgba(244, 240, 233, 0.8); }
.spa-type.is-dreamin .menu-tag { color: var(--gold-soft); }
.spa-type.is-dreamin .spa-type-media { border-bottom-color: rgba(205, 181, 135, 0.3); }
.spa-type-note {
margin-top: 18px;
font-family: var(--serif);
font-style: italic;
font-size: 18px !important;
color: var(--gold-soft) !important;
}
/* ---------- The Dreamin' Method — full-bleed photographic band ----------
The two spa-type cards above are image-beside-text; repeating that here
made the whole section read as one long list. So this one inverts it:
the photo runs edge to edge and the copy sits on top of it. It also
carries the page from the cream section into the dark menu below. */
.method-band {
position: relative;
isolation: isolate;
padding: 100px 0;
color: var(--cream);
background: var(--ink);
overflow: hidden;
}
/* The dark Menu section follows immediately below; without an edge the two
read as one continuous slab. Same gold hairline the sticky CTA uses. */
.method-band::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
z-index: 1;
background: linear-gradient(90deg, transparent 0%, rgba(205, 181, 135, 0.55) 50%, transparent 100%);
}
.method-bg {
position: absolute;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
}
/* Lighter on the left so the salon itself stays visible, heavy on the right
so the panel's copy always has contrast behind it. */
.method-scrim {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(90deg, rgba(43, 38, 34, 0.10) 0%, rgba(43, 38, 34, 0.48) 48%, rgba(43, 38, 34, 0.84) 100%),
linear-gradient(180deg, rgba(43, 38, 34, 0.34) 0%, rgba(43, 38, 34, 0.12) 42%, rgba(43, 38, 34, 0.5) 100%);
}
.method-panel {
background: rgba(33, 29, 26, 0.72);
backdrop-filter: blur(7px);
border: 1px solid rgba(205, 181, 135, 0.26);
border-radius: 26px;
padding: 40px 32px;
}
.method-panel .section-kicker { color: var(--gold-soft); }
.method-panel .section-kicker::before { background: var(--gold-soft); }
.method-panel h2 {
font-size: clamp(27px, 3.2vw, 40px);
color: var(--white);
margin-bottom: 18px;
}
.method-panel h2 em { color: var(--gold-soft); }
.method-panel p {
font-size: 16.5px;
color: rgba(244, 240, 233, 0.84);
margin-bottom: 16px;
}
.method-panel p:last-child { margin-bottom: 0; }
.method-panel p em {
font-family: var(--serif);
font-style: italic;
font-size: 1.08em;
color: var(--gold-soft);
}
/* "Inside the Dreamin' Method" is long; on a phone the leading dash strands
it across three lines. Drop the dash and give the words the full width. */
@media (max-width: 560px) {
.method-panel { padding: 34px 26px; }
.method-panel .section-kicker { font-size: 11px; letter-spacing: 0.24em; gap: 0; }
.method-panel .section-kicker::before { display: none; }
}
/* ---------- Instagram grid ---------- */
.ig-count {
font-family: var(--sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
display: inline-block;
margin-left: 14px;
vertical-align: middle;
}
/* Reels are tall; stacked vertically on a phone the section ran forever.
So they swipe sideways instead — same scroll-snap rail as the reviews.
overflow-y is pinned to hidden: setting only overflow-x makes overflow-y
compute to auto, and the horizontal scrollbar then steals enough height
from the content box to raise a spurious vertical scrollbar. */
.ig-grid {
display: flex;
align-items: flex-start; /* not stretch: the crop boxes size themselves */
gap: 16px;
margin: 48px 0 40px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
padding-bottom: 18px; /* room for the scrollbar to sit in */
-webkit-overflow-scrolling: touch;
scrollbar-color: var(--gold) rgba(43, 38, 34, 0.12);
scrollbar-width: thin;
}
.ig-grid > * {
flex: 0 0 min(78vw, 320px);
scroll-snap-align: start;
}
.ig-tile {
aspect-ratio: 1;
border-radius: 8px;
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.ig-tile:hover { opacity: 0.85; transform: scale(0.985); }
/* Cropping the embed down to just the reel.
embed.js rewrites each blockquote into a cross-origin iframe, so Instagram's
chrome — the profile header on top, and the "View more on Instagram" link,
like/comment/share bar and comment box underneath — cannot be styled away. It
can only be clipped from outside, which is what .ig-embed does.
The frame lays out the same way at any width:
54px profile header
width × 1.25 the media itself (4:5)
154px the like / comment / share chrome
So the wrapper takes the media's 4:5 box and the iframe is pulled up by the
header; overflow hides what falls outside at both ends. The reel still plays —
clicks pass straight through to the iframe.
These are Instagram's current numbers, measured against the live embed. If they
ever restyle it the crop will drift, and re-measuring is the fix. */
.ig-embed {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 5; /* the media box, exactly */
border-radius: 12px;
background: var(--cream-deep); /* shows for the moment before the reel paints */
}
.ig-grid .instagram-media {
position: absolute !important;
top: -54px !important; /* lop off the profile header */
left: 0 !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* ---------- Voice / testimonials (horizontal scroll) ---------- */
.voice-grid {
display: flex;
overflow-x: auto;
overflow-y: hidden; /* stops the sideways rail raising a vertical scrollbar */
scroll-snap-type: x mandatory;
gap: 22px;
margin-top: 26px;
padding-bottom: 18px;
-webkit-overflow-scrolling: touch;
scrollbar-color: var(--gold) rgba(244, 240, 233, 0.12);
scrollbar-width: thin;
}
.voice-card {
flex: 0 0 min(86%, 400px);
scroll-snap-align: start;
border: 1px solid var(--line-light);
border-radius: 26px;
padding: 40px 34px 36px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.voice-card::before {
content: "\201C";
position: absolute;
top: 6px; right: 26px;
font-family: var(--serif);
font-size: 110px;
line-height: 1;
color: rgba(205, 181, 135, 0.22);
pointer-events: none;
}
.stars { color: var(--gold-soft); letter-spacing: 0.2em; font-size: 14px; }
.voice-card blockquote {
font-family: var(--serif);
font-size: 21px;
line-height: 1.55;
color: var(--cream);
flex: 1;
}
.voice-card figcaption {
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(244, 240, 233, 0.55);
}
/* ---------- Contact ---------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 44px;
margin-top: 30px;
}
.contact-info dl { margin-bottom: 38px; }
.contact-info dt {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
}
.contact-info dd { font-size: 17px; margin: 0 0 26px; color: var(--ink-soft); }
.contact-info dd a { color: var(--ink); border-bottom: 1px solid var(--gold-soft); }
.contact-info dd a:hover { color: var(--gold); }
.contact-map { min-height: 340px; border-radius: 26px; }
/* ---------- Enquiry form ----------
Rounded, generously spaced fields: the same silhouette as the buttons, so the
form reads as part of the brand rather than a bolted-on WordPress widget. */
/* The header is fixed, so an #enquiry jump from another page would otherwise
land with the heading tucked underneath it. */
#enquiry { scroll-margin-top: 90px; }
.enquiry-wrap { max-width: 760px; }
.enquiry-title { font-size: clamp(30px, 4.4vw, 44px); color: var(--gold); margin-bottom: 14px; }
.enquiry-lead { color: var(--ink-soft); margin-bottom: 38px; max-width: 62ch; }
.enquiry-form { display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-soft);
}
.field .req { color: var(--gold); }
.field input,
.field textarea {
font-family: var(--sans);
font-size: 16.5px;
font-weight: 300;
color: var(--ink);
background: var(--white);
border: 1px solid var(--line);
border-radius: 26px;
padding: 16px 22px;
width: 100%;
transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { border-radius: 20px; resize: vertical; min-height: 180px; }
.field input:focus,
.field textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(179, 146, 79, 0.14);
}
/* Only after a failed submit — never while the guest is still typing. */
.enquiry-form.is-validated :invalid { border-color: #b4553f; }
.field-error { font-size: 13.5px; color: #b4553f; letter-spacing: 0; text-transform: none; }
.field-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-form .btn { align-self: flex-start; border: none; cursor: pointer; }
.form-note { font-size: 15px; color: var(--ink-soft); margin: 0; }
.form-note:empty { display: none; }
.form-note.is-error { color: #b4553f; }
.form-note.is-success { color: var(--gold); }
@media (min-width: 640px) {
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* Google Maps embed */
.map-embed {
min-height: 400px;
border-radius: 26px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--cream-deep);
}
.map-embed iframe {
display: block;
width: 100%;
height: 100%;
min-height: 400px;
border: 0;
filter: saturate(0.85); /* keeps Google's palette from fighting the brand */
}
/* ---------- About page photography ----------
Arch-topped, echoing the round mirrors in the salon. The images are
portrait; the frame crops them rather than letterboxing. */
.about-photo {
aspect-ratio: 3 / 4; /* the photos' own shape — frames them without cropping */
overflow: hidden;
border-radius: 260px 260px 18px 18px;
border: 1px solid var(--line);
background: var(--cream-deep);
}
.section-dark .about-photo { border-color: rgba(205, 181, 135, 0.28); }
.about-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ---------- Generic content page (privacy etc.) ---------- */
.prose { max-width: 720px; }
.prose h2 { font-size: 26px; margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 16.5px; color: var(--ink-soft); margin-bottom: 14px; }
.prose ul { padding-left: 20px; margin-bottom: 14px; }
.prose .updated { font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; }
/* ---------- CTA band (used on sub-pages before footer) ----------
Photographed backdrop. The shot is bright and the copy on top is white,
so the scrim above it is doing real work — don't lighten it without
re-checking the text and the gold button against it. */
.cta-band {
color: var(--cream);
text-align: center;
padding: 110px 24px;
position: relative;
overflow: hidden;
background: var(--ink);
}
.cta-band::before {
content: "";
position: absolute;
bottom: -180px; left: -120px;
width: 380px; height: 380px;
border: 1px solid rgba(205, 181, 135, 0.2);
border-radius: 50%;
}
.cta-band::after {
content: "";
position: absolute;
top: -160px; right: -100px;
width: 320px; height: 320px;
border: 1px solid rgba(205, 181, 135, 0.14);
border-radius: 50%;
}
/* The photo sits on its own layer so it can be softened. Left sharp, the
business card's own logotype lands right behind the CTA copy and the two
sets of type fight; blurred, it reads as brand atmosphere instead.
The scale hides the blur's feathered edges. */
/* Note the .cta-band prefix: `.cta-band > *` below sets position:relative at
the same specificity, and being later it would otherwise win and collapse
this layer to zero height. */
.cta-band .cta-bg {
position: absolute;
inset: 0;
z-index: 0;
background: url("assets/37c173e23a55244ef5e625ebebb84173-scaled.jpg") center 66% / cover no-repeat;
/* The shot is dominated by a large white card and the copy on top is white,
so this has to come down hard — at anything brighter the headline sits on
a pale slab and the card's own logotype competes with it. */
filter: blur(5px) brightness(0.36) saturate(0.5) sepia(0.42);
transform: scale(1.08);
pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(28px, 4vw, 42px); color: var(--white); margin-bottom: 14px; }
.cta-band p { color: rgba(244, 240, 233, 0.7); max-width: 540px; margin: 0 auto 36px; font-size: 16.5px; }
/* ---------- Footer ----------
Tall, centred column: logo → vertical menu → copyright at the
bottom centre. The sticky CTA hides once the footer is in view. */
.site-footer {
background: #211d1a;
color: var(--cream);
padding: 56px 0 28px;
}
/* Three columns on desktop — logo left, menu centre, actions right — with the
copyright on its own centred row beneath. On a phone it collapses to a
single centred column, kept short: the menu goes two-up and the gift card
shrinks, so the footer doesn't turn into a second page. */
.footer-grid {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-items: start;
gap: 28px;
text-align: center;
}
.site-footer .logo-footer .logo-img { height: 48px; }
.footer-nav {
display: grid;
grid-template-columns: repeat(2, auto); /* two-up on mobile — halves the height */
justify-content: center;
gap: 14px 30px;
}
.footer-nav a {
color: rgba(244, 240, 233, 0.7);
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.footer-nav a:hover { color: var(--gold-soft); }
.footer-nav .nav-insta { color: var(--gold-soft); }
/* On a phone the two buttons sit side by side and the gift card and privacy
link take their own full-width rows — a stacked column here made the footer
almost a screen tall on its own. The desktop rule stacks them again. */
.footer-side {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 12px;
}
.footer-side .btn { text-align: center; padding: 13px 20px; font-size: 12px; }
.footer-gift, .footer-privacy { flex: 1 0 100%; }
.footer-privacy {
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(244, 240, 233, 0.55);
}
.footer-privacy:hover { color: var(--gold-soft); }
/* The gift voucher itself, as the link — the card is the affordance, so it
gets a light plate behind it to lift off the near-black footer. */
.footer-gift {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: rgba(244, 240, 233, 0.7);
}
.footer-gift img {
width: 146px; /* small on a phone; the desktop rule sizes it up */
max-width: 100%;
height: auto;
border-radius: 6px;
background: var(--white);
padding: 7px;
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.footer-gift:hover img {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.footer-gift span {
font-family: var(--serif);
font-style: italic;
font-size: 15px;
}
.footer-gift:hover span { color: var(--gold-soft); }
.copyright {
font-size: 12.5px;
color: rgba(244, 240, 233, 0.4);
margin-top: 44px;
padding: 0 24px;
text-align: center;
}
/* ---------- Floating booking banner (hides over the footer) ---------- */
.sticky-cta {
position: fixed;
inset: auto 0 0 0;
z-index: 90;
padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(33, 29, 26, 0.9) 0%, rgba(33, 29, 26, 0.98) 100%);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(205, 181, 135, 0.3);
transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.sticky-cta::before {
/* soft gold hairline glow along the top edge */
content: "";
position: absolute;
top: -1px; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--gold-soft) 50%, transparent 100%);
opacity: 0.9;
}
.sticky-cta.is-hidden {
transform: translateY(110%);
opacity: 0;
pointer-events: none;
}
.sticky-cta-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
.sticky-cta-brand {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
.sticky-cta-script {
font-family: var(--script);
font-size: 28px;
line-height: 1;
color: var(--gold-soft);
flex: none;
transform: translateY(-2px);
}
.sticky-cta-text {
font-family: var(--serif);
font-style: italic;
font-size: 15.5px;
color: rgba(244, 240, 233, 0.78);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-left: 1px solid rgba(205, 181, 135, 0.35);
padding-left: 16px;
}
.sticky-cta-text .sticky-cta-dot { color: var(--gold); margin: 0 6px; }
.sticky-cta-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.sticky-cta-shop { padding: 11px 22px; font-size: 12px; letter-spacing: 0.1em; }
.sticky-cta .btn-gold { padding: 12px 30px; }
/* Both actions stay on phones — Online Shop is a destination, not a detail,
so the buttons tighten rather than one dropping out. */
@media (max-width: 639px) {
.sticky-cta-text { display: none; } /* keep the script mark only */
.sticky-cta-shop { padding: 11px 15px; font-size: 11px; letter-spacing: 0.06em; }
.sticky-cta .btn-gold { padding: 12px 17px; font-size: 11px; letter-spacing: 0.06em; }
.sticky-cta-inner { gap: 10px; }
.sticky-cta-actions { gap: 8px; }
}
/* ---------- Scroll fade-in (restrained) ---------- */
.fade-in {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.fade-in.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.fade-in { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* Sibling .fade-in elements get an incremental transition-delay from
script.js, so grids and header groups reveal in sequence rather than
as one block. Cards with their own hover transitions have .fade-in
removed once the entrance finishes (also script.js), handing the
transition property back to the hover styles. */
/* ---------- Entrance choreography (above the fold) ----------
The scroll observer can't stagger content that is already in view on
load, so the hero and sub-page heroes run a one-shot rise instead. */
@keyframes riseIn {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: none; }
}
.hero-content > * { animation: riseIn 0.9s var(--ease) both; }
.hero-content > *:nth-child(1) { animation-delay: 0.15s; }
.hero-content > *:nth-child(2) { animation-delay: 0.3s; }
.hero-content > *:nth-child(3) { animation-delay: 0.45s; }
.hero-content > *:nth-child(4) { animation-delay: 0.6s; }
.hero-content > *:nth-child(5) { animation-delay: 0.75s; }
/* .hero-scroll is centred with translateX(-50%). riseIn ends on
`transform: none`, which (with fill-mode both) would wipe that out and
leave the indicator half its width right of centre — so it rises with a
variant that keeps the centring translate. */
@keyframes riseInCentred {
from { opacity: 0; transform: translateX(-50%) translateY(26px); }
to { opacity: 1; transform: translateX(-50%); }
}
.hero-scroll { animation: riseInCentred 0.9s var(--ease) 1.15s both; }
.page-hero > * { animation: riseIn 0.8s var(--ease) both; }
.page-hero > *:nth-child(1) { animation-delay: 0.1s; }
.page-hero > *:nth-child(2) { animation-delay: 0.22s; }
.page-hero > *:nth-child(3) { animation-delay: 0.34s; }
/* The gold rule beside each kicker draws itself in once the kicker
becomes visible — a quiet cue that a new chapter is starting. */
.section-kicker.fade-in::before,
.section-kicker.fade-in.centered::after {
width: 0;
transition: width 0.7s var(--ease) 0.35s;
}
.section-kicker.fade-in.is-visible::before,
.section-kicker.fade-in.is-visible.centered::after { width: 44px; }
/* Decorative circles on dark heroes/bands breathe very slowly. */
@keyframes circleDrift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(-16px, 12px); }
}
.page-hero::before, .cta-band::before { animation: circleDrift 16s ease-in-out infinite; }
.cta-band::after { animation: circleDrift 22s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce) {
.hero-content > *, .hero-scroll, .page-hero > *,
.page-hero::before, .cta-band::before, .cta-band::after { animation: none; }
.section-kicker.fade-in::before,
.section-kicker.fade-in.centered::after { width: 44px; transition: none; }
.btn-gold::before { display: none; }
.sticky-cta { transition: opacity 0.2s linear; }
.logo-img { transition: none; }
}
/* ---------- FAQ accordion ----------
Built on
/ so it still opens with JS disabled and
maps cleanly onto a WordPress accordion block later. */
.faq-list {
max-width: 860px;
border-top: 1px solid var(--line);
}
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-item summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
padding: 26px 0;
cursor: pointer;
list-style: none;
font-family: var(--serif);
font-size: 21px;
font-weight: 500;
line-height: 1.4;
color: var(--ink);
transition: color 0.3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }
/* Gold plus that rotates into a minus when open */
.faq-icon {
flex: none;
position: relative;
width: 34px; height: 34px;
margin-top: 2px;
border: 1px solid var(--gold);
border-radius: 50%;
transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.faq-icon::before, .faq-icon::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 13px; height: 1px;
background: var(--gold);
transform: translate(-50%, -50%);
transition: transform 0.35s var(--ease), background 0.35s var(--ease);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--gold); }
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: var(--white); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-answer {
padding: 0 60px 30px 0;
font-size: 16.5px;
color: var(--ink-soft);
animation: faqReveal 0.45s var(--ease);
}
.faq-answer p + p { margin-top: 12px; }
.faq-answer em { font-family: var(--serif); font-size: 1.06em; color: var(--ink); }
@keyframes faqReveal {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.faq-answer { animation: none; }
}
/* Dark-section variant (Service Menu page) */
.section-dark .faq-list { border-top-color: var(--line-light); }
.section-dark .faq-item { border-bottom-color: var(--line-light); }
.section-dark .faq-item summary { color: var(--cream); }
.section-dark .faq-item summary:hover { color: var(--gold-soft); }
.section-dark .faq-icon { border-color: var(--gold-soft); }
.section-dark .faq-icon::before,
.section-dark .faq-icon::after { background: var(--gold-soft); }
.section-dark .faq-item[open] .faq-icon { background: var(--gold-soft); }
.section-dark .faq-item[open] .faq-icon::before,
.section-dark .faq-item[open] .faq-icon::after { background: var(--ink); }
.section-dark .faq-answer { color: rgba(244, 240, 233, 0.75); }
.section-dark .faq-answer em { color: var(--cream); }
/* Line under the accordion pointing at the remaining question: "still unsure? call us" */
.faq-foot {
max-width: 860px;
margin-top: 40px;
font-size: 16px;
color: var(--ink-soft);
}
.section-dark .faq-foot { color: rgba(244, 240, 233, 0.7); }
.faq-foot a { border-bottom: 1px solid var(--gold-soft); }
/* ---------- Blog / Journal ----------
Category filter + card grid. Filtering is class-based on the cards, so
swapping in WordPress term slugs later needs no CSS change. */
.blog-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 52px;
}
.filter-btn {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 11px 24px;
border: 1px solid var(--line);
border-radius: 999px;
background: transparent;
color: var(--ink-soft);
cursor: pointer;
transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.filter-btn:hover { border-color: var(--gold); color: var(--gold); }
.filter-btn[aria-pressed="true"] {
background: var(--ink);
border-color: var(--ink);
color: var(--gold-soft);
}
.post-grid {
display: grid;
grid-template-columns: 1fr;
gap: 44px 30px;
}
.post-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
border-radius: 16px;
overflow: hidden;
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(43, 38, 34, 0.09); }
.post-card.is-hidden { display: none; }
.post-media {
aspect-ratio: 3 / 2;
border: none;
border-bottom: 1px solid var(--line);
}
.post-body { padding: 30px 28px 32px; display: flex; flex-direction: column; flex: 1; }
.post-cat {
align-self: flex-start;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.post-card h3 {
font-size: 25px;
line-height: 1.3;
margin-bottom: 12px;
}
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--gold); }
.post-excerpt { font-size: 16px; color: var(--ink-soft); flex: 1; }
.post-meta {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(43, 38, 34, 0.5);
}
/* "Read →" is its own link (alongside the title), so pressing it reacts on
Read itself — not on the title. Default black; warms to gold on hover/press
with the arrow sliding forward (on-tone with .inline-link-arrow). No underline. */
.post-more {
color: var(--ink);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s var(--ease);
}
.post-more span { display: inline-block; transition: transform 0.3s var(--ease); }
/* Hover reacts to a real pointer only, so the gold never "sticks" on Read
after a touch tap — it returns to black once you navigate back. */
@media (hover: hover) and (pointer: fine) {
.post-more:hover,
.post-more:focus-visible { color: var(--gold); }
.post-more:hover span,
.post-more:focus-visible span { transform: translateX(5px); }
}
/* Press feedback (touch + keyboard) — momentary gold + arrow nudge, and it
clears the instant you release, so nothing lingers after you come back. */
.post-more:active { color: var(--gold); }
.post-more:active span { transform: translateX(9px); }
@media (prefers-reduced-motion: reduce) {
.post-more span,
.post-more:hover span,
.post-more:focus-visible span,
.post-more:active span { transition: none; transform: none; }
}
/* Empty state when a filter matches nothing (relevant once posts are real) */
.post-empty {
display: none;
padding: 60px 0;
font-family: var(--serif);
font-style: italic;
font-size: 21px;
color: var(--ink-soft);
}
.post-empty.is-shown { display: block; }
/* ---------- Single article ---------- */
.article { max-width: 760px; margin: 0 auto; }
.article .post-cat { display: block; margin-bottom: 18px; }
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-bottom: 42px;
font-size: 12.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(43, 38, 34, 0.5);
}
.article-lead {
font-family: var(--serif);
font-size: 23px;
font-style: italic;
line-height: 1.5;
color: var(--ink);
margin-bottom: 36px;
padding-left: 24px;
border-left: 2px solid var(--gold);
}
.article-media { aspect-ratio: 16 / 9; border-radius: 14px; margin: 40px 0; }
/* In-body photography. Some articles arrive with shots taken during the treatment
they describe (see tools/pages-import/figures.py); the caption carries what a
guest would be told about that image in the chair. A portrait phone photo at the
full 760px column is taller than the viewport, so cap the height and centre it. */
.article-figure { margin: 40px 0; }
.article-figure img {
display: block;
width: auto;
height: auto; /* the width/height attributes are aspect-ratio hints only */
max-width: 100%;
max-height: 620px;
margin: 0 auto;
border-radius: 14px;
}
.article-figure figcaption {
margin-top: 12px;
font-size: 14px;
font-style: italic;
line-height: 1.55;
color: rgba(43, 38, 34, 0.55);
text-align: center;
}
/* Shots that only mean something side by side (the same scalp, four conditions). */
.article-figures {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 20px;
margin: 40px 0;
}
.article-figures .article-figure { margin: 0; }
.article-figures .article-figure img { width: 100%; height: auto; max-height: none; }
.article-figures .article-figure figcaption { margin-top: 10px; font-size: 13.5px; }
@media (max-width: 560px) {
.article-figures { grid-template-columns: 1fr; gap: 30px; }
}
.article h2 { font-size: 30px; margin: 48px 0 16px; }
.article p { font-size: 17px; color: var(--ink-soft); margin-bottom: 18px; }
.article ul { padding-left: 22px; margin-bottom: 18px; }
.article li { font-size: 17px; color: var(--ink-soft); margin-bottom: 8px; }
/* Inline links in the article body (product names etc.). Plain gold on the
light background reads as body copy, so give them the same underlined-amber
affordance as .inline-link — using the deeper --gold for contrast on cream.
Buttons (.btn) and the "Back to Journal" link keep their own styling. */
.article a:not(.btn):not(.article-back) {
color: var(--gold);
font-weight: 600;
border-bottom: 1px solid rgba(179, 146, 79, 0.5);
padding-bottom: 1px;
transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.article a:not(.btn):not(.article-back):hover,
.article a:not(.btn):not(.article-back):focus-visible {
color: var(--ink);
border-bottom-color: var(--ink);
}
.article blockquote {
margin: 36px 0;
padding: 28px 30px;
background: var(--white);
border-left: 2px solid var(--gold);
border-radius: 0 14px 14px 0;
font-family: var(--serif);
font-size: 21px;
line-height: 1.55;
color: var(--ink);
}
.article blockquote cite {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-size: 12px;
font-style: normal;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(43, 38, 34, 0.5);
}
/* Comparison tables (hard vs soft water, treatment vs mask, iron temperatures…).
The wrapper scrolls on its own so a two-column table never widens the page on a
phone; the table itself stays full width inside it. */
.article-table {
overflow-x: auto;
margin: 32px 0;
-webkit-overflow-scrolling: touch;
}
.article table {
width: 100%;
min-width: 420px;
border-collapse: collapse;
background: var(--white);
border-radius: 14px;
overflow: hidden;
font-size: 16px;
}
.article thead th {
font-family: var(--serif);
font-size: 19px;
font-weight: 500;
text-align: left;
color: var(--ink);
background: rgba(176, 141, 79, 0.09);
padding: 16px 20px;
border-bottom: 1px solid var(--gold);
}
.article tbody td {
padding: 14px 20px;
color: var(--ink-soft);
border-bottom: 1px solid rgba(43, 38, 34, 0.08);
vertical-align: top;
}
.article tbody tr:last-child td { border-bottom: 0; }
.article-back {
display: inline-block;
margin-top: 50px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Inline "read more" link that sits at the end of a paragraph. Given a standing
underline + arrow so it reads as an interactive control at rest (not body
text), and a colour lift + arrow slide on hover/focus. */
.inline-link {
display: inline-block;
color: var(--gold-soft);
font-weight: 600;
border-bottom: 1px solid rgba(205, 181, 135, 0.45);
padding-bottom: 1px;
transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.inline-link:hover,
.inline-link:focus-visible {
color: #ecdcb4;
border-bottom-color: #ecdcb4;
}
.inline-link-arrow {
display: inline-block;
transition: transform 0.3s var(--ease);
}
.inline-link:hover .inline-link-arrow,
.inline-link:focus-visible .inline-link-arrow {
transform: translateX(5px);
}
/* ---------- Language scaffold: hide JA-only lines in EN mode etc. ---------- */
/* Elements marked lang="ja" that are supplementary stay visible in both modes.
Full bilingual content swap: add [data-en]/[data-ja] handling in script.js. */
/* ---------- Breakpoints ---------- */
.hide-sm { display: none; }
/* Keep the hero H1's first line unbroken on desktop only; mobile may wrap. */
@media (min-width: 640px) {
.hero-nowrap { white-space: nowrap; }
}
@media (min-width: 640px) {
.hide-sm { display: inline; }
.why-grid { grid-template-columns: repeat(2, 1fr); }
/* Five-card variant (home): flex so the odd row centres itself — 2+2+1 here,
3+2 on desktop — instead of leaving an orphan in the first grid column. */
.why-grid.is-five { display: flex; flex-wrap: wrap; justify-content: center; }
.why-grid.is-five .why-card { flex: 0 0 calc((100% - 32px) / 2); }
.menu-grid { grid-template-columns: repeat(2, 1fr); }
.ig-grid > * { flex-basis: min(46%, 320px); }
/* Image beside copy; the two blocks mirror each other. */
.spa-type { grid-template-columns: 5fr 6fr; align-items: center; }
.spa-type-media { height: 100%; aspect-ratio: auto; min-height: 300px; border-bottom: none; border-right: 1px solid var(--line); }
.spa-type.is-dreamin .spa-type-media { order: 2; border-right: none; border-left: 1px solid rgba(205, 181, 135, 0.3); }
.spa-type-body { padding: 48px 40px; }
/* Copy moves off-centre, sitting to the right over the photograph. */
.method-band { padding: 120px 0; }
.method-panel { max-width: 560px; margin-left: auto; padding: 46px 44px; }
.post-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Footer opens out into its three columns once there is room for them. */
@media (min-width: 900px) {
.site-footer { padding: 96px 0 36px; }
.footer-grid {
grid-template-columns: auto 1fr auto;
justify-items: stretch;
align-items: start;
gap: 48px;
text-align: left;
}
.footer-grid .logo-footer { justify-self: start; }
.footer-nav {
grid-template-columns: auto; /* back to one vertical column */
justify-self: center;
gap: 16px;
text-align: center;
}
.footer-nav .nav-insta { justify-content: center; }
.footer-side {
justify-self: end;
flex-direction: column; /* back to a stack, right-aligned */
align-items: flex-end;
gap: 14px;
}
.footer-side .btn { min-width: 190px; padding: 14px 34px; font-size: 13px; }
.footer-gift, .footer-privacy { flex: 0 0 auto; }
.footer-gift { align-items: flex-end; }
.footer-gift img { width: 210px; }
.site-footer .logo-footer .logo-img { height: 60px; }
}
@media (min-width: 960px) {
.main-nav { display: flex; }
.nav-burger { display: none; }
.header-actions .btn-shop,
.header-actions .btn-gold { display: inline-block; }
.header-ig { display: inline-flex; }
.section { padding: 150px 0; }
.section-tight { padding-top: 0; }
.why-grid { grid-template-columns: repeat(4, 1fr); }
.why-grid.is-five .why-card { flex-basis: calc((100% - 64px) / 3); }
.menu-grid { grid-template-columns: repeat(3, 1fr); }
/* On desktop the four reels fill the rail exactly, so nothing scrolls. */
.ig-grid > * { flex-basis: calc((100% - 48px) / 4); }
.contact-grid { grid-template-columns: 5fr 7fr; align-items: start; }
/* Copy first, photo second — mirrored so the photo still lands in the
narrow column and both About arches come out the same size. */
.contact-grid.is-mirrored { grid-template-columns: 7fr 5fr; }
.post-grid { grid-template-columns: repeat(3, 1fr); }
.faq-item summary { font-size: 23px; }
.method-band { padding: 150px 0; }
.method-panel { max-width: 600px; padding: 52px 48px; }
}
/* Narrow phones: the accordion answer needs its full width back */
@media (max-width: 480px) {
.faq-answer { padding-right: 0; }
.faq-item summary { font-size: 19px; gap: 16px; }
}
/* ==========================================================================
Footer credit bar — copyright left, build credit right
========================================================================== */
.footer-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 44px;
padding: 0 24px;
}
.footer-bar .copyright { margin-top: 0; padding: 0; }
.site-credit {
font-size: 11.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(244, 240, 233, 0.3);
}
.site-credit span { color: rgba(244, 240, 233, 0.55); letter-spacing: 0.14em; }
@media (min-width: 760px) {
/* Copyright dead-centre at the very bottom; the build credit stays right.
The empty first column balances the credit so the copyright is truly
centred on the page, not just between the two items. */
.footer-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: baseline;
gap: 0;
max-width: 1240px;
margin: 44px auto 0;
padding: 0 40px;
}
.footer-bar .copyright { grid-column: 2; text-align: center; }
.footer-bar .site-credit { grid-column: 3; justify-self: end; }
}
/* ---------- Voice: theme cards (not quotes) ----------
The decorative “ glyph and the star row belong to a real, verbatim review.
These cards are recurring themes written in our own voice, so both are
suppressed — styling them as quotations would be claiming something untrue.
Restore by removing .is-theme once the real review text is in. */
.voice-card.is-theme::before { content: none; }
.voice-card.is-theme { gap: 12px; padding-top: 36px; }
.voice-theme {
font-family: var(--serif);
font-size: 25px;
line-height: 1.3;
color: var(--gold-soft);
}
.voice-card.is-theme p:not(.voice-theme) {
font-size: 16px;
line-height: 1.7;
color: rgba(244, 240, 233, 0.78);
}
/* ==========================================================================
Real photography in the media slots
.post-media / .spa-type-media were placeholder