/* ── Variables ──────────────────────────────────────────── */
:root {
--bg: #f1e4d3;
--bg-2: #e9d5c0;
--bg-3: #ddc4aa;
--bg-pink: #f4dccb;
--paper: #ffffff;
--sage: #94a47e;
--sage-rgb: 148,164,126;
--sage-deep: #67734f;
--sage-soft: #d5d5bc;
--sage-mist: #ede6d2;
--blush: #c98873;
--blush-rgb: 201,136,115;
--blush-soft: #eccfc2;
--blush-mist: #f6e6dc;
--lavender: #b8a9c8;
--lavender-soft: #ddd2e6;
--lavender-mist: #ece5f0;
--ink: #2e3a2d;
--ink-2: #4a5a49;
--muted: #857f6c;
--muted-2: #a89e87;
--line: rgba(46,58,45,0.10);
--line-soft: rgba(46,58,45,0.05);
--line-sage: rgba(122,148,120,0.25);
--shadow-sm: 0 2px 14px rgba(80,107,78,0.06);
--shadow-md: 0 10px 36px rgba(80,107,78,0.10);
--shadow-lg: 0 24px 70px rgba(80,107,78,0.16);
--radius: 24px;
--radius-sm: 14px;
--radius-pill: 999px;
}
/* ── Reset & Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
background-color:var(--bg);
background-image:
linear-gradient(180deg, rgba(252, 240, 230, 0.5) 0%, transparent 35%),
linear-gradient(135deg, rgba(212, 195, 232, 0.3) 0%, transparent 45%, rgba(216, 200, 232, 0.2) 75%, transparent 100%),
linear-gradient(45deg, rgba(220, 205, 235, 0.18) 0%, transparent 50%, rgba(208, 190, 228, 0.22) 100%),
linear-gradient(180deg, transparent 50%, rgba(216, 200, 232, 0.15) 100%);
background-attachment:fixed;
background-repeat:no-repeat;
color:var(--ink);
font-family:'Nunito', system-ui, sans-serif;
font-size:16px;
line-height:1.7;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.modal-open { overflow:hidden; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
button { cursor:pointer; font-family:inherit; border:none; background:transparent; color:inherit; }
::selection { background:var(--blush-soft); color:var(--ink); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--bg-2); }
::-webkit-scrollbar-thumb { background:var(--sage-soft); border-radius:6px; border:2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background:var(--sage); }
:focus-visible { outline:2px solid var(--sage); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible) { outline:none; }
.container { max-width:1220px; margin:0 auto; padding:0 56px; }
@media(max-width:768px) { .container { padding:0 22px; } }
/* ── Typographic system ─────────────────────────────────── */
.eyebrow {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:400;
font-size:14px;
letter-spacing:0.02em;
color:var(--blush);
display:inline-flex;
align-items:center;
gap:12px;
}
.eyebrow::before {
content:'';
width:28px; height:1px;
background:var(--blush);
display:inline-block;
}
.section-headline {
font-family:'Fraunces', serif;
font-variation-settings:'opsz' 96, 'SOFT' 80;
font-size:clamp(36px, 5.2vw, 72px);
font-weight:300;
line-height:1.05;
letter-spacing:-0.025em;
color:var(--ink);
}
.section-headline em {
font-style:italic;
font-weight:400;
color:var(--sage-deep);
position:relative;
}
.section-headline em::after {
content:'';
position:absolute;
left:0; right:0; bottom:-2px;
height:12px;
background:url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
pointer-events:none;
}
p { color:var(--ink-2); }
/* ── Paper grain ────────────────────────────────────────── */
.grain {
position:fixed; inset:0;
pointer-events:none; z-index:9000;
mix-blend-mode:multiply; opacity:0.035;
}
/* ── Loader ─────────────────────────────────────────────── */
#loader {
position:fixed; inset:0; z-index:9999;
background:var(--bg);
display:flex; align-items:center; justify-content:center;
transition:opacity 0.6s ease;
}
#loader.fade-out { opacity:0; pointer-events:none; }
#loader svg { color:var(--sage); }
#loader .spin-arc { animation:spin 1.1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
/* ── Opening: Petal Unfurl ──────────────────────────────── */
#page { opacity:0; filter:blur(6px); transform:scale(1.02); transition:opacity 1s ease, filter 1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
#page.visible { opacity:1; filter:blur(0); transform:scale(1); }
.petals { position:fixed; inset:0; pointer-events:none; z-index:9500; overflow:hidden; }
.petal {
position:absolute; top:-40px;
width:14px; height:14px;
background:var(--blush-soft);
border-radius:70% 0 70% 0;
opacity:0;
animation:petal-drift 3.4s ease-out forwards;
}
.petal:nth-child(even) { background:var(--sage-soft); width:10px; height:10px; }
@keyframes petal-drift {
0% { opacity:0; transform:translate(0,-20px) rotate(0); }
15% { opacity:0.85; }
100% { opacity:0; transform:translate(var(--dx,20px), 110vh) rotate(var(--r,360deg)); }
}
/* ── Scroll reveal (animation-driven so transition-delay stays free for hover) ── */
.reveal { opacity:0; transform:translateY(28px); }
.reveal.in {
opacity:1;
transform:none;
animation:reveal-in 0.9s cubic-bezier(.2,.7,.2,1) backwards;
}
.reveal-delay-1.in { animation-delay:0.12s; }
.reveal-delay-2.in { animation-delay:0.22s; }
.reveal-delay-3.in { animation-delay:0.32s; }
.reveal-delay-4.in { animation-delay:0.42s; }
@keyframes reveal-in {
from { opacity:0; transform:translateY(28px); }
to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity:1; transform:none; }
.reveal.in { animation:none; }
.petal { display:none; }
#page { opacity:1; filter:none; transform:none; transition:none; }
* { animation-duration:0.001ms !important; }
}
/* ── Announce bar ───────────────────────────────────────── */
.announce-bar {
background:linear-gradient(90deg, var(--blush-soft), var(--blush-mist), var(--blush-soft));
color:var(--sage-deep);
font-size:12.5px;
letter-spacing:0.04em;
padding:10px 24px;
display:flex; align-items:center; justify-content:center; gap:18px;
flex-wrap:wrap;
font-weight:500;
border-bottom:1px solid rgba(212,147,122,0.25);
}
.announce-bar a { color:var(--sage-deep); border-bottom:1px solid var(--line-sage); padding-bottom:1px; transition:border-color .2s; }
.announce-bar a:hover { border-color:var(--blush); }
.announce-bar .ab-dot { width:4px; height:4px; background:var(--blush); border-radius:50%; display:inline-block; }
/* ── Nav (underline bar style) ──────────────────────────── */
.nav-wrap {
position:sticky; top:0; z-index:200;
background:rgba(250,245,235,0.88);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line-soft);
transition:box-shadow 0.3s, background 0.3s;
}
.nav-wrap.scrolled { box-shadow:0 4px 20px rgba(80,107,78,0.06); background:rgba(250,245,235,0.95); }
.nav-inner {
max-width:1320px; margin:0 auto;
padding:18px 56px;
display:flex; align-items:center; justify-content:space-between;
gap:24px;
}
.nav-logo {
display:flex; align-items:center; gap:12px;
font-family:'Fraunces', serif;
font-weight:500;
font-size:22px;
letter-spacing:-0.01em;
color:var(--ink);
}
.nav-logo-mark {
height:150px;
width:auto;
flex-shrink:0;
display:inline-flex;
align-items:center;
color:var(--sage-deep);
}
.nav-logo-mark img { height:100%; width:auto; display:block; }
.nav-logo-mark svg { width:72px; height:72px; }
.footer-brand .nav-logo-mark { height:110px; }
@media(max-width:980px) {
.nav-logo-mark { height:110px; }
}
/* Hide the wordmark next to the nav logo (keeps it in the footer) */
.nav-wrap .nav-logo > span:not(.nav-logo-mark) { display:none; }
.nav-logo em { font-style:italic; color:var(--sage-deep); font-weight:400; }
.nav-links {
display:flex; align-items:center; gap:30px;
}
@media(max-width:1180px) { .nav-links { gap:22px; } }
.nav-links > a,
.nav-links > .nav-dropdown > a {
font-size:14px;
font-weight:500;
color:var(--ink-2);
position:relative;
padding:6px 2px;
letter-spacing:0.01em;
transition:color .2s;
display:inline-flex;
align-items:center;
gap:5px;
}
.nav-links > a::after,
.nav-links > .nav-dropdown > a::after {
content:'';
position:absolute; left:0; right:0; bottom:-2px;
height:1px;
background:var(--blush);
transform:scaleX(0);
transform-origin:left;
transition:transform 0.3s cubic-bezier(.2,.7,.2,1);
}
.nav-links > a:hover,
.nav-links > .nav-dropdown > a:hover,
.nav-links > .nav-dropdown:hover > a { color:var(--sage-deep); }
.nav-links > a:hover::after,
.nav-links > a.active::after,
.nav-links > .nav-dropdown > a:hover::after,
.nav-links > .nav-dropdown > a.active::after,
.nav-links > .nav-dropdown:hover > a::after { transform:scaleX(1); }
.nav-links > a.active,
.nav-links > .nav-dropdown > a.active { color:var(--sage-deep); }
/* Dropdown */
.nav-dropdown { position:relative; }
.nav-chev {
width:10px; height:7px;
flex-shrink:0;
transition:transform 0.3s cubic-bezier(.2,.7,.2,1);
color:var(--muted);
}
.nav-dropdown:hover .nav-chev { transform:rotate(180deg); color:var(--sage-deep); }
/* Hover bridge so menu doesn't disappear when moving from trigger to menu */
.nav-dropdown::after {
content:'';
position:absolute;
top:100%; left:-20px; right:-20px;
height:14px;
}
.nav-dropdown-menu {
position:absolute;
top:calc(100% + 14px);
left:50%;
transform:translateX(-50%) translateY(-8px);
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius-sm);
box-shadow:var(--shadow-lg);
padding:10px 0;
min-width:280px;
opacity:0;
visibility:hidden;
transition:opacity 0.25s ease-out, transform 0.25s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.25s;
z-index:20;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
transition:opacity 0.25s ease-out, transform 0.25s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.nav-dropdown-menu a {
display:flex;
flex-direction:column;
padding:11px 22px;
font-family:'Nunito', sans-serif;
font-size:14px;
font-weight:600;
color:var(--ink);
transition:background 0.15s ease-out, color 0.15s ease-out, padding-left 0.2s ease-out;
white-space:nowrap;
}
.nav-dropdown-menu a::after { display:none; }
.nav-dropdown-menu a small {
font-family:'Fraunces', serif;
font-style:italic;
font-size:12.5px;
color:var(--muted);
font-weight:400;
margin-top:2px;
letter-spacing:0;
}
.nav-dropdown-menu a:hover {
background:var(--sage-mist);
color:var(--sage-deep);
padding-left:28px;
}
.nav-dropdown-menu a:hover small { color:var(--blush); }
.nav-dropdown-cta {
color:var(--blush) !important;
font-style:italic;
font-family:'Fraunces', serif !important;
font-weight:500 !important;
font-size:13.5px !important;
}
.nav-dropdown-cta:hover { color:var(--sage-deep) !important; }
.nav-dropdown-divider {
height:1px;
background:var(--line-soft);
margin:8px 22px;
}
.nav-cta {
background:var(--blush);
color:#fff;
padding:12px 26px;
border-radius:var(--radius-pill);
font-size:13.5px;
font-weight:600;
letter-spacing:0.02em;
display:inline-flex; align-items:center; gap:10px;
transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s;
box-shadow:0 4px 14px rgba(201,136,115,0.22);
}
.nav-cta:hover { transform:translateY(-2px); background:var(--lavender); box-shadow:0 8px 22px rgba(184,169,200,0.3); }
.nav-cta svg { width:14px; height:14px; }
/* Burger button — hidden on desktop */
.nav-burger {
display:none;
background:transparent;
border:none;
padding:8px;
cursor:pointer;
margin-left:auto;
border-radius:8px;
transition:background-color .2s;
}
.nav-burger:hover { background:rgba(122,148,120,0.08); }
.nav-burger-lines {
display:block;
width:24px;
height:18px;
position:relative;
}
.nav-burger-lines::before,
.nav-burger-lines::after,
.nav-burger-lines > span {
content:'';
display:block;
height:2px;
background:var(--ink);
position:absolute;
left:0; right:0;
border-radius:2px;
transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .25s, top .3s, bottom .3s;
}
.nav-burger-lines::before { top:0; }
.nav-burger-lines > span { top:50%; transform:translateY(-50%); }
.nav-burger-lines::after { bottom:0; }
/* Animate to X when menu open */
body.nav-open .nav-burger-lines::before { top:50%; transform:translateY(-50%) rotate(45deg); }
body.nav-open .nav-burger-lines::after { bottom:50%; transform:translateY(50%) rotate(-45deg); }
body.nav-open .nav-burger-lines > span { opacity:0; }
@media(max-width:980px) {
.nav-inner { padding:16px 24px; }
.nav-burger { display:block; }
/* Turn the nav links into a slide-out panel */
.nav-links {
display:flex !important;
position:fixed;
top:0; right:0;
width:300px; max-width:88vw; height:100vh; height:100dvh;
background:var(--paper);
flex-direction:column;
align-items:flex-start;
gap:6px;
padding:88px 28px 32px;
box-shadow:-12px 0 40px rgba(46,58,45,0.18);
transform:translateX(100%);
transition:transform .35s cubic-bezier(.2,.7,.2,1);
z-index:200;
overflow-y:auto;
overscroll-behavior:contain;
}
body.nav-open .nav-links { transform:translateX(0); }
/* Each link as a big tap target */
.nav-links > a,
.nav-links > .nav-dropdown > a {
font-family:'Fraunces', serif;
font-size:20px;
color:var(--ink);
padding:14px 0;
width:100%;
border-bottom:1px solid var(--line-soft);
}
.nav-links > a::after,
.nav-links > .nav-dropdown > a::after { display:none; }
/* Treatments dropdown — show items in-line on mobile */
.nav-dropdown { width:100%; }
.nav-dropdown-menu {
position:static;
display:flex !important;
flex-direction:column;
box-shadow:none;
background:transparent;
padding:0 0 8px 18px;
opacity:1;
visibility:visible;
transform:none;
pointer-events:auto;
}
.nav-dropdown-menu a {
font-family:'Nunito', sans-serif;
font-size:14.5px;
color:var(--ink-2);
padding:8px 0;
border-bottom:none;
}
.nav-dropdown-menu a small { display:none; }
.nav-dropdown-divider { display:none; }
.nav-dropdown-cta {
color:var(--blush) !important;
font-weight:600 !important;
}
.nav-chev { display:none; }
/* Keep the Book Now CTA visible at the top right next to the burger */
.nav-cta {
padding:10px 16px;
font-size:13px;
margin-left:0;
}
.nav-cta svg { display:none; }
/* Dimming backdrop when menu open */
body.nav-open::after {
content:'';
position:fixed;
inset:0;
background:rgba(46,58,45,0.45);
z-index:150;
animation:nav-backdrop-fade .25s ease both;
}
@keyframes nav-backdrop-fade { from { opacity:0; } to { opacity:1; } }
/* Lock body scroll when menu open */
body.nav-open { overflow:hidden; }
}
/* ── Buttons ────────────────────────────────────────────── */
.btn-primary {
position:relative;
display:inline-flex; align-items:center; gap:10px;
background:var(--blush);
color:#fff;
padding:17px 32px;
border-radius:var(--radius-pill);
font-family:'Nunito', sans-serif;
font-weight:600;
font-size:14.5px;
letter-spacing:0.02em;
box-shadow:0 6px 20px rgba(201,136,115,0.22);
transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s, box-shadow .3s;
overflow:hidden;
isolation:isolate;
}
.btn-primary::before {
content:'';
position:absolute; inset:0;
background:linear-gradient(135deg, var(--lavender), var(--blush));
opacity:0;
transition:opacity .4s;
z-index:-1;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(201,136,115,0.32); }
.btn-primary:hover::before { opacity:1; }
.btn-primary .btn-inner { position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; }
.btn-primary .btn-inner::after {
content:'';
width:14px; height:14px;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
transition:transform .3s;
}
.btn-primary:hover .btn-inner::after { transform:translateX(3px); }
.btn-ghost {
display:inline-flex; align-items:center; gap:10px;
color:var(--ink);
padding:17px 20px;
font-family:'Fraunces', serif;
font-style:italic;
font-weight:400;
font-size:16px;
transition:color .3s, gap .3s;
border-bottom:1px solid var(--line);
}
.btn-ghost:hover { color:var(--blush); gap:14px; border-color:var(--blush); }
.btn-ghost::after {
content:'↓';
font-family:'Nunito', sans-serif; font-style:normal;
transition:transform .3s;
}
.btn-ghost:hover::after { transform:translateY(3px); }
/* ── Home Hero ──────────────────────────────────────────── */
.hero {
position:relative;
padding:90px 0 120px;
overflow:hidden;
}
.hero-bg-wash {
position:absolute; inset:0;
z-index:0;
background:
radial-gradient(ellipse 600px 400px at 85% 20%, var(--blush-mist) 0%, transparent 55%),
radial-gradient(ellipse 700px 500px at 15% 90%, var(--sage-mist) 0%, transparent 55%);
pointer-events:none;
}
.hero-container {
position:relative; z-index:2;
display:grid;
grid-template-columns:1.1fr 1fr;
gap:80px;
align-items:center;
}
.hero-content { position:relative; }
.hero-location {
display:inline-flex; align-items:center; gap:12px;
font-family:'Fraunces', serif; font-style:italic;
font-size:15px; color:var(--sage-deep);
margin-bottom:32px;
opacity:0; transform:translateY(16px);
}
.hero-location svg { width:18px; height:18px; color:var(--blush); }
.hero-headline {
font-family:'Fraunces', serif;
font-variation-settings:'opsz' 144, 'SOFT' 100;
font-size:clamp(48px, 7.6vw, 104px);
font-weight:300;
line-height:0.98;
letter-spacing:-0.035em;
color:var(--ink);
margin-bottom:32px;
opacity:0; transform:translateY(20px);
}
.hero-headline em {
font-style:italic;
font-weight:400;
color:var(--sage-deep);
display:block;
}
.hero-headline .flower-inline {
display:inline-block;
width:46px; height:46px;
vertical-align:middle;
margin:0 6px -6px 2px;
color:var(--blush);
transform:rotate(-8deg);
}
.hero-sub {
font-size:17px;
line-height:1.75;
color:var(--ink-2);
max-width:500px;
margin-bottom:40px;
opacity:0; transform:translateY(20px);
}
.hero-ctas {
display:flex; align-items:center; gap:24px;
flex-wrap:wrap;
opacity:0; transform:translateY(20px);
}
.hero-art {
position:relative;
aspect-ratio:1 / 1.05;
max-width:540px;
justify-self:end;
}
.hero-art-bg {
position:absolute;
top:8%; left:8%;
width:84%; height:84%;
border-radius:50% 40% 52% 48%;
background:
radial-gradient(circle at 40% 40%, var(--sage-soft) 0%, var(--sage-mist) 40%, transparent 75%),
var(--blush-mist);
animation:blob-wobble 18s ease-in-out infinite alternate;
}
@keyframes blob-wobble {
0% { border-radius:50% 40% 52% 48%; transform:rotate(0) scale(1); }
50% { border-radius:44% 56% 40% 60%; transform:rotate(3deg) scale(1.03); }
100% { border-radius:58% 42% 48% 52%; transform:rotate(-2deg) scale(1); }
}
.hero-art-photo {
position:absolute;
top:12%; left:12%;
width:76%; height:76%;
border-radius:50% 42% 52% 48% / 48% 50% 50% 52%;
overflow:hidden;
box-shadow:var(--shadow-lg);
}
.hero-art-photo img {
width:100%; height:100%; object-fit:cover;
filter:saturate(0.92) brightness(1.02);
}
/* Hero-art only holds the blob & photo now — blooms live on the hero itself */
.hero-blooms { position:absolute; inset:0; pointer-events:none; z-index:1; }
.hero-blooms .bloom { position:absolute; pointer-events:none; overflow:visible; }
.hero-blooms .bloom-1 { top:7%; right:3%; width:150px; animation:sway 8s ease-in-out infinite alternate; transform-origin:bottom center; }
.hero-blooms .bloom-4 { top:8%; left:3%; width:130px; animation:sway 9s ease-in-out infinite alternate-reverse; transform-origin:bottom right; }
.hero-blooms .bloom-3 { top:38%; right:2%; width:90px; animation:sway 12s ease-in-out infinite alternate; transform-origin:left center; }
.hero-blooms .bloom-5 { top:54%; left:3%; width:80px; animation:sway 13s ease-in-out infinite alternate; transform-origin:right center; }
.hero-blooms .bloom-2 { bottom:-2%; left:30%; width:180px; animation:sway 10s ease-in-out infinite alternate-reverse; transform-origin:top center; }
.hero-blooms .bloom-6 { bottom:6%; right:28%; width:105px; animation:sway 11s ease-in-out infinite alternate-reverse; transform-origin:top left; }
@media(max-width:980px) {
.hero-blooms .bloom-1 { top:1%; right:-2%; width:110px; }
.hero-blooms .bloom-4 { top:1%; left:-2%; width:100px; }
.hero-blooms .bloom-3 { top:30%; right:-4%; width:70px; }
.hero-blooms .bloom-5 { top:44%; left:-4%; width:60px; }
.hero-blooms .bloom-2 { bottom:-2%; left:6%; width:130px; }
.hero-blooms .bloom-6 { bottom:4%; right:6%; width:80px; }
}
@media(max-width:640px) {
.hero-blooms .bloom-3, .hero-blooms .bloom-5 { display:none; }
}
/* Page-hero (inner pages) blooms — fully inside the hero box, no clipping */
.page-hero .hero-blooms .bloom-1 { top:8%; right:2%; width:90px; }
.page-hero .hero-blooms .bloom-4 { top:8%; left:2%; width:80px; }
.page-hero .hero-blooms .bloom-3 { top:40%; right:0%; width:55px; }
.page-hero .hero-blooms .bloom-5 { top:42%; left:0%; width:48px; }
.page-hero .hero-blooms .bloom-2 { bottom:8%; left:24%; width:95px; }
.page-hero .hero-blooms .bloom-6 { bottom:8%; right:22%; width:70px; }
@media(max-width:880px) {
.page-hero .hero-blooms .bloom-3,
.page-hero .hero-blooms .bloom-5 { display:none; }
.page-hero .hero-blooms .bloom-1 { width:64px; top:6%; right:1%; }
.page-hero .hero-blooms .bloom-4 { width:58px; top:6%; left:1%; }
.page-hero .hero-blooms .bloom-2 { width:70px; bottom:6%; left:12%; }
.page-hero .hero-blooms .bloom-6 { width:54px; bottom:6%; right:10%; }
}
@keyframes sway {
0% { transform:rotate(-4deg); }
100% { transform:rotate(6deg); }
}
.hero-scroll {
position:absolute;
bottom:28px; left:50%;
transform:translateX(-50%);
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--muted);
display:flex; flex-direction:column; align-items:center; gap:10px;
z-index:3;
}
.hero-scroll span:last-child {
width:1px; height:40px;
background:linear-gradient(to bottom, var(--sage-deep), transparent);
animation:trickle 2.4s ease-in-out infinite;
}
@keyframes trickle {
0% { transform:scaleY(0); transform-origin:top; opacity:0; }
40% { transform:scaleY(1); opacity:1; }
100% { transform:scaleY(1); transform-origin:bottom; transform:scaleY(0); opacity:0; }
}
@media(max-width:980px) {
.hero { padding:50px 0 70px; }
.hero-container { grid-template-columns:1fr; gap:50px; }
.hero-art { max-width:400px; justify-self:center; }
.hero-scroll { display:none; }
}
/* ── Inner Page Hero (smaller, centred) ─────────────────── */
.page-hero {
position:relative;
padding:80px 0 90px;
overflow:hidden;
text-align:center;
background:transparent;
}
.page-hero .eyebrow {
margin:0 auto 22px;
justify-content:center;
}
.page-hero-title {
font-family:'Fraunces', serif;
font-variation-settings:'opsz' 144, 'SOFT' 100;
font-size:clamp(44px, 6vw, 76px);
font-weight:300;
line-height:1;
letter-spacing:-0.035em;
color:var(--ink);
max-width:760px;
margin:0 auto 26px;
}
.page-hero-title em {
font-style:italic;
font-weight:400;
color:var(--sage-deep);
}
.page-hero-sub {
font-size:17px;
line-height:1.75;
color:var(--ink-2);
max-width:600px;
margin:0 auto;
}
.page-hero-flower-l, .page-hero-flower-r {
position:absolute;
pointer-events:none;
opacity:0.45;
}
.page-hero-flower-l { left:4%; top:40px; width:110px; color:var(--sage-deep); animation:sway 12s ease-in-out infinite alternate; }
.page-hero-flower-r { right:4%; bottom:40px; width:130px; color:var(--blush); animation:sway 14s ease-in-out infinite alternate-reverse; }
@media(max-width:880px) {
.page-hero { padding:56px 0 70px; }
.page-hero-flower-l, .page-hero-flower-r { display:none; }
}
/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb {
max-width:1320px; margin:0 auto;
padding:18px 56px 0;
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--muted);
display:flex; align-items:center; justify-content:center; gap:10px;
}
.breadcrumb a { color:var(--muted); transition:color .2s; }
.breadcrumb a:hover { color:var(--sage-deep); }
.breadcrumb .sep { color:var(--muted-2); }
.breadcrumb .current { color:var(--ink); }
@media(max-width:880px) { .breadcrumb { padding:14px 22px 0; } }
/* ── Trust strip ────────────────────────────────────────── */
.trust-strip {
background:var(--paper);
border-top:1px solid var(--line-soft);
border-bottom:1px solid var(--line-soft);
padding:26px 24px;
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap;
gap:14px 36px;
position:relative;
}
.trust-item {
display:inline-flex; align-items:center; gap:10px;
font-size:13px;
font-weight:500;
color:var(--ink-2);
letter-spacing:0.01em;
}
.trust-item svg { color:var(--sage-deep); width:16px; height:16px; flex-shrink:0; }
.trust-dot {
width:4px; height:4px; border-radius:50%;
background:var(--blush-soft);
}
@media(max-width:768px) {
.trust-strip { gap:10px 22px; padding:22px 20px; }
.trust-item { font-size:12px; }
}
/* ── Ticker ─────────────────────────────────────────────── */
.ticker-wrap {
background:rgba(237, 230, 210, 0.85);
padding:20px 0;
overflow:hidden;
border-bottom:1px solid var(--line-soft);
position:relative;
}
.ticker-wrap::before, .ticker-wrap::after {
content:''; position:absolute; top:0; bottom:0; width:100px;
z-index:2; pointer-events:none;
}
.ticker-wrap::before { left:0; background:linear-gradient(to right, rgba(237, 230, 210, 0.92), transparent); }
.ticker-wrap::after { right:0; background:linear-gradient(to left, rgba(237, 230, 210, 0.92), transparent); }
.ticker-track {
display:flex; gap:56px;
width:max-content;
animation:ticker 58s linear infinite;
}
.ticker-item {
display:inline-flex; align-items:center; gap:14px;
font-family:'Fraunces', serif;
font-style:italic;
font-weight:400;
font-size:22px;
color:var(--sage-deep);
white-space:nowrap;
}
.ticker-item svg { width:18px; height:18px; color:var(--blush); flex-shrink:0; }
@keyframes ticker { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
/* ── Services (numbered editorial list) ─────────────────── */
#services, .services-section { padding:140px 0 120px; position:relative; overflow:hidden; }
#services::before, .services-section::before {
content:'';
position:absolute; top:60px; right:-100px;
width:280px; height:280px;
background:var(--blush-mist);
border-radius:60% 40% 50% 50%;
opacity:0.6;
z-index:0;
}
.services-header {
display:grid; grid-template-columns:1.1fr 1fr;
gap:60px; align-items:end;
margin-bottom:80px;
position:relative; z-index:2;
}
.services-sub {
font-size:16px;
line-height:1.8;
color:var(--ink-2);
max-width:440px;
justify-self:end;
}
@media(max-width:900px) {
.services-header { grid-template-columns:1fr; gap:24px; margin-bottom:48px; }
.services-sub { justify-self:start; }
#services, .services-section { padding:90px 0 80px; }
}
.service-list { position:relative; z-index:2; }
.service-row {
display:grid;
grid-template-columns:80px 1fr auto;
gap:40px;
align-items:start;
padding:36px 0;
border-top:1px solid var(--line);
position:relative;
transition:background .4s, padding-left .4s;
}
.service-row:last-child { border-bottom:1px solid var(--line); }
.service-row:hover { padding-left:18px; }
.service-row:hover .service-name { color:var(--sage-deep); }
.service-row:hover .service-sprig { opacity:1; transform:translateX(0) rotate(12deg); }
.service-num {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:300;
font-size:44px;
color:var(--blush);
line-height:1;
padding-top:4px;
}
.service-info { max-width:580px; }
.service-name {
font-family:'Fraunces', serif;
font-weight:400;
font-size:clamp(24px, 2.6vw, 32px);
letter-spacing:-0.015em;
color:var(--ink);
margin-bottom:10px;
transition:color .3s;
display:flex; align-items:center; gap:14px;
}
.service-sprig {
width:26px; height:26px;
color:var(--sage);
opacity:0; transform:translateX(-8px) rotate(0);
transition:opacity .4s, transform .4s cubic-bezier(.2,.7,.2,1);
flex-shrink:0;
}
.service-desc {
font-size:15px;
line-height:1.75;
color:var(--ink-2);
}
.service-tag {
align-self:start;
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--sage-deep);
background:var(--sage-mist);
padding:6px 16px;
border-radius:var(--radius-pill);
border:1px solid var(--line-sage);
white-space:nowrap;
margin-top:8px;
}
@media(max-width:768px) {
.service-row { grid-template-columns:60px 1fr; gap:16px; padding:28px 0; }
.service-tag { grid-column:1 / -1; grid-row:2; margin-top:4px; }
.service-info { grid-column:2; }
.service-name { font-size:22px; }
.service-num { font-size:36px; }
}
/* ── Service row price indicator ────────────────────────── */
.service-price {
margin-top:12px;
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--sage-deep);
display:inline-flex;
align-items:center;
gap:10px;
padding:6px 14px;
background:var(--sage-mist);
border-radius:var(--radius-pill);
border:1px solid var(--line-sage);
}
.service-price strong {
font-style:normal;
font-weight:600;
color:var(--ink);
letter-spacing:-0.01em;
}
.service-price-sep {
width:3px; height:3px; border-radius:50%;
background:var(--blush);
display:inline-block;
}
/* ── Pricing list (full menu, by practitioner) ──────────── */
.pricing-section {
padding:140px 0 120px;
position:relative;
overflow:hidden;
background:rgba(233, 213, 192, 0.9);
}
.pricing-section::before {
content:'';
position:absolute; top:-100px; right:-80px;
width:320px; height:320px;
background:var(--blush-mist);
border-radius:50% 40% 52% 48%;
opacity:0.6;
z-index:0;
}
.pricing-section::after {
content:'';
position:absolute; bottom:-120px; left:-100px;
width:340px; height:340px;
background:var(--sage-mist);
border-radius:40% 60% 48% 52%;
opacity:0.55;
z-index:0;
}
.pricing-section .services-header {
margin-bottom:64px;
position:relative; z-index:2;
}
.pricing-grid {
display:grid;
grid-template-columns:1fr;
max-width:960px;
margin:0 auto;
gap:32px;
position:relative; z-index:2;
}
.pricing-card {
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius);
padding:44px 48px;
box-shadow:var(--shadow-sm);
position:relative;
}
.pricing-card::before {
content:'';
position:absolute; top:24px; right:24px;
width:20px; height:20px;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity:0.6;
}
.pricing-card-header {
display:flex;
align-items:baseline;
justify-content:space-between;
padding-bottom:24px;
margin-bottom:28px;
border-bottom:1px solid var(--line);
gap:20px;
flex-wrap:wrap;
}
.pricing-practitioner {
font-family:'Fraunces', serif;
font-weight:400;
font-size:30px;
color:var(--ink);
letter-spacing:-0.015em;
line-height:1;
}
.pricing-practitioner em { font-style:italic; color:var(--sage-deep); }
.pricing-role {
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--blush);
}
.pricing-group { margin-bottom:28px; }
.pricing-group:last-child { margin-bottom:0; }
.pricing-group-title {
font-family:'Fraunces', serif;
font-style:italic;
font-size:12px;
color:var(--sage-deep);
text-transform:uppercase;
letter-spacing:0.16em;
font-weight:500;
margin-bottom:14px;
}
.pricing-list {
list-style:none;
display:grid;
gap:4px;
}
.pricing-item {
display:grid;
grid-template-columns:1fr auto auto;
gap:20px;
align-items:baseline;
padding:12px 0;
border-bottom:1px dashed var(--line-soft);
}
.pricing-item:last-child { border-bottom:none; }
.pricing-name {
font-size:15px;
color:var(--ink);
font-weight:500;
line-height:1.4;
}
.pricing-name small {
display:block;
font-weight:400;
font-size:12px;
color:var(--muted);
font-style:italic;
margin-top:2px;
}
.pricing-duration {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13.5px;
color:var(--muted);
white-space:nowrap;
}
.pricing-price {
font-family:'Fraunces', serif;
font-weight:500;
font-size:17px;
color:var(--sage-deep);
letter-spacing:-0.01em;
white-space:nowrap;
text-align:right;
min-width:70px;
}
.pricing-note {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13.5px;
color:var(--muted);
margin-top:18px;
padding-top:18px;
border-top:1px solid var(--line-soft);
line-height:1.6;
}
.pricing-footer-note {
text-align:center;
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--muted);
margin-top:48px;
max-width:560px;
margin-left:auto;
margin-right:auto;
line-height:1.7;
position:relative; z-index:2;
}
/* ── Pricing — simplified tier cards ─────────────────────── */
.pricing-tier-grid {
display:grid;
grid-template-columns:repeat(2, 1fr);
max-width:1080px;
margin:0 auto;
gap:28px;
position:relative; z-index:2;
}
.pricing-tier-card {
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius);
padding:40px 36px 36px;
box-shadow:var(--shadow-sm);
position:relative;
display:flex;
flex-direction:column;
transition:transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}
.pricing-tier-card:hover {
transform:translateY(-5px);
box-shadow:var(--shadow-md);
border-color:var(--line-sage);
}
.pricing-tier-card.featured {
background:
radial-gradient(ellipse at top right, var(--blush-mist) 0%, transparent 60%),
linear-gradient(135deg, var(--paper), var(--sage-mist));
border-color:var(--line-sage);
}
.pricing-tier-badge {
position:absolute;
top:-14px; left:50%;
transform:translateX(-50%);
background:var(--blush);
color:var(--paper);
padding:7px 18px;
border-radius:var(--radius-pill);
font-family:'Fraunces', serif;
font-style:italic;
font-size:12.5px;
font-weight:500;
letter-spacing:0.06em;
text-transform:uppercase;
box-shadow:0 4px 14px rgba(212,147,122,0.35);
white-space:nowrap;
}
.pricing-tier-eyebrow {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--blush);
letter-spacing:0.04em;
margin-bottom:8px;
}
.pricing-tier-name {
font-family:'Fraunces', serif;
font-weight:400;
font-size:28px;
line-height:1.1;
color:var(--ink);
margin-bottom:14px;
letter-spacing:-0.015em;
}
.pricing-tier-name em { font-style:italic; color:var(--sage-deep); }
.pricing-tier-price {
font-family:'Fraunces', serif;
font-style:italic;
font-size:16px;
color:var(--sage-deep);
margin-bottom:24px;
padding-bottom:24px;
border-bottom:1px solid var(--line);
display:flex;
align-items:baseline;
gap:10px;
flex-wrap:wrap;
}
.pricing-tier-price strong {
font-style:normal;
font-weight:500;
color:var(--ink);
font-size:36px;
letter-spacing:-0.02em;
line-height:1;
}
.pricing-tier-price .pricing-tier-price-meta {
font-size:13.5px;
color:var(--muted);
font-style:italic;
}
.pricing-tier-list {
list-style:none;
display:grid;
gap:11px;
margin-bottom:28px;
flex:1;
}
.pricing-tier-list li {
font-size:14.5px;
color:var(--ink-2);
display:flex;
align-items:flex-start;
gap:11px;
line-height:1.55;
}
.pricing-tier-list li::before {
content:'';
width:6px; height:6px;
background:var(--blush);
border-radius:50%;
margin-top:8px;
flex-shrink:0;
}
.pricing-tier-list small {
font-family:'Fraunces', serif;
font-style:italic;
color:var(--muted);
font-size:12.5px;
display:block;
margin-top:1px;
}
.pricing-tier-card .btn-primary {
width:100%;
justify-content:center;
}
/* Free consultation CTA card (full width, sits below grid) */
.pricing-consult-card {
margin:48px auto 0;
max-width:1080px;
background:linear-gradient(135deg, var(--sage-deep), var(--ink));
color:var(--bg);
border-radius:var(--radius);
padding:46px 50px;
display:grid;
grid-template-columns:1.4fr auto;
gap:30px;
align-items:center;
position:relative;
overflow:hidden;
box-shadow:var(--shadow-lg);
z-index:2;
}
.pricing-consult-card::before {
content:'';
position:absolute;
top:-60px; right:-60px;
width:240px; height:240px;
background:radial-gradient(circle, rgba(236,207,194,0.25), transparent 70%);
border-radius:50%;
pointer-events:none;
}
.pricing-consult-card::after {
content:'';
position:absolute;
bottom:-80px; left:-40px;
width:200px; height:200px;
background:radial-gradient(circle, rgba(207,219,200,0.18), transparent 70%);
border-radius:50%;
pointer-events:none;
}
.pricing-consult-text { position:relative; z-index:2; }
.pricing-consult-eyebrow {
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--blush-soft);
margin-bottom:10px;
letter-spacing:0.04em;
}
.pricing-consult-title {
font-family:'Fraunces', serif;
font-weight:300;
font-size:clamp(28px, 3.4vw, 40px);
line-height:1.1;
margin-bottom:10px;
letter-spacing:-0.02em;
}
.pricing-consult-title em { font-style:italic; color:var(--blush-soft); }
.pricing-consult-sub {
font-size:15px;
line-height:1.65;
color:rgba(250,245,235,0.85);
max-width:520px;
}
.pricing-consult-card .btn-primary {
position:relative;
z-index:2;
background:var(--blush);
white-space:nowrap;
flex-shrink:0;
}
.pricing-consult-card .btn-primary::before {
background:linear-gradient(135deg, var(--bg), var(--blush-soft));
}
.pricing-consult-card .btn-primary:hover { background:var(--blush-soft); color:var(--ink); }
@media(max-width:880px) {
.pricing-tier-grid { grid-template-columns:1fr; }
.pricing-consult-card { grid-template-columns:1fr; padding:36px 28px; text-align:left; }
}
@media(max-width:720px) {
.pricing-section { padding:90px 0 80px; }
.pricing-card { padding:32px 26px; }
.pricing-item { grid-template-columns:1fr auto; gap:8px 14px; }
.pricing-duration { grid-column:1; font-size:12.5px; margin-top:-2px; }
.pricing-price { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:16px; }
}
/* ── Home: three big category cards (Massage / Reiki / Meditation) ── */
.categories-section {
padding:140px 0 120px;
position:relative;
overflow:hidden;
}
.categories-section::before {
content:'';
position:absolute; top:80px; left:-100px;
width:280px; height:280px;
background:var(--sage-mist);
border-radius:60% 40% 50% 50%;
opacity:0.55;
z-index:0;
}
.categories-section::after {
content:'';
position:absolute; bottom:60px; right:-80px;
width:240px; height:240px;
background:var(--blush-mist);
border-radius:40% 60% 52% 48%;
opacity:0.55;
z-index:0;
}
.categories-section .container { position:relative; z-index:2; }
.categories-header {
text-align:center;
max-width:680px;
margin:0 auto 64px;
}
.categories-header .eyebrow { justify-content:center; margin-bottom:22px; }
.categories-header p {
font-size:16px; line-height:1.8; color:var(--ink-2);
max-width:540px; margin:24px auto 0;
}
.categories-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:30px;
max-width:1140px;
margin:0 auto;
}
.category-card {
position:relative;
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius);
padding:46px 38px 40px;
box-shadow:var(--shadow-sm);
transition:transform 0.22s ease-out, box-shadow 0.22s ease-out, border-color 0.22s ease-out;
display:flex;
flex-direction:column;
overflow:hidden;
text-decoration:none;
color:inherit;
}
.category-card:hover {
transform:translateY(-8px);
box-shadow:var(--shadow-lg);
border-color:var(--line-sage);
}
.category-card::before {
content:'';
position:absolute;
top:-50px; right:-50px;
width:180px; height:180px;
border-radius:50%;
background:radial-gradient(circle, var(--blush-mist) 0%, transparent 70%);
opacity:0.7;
pointer-events:none;
transition:transform 0.5s ease-out;
}
.category-card:hover::before { transform:scale(1.15); }
.category-card.cat-reiki::before { background:radial-gradient(circle, var(--sage-mist) 0%, transparent 70%); }
.category-card.cat-meditation::before { background:radial-gradient(circle, rgba(236,207,194,0.5) 0%, transparent 70%); }
/* Optional photo header on category cards — replaces the SVG icon when present */
.category-card-image {
margin:-46px -38px 28px;
aspect-ratio:16/10;
overflow:hidden;
border-radius:var(--radius) var(--radius) 0 0;
position:relative;
z-index:1;
}
.category-card-image img {
width:100%; height:100%; object-fit:cover;
filter:saturate(0.92) brightness(1.02);
transition:transform 0.5s ease-out;
}
.category-card:hover .category-card-image img { transform:scale(1.04); }
/* Mini detail image used on Contact page, About second shot, Events header etc. */
.detail-image {
border-radius:54% 46% 50% 50% / 48% 52% 48% 52%;
overflow:hidden;
box-shadow:var(--shadow-md);
aspect-ratio:4/5;
animation:blob-wobble 24s ease-in-out infinite alternate;
position:relative;
}
.detail-image img { width:100%; height:100%; object-fit:cover; filter:saturate(0.92) brightness(1.02); }
.events-hero-image {
max-width:520px;
margin:0 auto 56px;
aspect-ratio:16/9;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow-md);
}
.events-hero-image img { width:100%; height:100%; object-fit:cover; filter:saturate(0.92) brightness(1.02); }
.category-card-icon {
width:80px; height:80px;
margin-bottom:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50% 42% 52% 48% / 48% 50% 50% 52%;
background:linear-gradient(135deg, var(--sage-soft), var(--blush-soft));
color:var(--sage-deep);
flex-shrink:0;
position:relative;
z-index:1;
}
.category-card-icon svg { width:42px; height:42px; }
.category-card-name {
font-family:'Fraunces', serif;
font-weight:400;
font-size:34px;
letter-spacing:-0.02em;
color:var(--ink);
margin-bottom:14px;
line-height:1.05;
position:relative; z-index:1;
}
.category-card-name em { font-style:italic; color:var(--sage-deep); }
.category-card-desc {
font-size:14.5px;
line-height:1.7;
color:var(--ink-2);
margin-bottom:24px;
flex:1;
position:relative; z-index:1;
}
.category-card-price {
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--blush);
margin-bottom:24px;
padding-bottom:18px;
border-bottom:1px solid var(--line);
position:relative; z-index:1;
}
.category-card-price strong {
font-style:normal;
font-weight:500;
color:var(--ink);
font-size:17px;
letter-spacing:-0.01em;
margin-right:6px;
}
.category-card-link {
font-family:'Fraunces', serif;
font-style:italic;
font-size:16px;
color:var(--sage-deep);
display:inline-flex;
align-items:center;
gap:10px;
transition:gap 0.22s ease-out, color 0.22s ease-out;
position:relative; z-index:1;
}
.category-card-link::after {
content:'→';
font-style:normal;
transition:transform 0.22s ease-out;
}
.category-card:hover .category-card-link { color:var(--blush); gap:14px; }
.category-card:hover .category-card-link::after { transform:translateX(4px); }
.categories-footer {
text-align:center;
margin-top:56px;
}
.categories-footer a {
font-family:'Fraunces', serif;
font-style:italic;
font-size:16px;
color:var(--ink-2);
border-bottom:1px solid var(--line);
padding-bottom:2px;
transition:color 0.2s, border-color 0.2s;
}
.categories-footer a:hover { color:var(--sage-deep); border-color:var(--blush); }
@media(max-width:980px) {
.categories-grid { grid-template-columns:1fr; max-width:460px; }
.categories-section { padding:90px 0 80px; }
.categories-header { margin-bottom:48px; }
}
/* ── Home: compact "Also at The Elbow Room" mini grid ───── */
.also-section {
padding:90px 0 100px;
background:rgba(233, 213, 192, 0.88);
position:relative;
overflow:hidden;
}
.also-section::before {
content:'';
position:absolute; top:-60px; right:-60px;
width:240px; height:240px;
background:radial-gradient(circle, var(--blush-mist), transparent 70%);
border-radius:50%;
opacity:0.7;
}
.also-header {
text-align:center;
max-width:680px;
margin:0 auto 56px;
position:relative; z-index:2;
}
.also-header .eyebrow { justify-content:center; margin-bottom:22px; }
.also-header p {
font-size:15.5px; line-height:1.75; color:var(--ink-2);
max-width:520px; margin:22px auto 0;
}
.also-grid {
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:22px;
max-width:1080px;
margin:0 auto;
position:relative; z-index:2;
}
.also-card {
text-align:center;
padding:28px 18px 26px;
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius-sm);
transition:transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
text-decoration:none;
color:inherit;
display:block;
}
.also-card:hover {
transform:translateY(-5px);
box-shadow:var(--shadow-md);
border-color:var(--line-sage);
}
.also-avatar {
width:72px; height:72px;
margin:0 auto 16px;
border-radius:50% 42% 52% 48% / 48% 50% 50% 52%;
background:linear-gradient(135deg, var(--sage-soft), var(--blush-soft));
display:flex;
align-items:center;
justify-content:center;
font-family:'Fraunces', serif;
font-weight:500;
font-size:22px;
color:var(--sage-deep);
letter-spacing:0.05em;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6);
}
.also-name {
font-family:'Fraunces', serif;
font-weight:500;
font-size:17px;
color:var(--ink);
margin-bottom:4px;
letter-spacing:-0.01em;
}
.also-therapy {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13.5px;
color:var(--blush);
}
@media(max-width:880px) {
.also-grid { grid-template-columns:repeat(2, 1fr); gap:14px; }
.also-section { padding:70px 0 80px; }
}
/* ── 48hr cancellation note (used on contact form) ──────── */
.cancellation-policy {
margin-top:18px;
padding:18px 22px;
background:var(--bg);
border:1px solid var(--line-sage);
border-radius:var(--radius-sm);
font-size:13px;
line-height:1.65;
color:var(--ink-2);
display:flex;
gap:14px;
align-items:flex-start;
}
.cancellation-policy svg {
width:20px; height:20px;
color:var(--sage-deep);
flex-shrink:0;
margin-top:1px;
}
.cancellation-policy strong {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:500;
color:var(--sage-deep);
display:block;
margin-bottom:4px;
font-size:14px;
}
/* ── Treatment detail card (used on treatments.html) ────── */
.treatment-detail {
display:grid;
grid-template-columns:1fr 1.2fr;
gap:60px;
align-items:center;
padding:90px 0;
border-bottom:1px solid var(--line);
}
.treatment-detail:last-child { border-bottom:none; }
.treatment-detail.reverse { direction:rtl; }
.treatment-detail.reverse > * { direction:ltr; }
.treatment-detail-art {
position:relative;
aspect-ratio:4/5;
border-radius:52% 48% 50% 50% / 48% 52% 48% 52%;
overflow:hidden;
background:linear-gradient(135deg, var(--sage-mist), var(--blush-mist));
box-shadow:var(--shadow-md);
animation:blob-wobble 22s ease-in-out infinite alternate;
}
.treatment-detail-art img {
width:100%; height:100%; object-fit:cover;
filter:saturate(0.92) brightness(1.03);
}
.treatment-detail-art .flower-overlay {
position:absolute; top:-20px; right:-20px;
width:120px; color:var(--blush);
opacity:0.8;
animation:sway 10s ease-in-out infinite alternate;
}
.treatment-detail-content .eyebrow { margin-bottom:16px; }
.treatment-detail-content h3 {
font-family:'Fraunces', serif;
font-weight:400;
font-size:clamp(32px, 4vw, 48px);
line-height:1.08;
letter-spacing:-0.02em;
color:var(--ink);
margin-bottom:20px;
}
.treatment-detail-content h3 em { font-style:italic; color:var(--sage-deep); }
.treatment-detail-content p {
font-size:15.5px;
line-height:1.8;
color:var(--ink-2);
margin-bottom:16px;
max-width:540px;
}
.treatment-detail-meta {
display:flex; flex-wrap:wrap;
gap:10px;
margin-top:22px;
}
.treatment-meta-tag {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--sage-deep);
background:var(--sage-mist);
padding:6px 14px;
border-radius:var(--radius-pill);
border:1px solid var(--line-sage);
}
@media(max-width:900px) {
.treatment-detail { grid-template-columns:1fr; gap:36px; padding:60px 0; }
.treatment-detail.reverse { direction:ltr; }
.treatment-detail-art { max-width:400px; margin:0 auto; }
}
/* ── Stats ──────────────────────────────────────────────── */
#stats {
padding:90px 0;
background:rgba(233, 213, 192, 0.88);
position:relative;
overflow:hidden;
}
#stats::before, #stats::after {
content:'';
position:absolute;
width:220px; height:220px;
border-radius:50%;
opacity:0.5;
}
#stats::before {
top:-80px; left:-60px;
background:radial-gradient(circle, var(--sage-soft) 0%, transparent 70%);
}
#stats::after {
bottom:-100px; right:-40px;
background:radial-gradient(circle, var(--blush-soft) 0%, transparent 70%);
}
.stats-grid {
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:40px;
position:relative;
z-index:2;
}
.stat-item { text-align:center; position:relative; }
.stat-item:not(:last-child)::after {
content:'';
position:absolute; top:20%; bottom:20%; right:-20px;
width:1px;
background:var(--line-sage);
}
.stat-num {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:300;
font-size:clamp(56px, 7vw, 100px);
line-height:1;
color:var(--sage-deep);
letter-spacing:-0.035em;
margin-bottom:14px;
display:inline-flex; align-items:baseline;
}
.stat-suffix { color:var(--blush); font-size:0.7em; }
.stat-label {
font-size:12px;
font-weight:600;
letter-spacing:0.14em;
text-transform:uppercase;
color:var(--muted);
}
.stat-free {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:400;
font-size:clamp(52px, 6vw, 92px);
color:var(--blush);
letter-spacing:-0.03em;
line-height:1;
}
@media(max-width:880px) {
.stats-grid { grid-template-columns:repeat(2, 1fr); gap:48px 24px; }
.stat-item:nth-child(2)::after { display:none; }
}
/* ── Team (home grid) ───────────────────────────────────── */
#team { padding:140px 0 120px; position:relative; overflow:hidden; }
#team::before {
content:'';
position:absolute; top:200px; left:-120px;
width:280px; height:280px;
background:var(--sage-mist);
border-radius:50% 40% 52% 48%;
opacity:0.7;
}
.team-header {
text-align:center;
max-width:680px;
margin:0 auto 72px;
position:relative; z-index:2;
}
.team-header .eyebrow { justify-content:center; margin-bottom:22px; }
.team-header p {
font-size:16px; line-height:1.8; color:var(--ink-2);
max-width:540px; margin:26px auto 0;
}
.team-grid {
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:24px;
position:relative; z-index:2;
}
.team-card {
background:var(--paper);
padding:28px 22px 32px;
border-radius:var(--radius);
border:1px solid var(--line-soft);
box-shadow:var(--shadow-sm);
transition:transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
text-align:center;
position:relative;
}
.team-card:hover {
transform:translateY(-8px);
box-shadow:var(--shadow-md);
border-color:var(--line-sage);
}
.team-card::before {
content:'';
position:absolute; top:18px; right:18px;
width:18px; height:18px;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity:0.7;
}
.team-avatar {
width:82px; height:82px;
margin:0 auto 20px;
border-radius:50% 42% 52% 48% / 48% 50% 50% 52%;
background:linear-gradient(135deg, var(--sage-soft), var(--blush-soft));
display:flex; align-items:center; justify-content:center;
font-family:'Fraunces', serif;
font-weight:500;
font-size:26px;
color:var(--sage-deep);
letter-spacing:0.05em;
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6);
}
.team-name {
font-family:'Fraunces', serif;
font-weight:500;
font-size:20px;
color:var(--ink);
margin-bottom:4px;
letter-spacing:-0.01em;
}
.team-role {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:400;
font-size:14px;
color:var(--blush);
margin-bottom:14px;
}
.team-desc {
font-size:13.5px;
line-height:1.65;
color:var(--ink-2);
}
@media(max-width:1080px) {
.team-grid { grid-template-columns:repeat(3, 1fr); }
}
@media(max-width:680px) {
.team-grid { grid-template-columns:repeat(2, 1fr); gap:16px; }
#team { padding:80px 0 70px; }
}
/* ── Therapist profile (detailed on therapists.html) ────── */
.therapist-profile {
max-width:620px;
margin:0 auto;
padding:60px 24px;
border-bottom:1px solid var(--line);
position:relative;
text-align:center;
}
.therapist-profile:last-child { border-bottom:none; }
.therapist-profile .eyebrow { justify-content:center; }
.therapist-profile-content p { max-width:540px; margin-left:auto; margin-right:auto; }
.therapist-profile-content .therapist-specialities { justify-content:center; max-width:560px; margin-left:auto; margin-right:auto; }
.therapist-profile-content .therapist-availability { justify-content:center; }
/* .reverse class no longer affects layout (kept for backwards compat) */
.therapist-profile-img {
position:relative;
aspect-ratio:4/5;
border-radius:54% 46% 50% 50% / 48% 52% 48% 52%;
overflow:hidden;
background:linear-gradient(135deg, var(--sage-mist), var(--blush-mist));
box-shadow:var(--shadow-md);
animation:blob-wobble 24s ease-in-out infinite alternate;
}
.therapist-profile-img img { width:100%; height:100%; object-fit:cover; filter:saturate(0.92) brightness(1.02); }
.therapist-profile-img .initials {
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-family:'Fraunces', serif;
font-style:italic;
font-weight:300;
font-size:clamp(72px, 10vw, 140px);
color:var(--sage-deep);
opacity:0.3;
}
/* Smaller therapist image (e.g. for Catherine) */
.therapist-profile-img--small {
max-width:300px;
margin:0 auto;
aspect-ratio:4/5;
}
/* Coming-soon placeholder inside the blob-shaped frame */
.therapist-placeholder {
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:14px;
padding:20px;
text-align:center;
}
.therapist-placeholder-flower {
width:56px; height:56px;
color:var(--blush);
opacity:0.75;
animation:sway 7s ease-in-out infinite alternate;
transform-origin:center;
}
.therapist-placeholder-label {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:300;
font-size:clamp(30px, 3.4vw, 44px);
color:var(--sage-deep);
letter-spacing:-0.01em;
line-height:1;
}
.therapist-placeholder-sub {
font-size:11px;
font-weight:600;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--muted);
}
.therapist-profile-content .eyebrow { margin-bottom:16px; }
.therapist-profile-name {
font-family:'Fraunces', serif;
font-weight:400;
font-size:clamp(36px, 4.5vw, 56px);
line-height:1.05;
letter-spacing:-0.02em;
color:var(--ink);
margin-bottom:8px;
}
.therapist-profile-role {
font-family:'Fraunces', serif;
font-style:italic;
font-size:18px;
color:var(--blush);
margin-bottom:22px;
}
.therapist-profile-content p {
font-size:15.5px;
line-height:1.8;
color:var(--ink-2);
margin-bottom:16px;
}
.therapist-specialities {
display:flex; flex-wrap:wrap;
gap:8px;
margin-top:20px;
}
.therapist-availability {
margin-top:24px;
padding-top:22px;
border-top:1px solid var(--line);
display:flex; align-items:center; gap:12px;
font-family:'Fraunces', serif;
font-style:italic;
font-size:15px;
color:var(--sage-deep);
}
.therapist-availability svg { width:18px; height:18px; color:var(--blush); }
@media(max-width:900px) {
.therapist-profile { grid-template-columns:1fr; gap:36px; padding:60px 0; }
.therapist-profile.reverse > :first-child { order:1; }
.therapist-profile-img { max-width:380px; margin:0 auto; }
}
/* ── About / Philosophy ─────────────────────────────────── */
#about, .about-section {
padding:140px 0;
background:linear-gradient(180deg, rgba(251, 244, 238, 0.7) 0%, rgba(233, 213, 192, 0.88) 100%);
position:relative;
overflow:hidden;
}
.about-grid {
display:grid;
grid-template-columns:1fr 1.1fr;
gap:80px;
align-items:center;
}
.about-image { position:relative; }
.about-image-frame {
border-radius:58% 42% 52% 48% / 48% 50% 50% 52%;
overflow:hidden;
box-shadow:var(--shadow-lg);
aspect-ratio:4 / 5;
animation:blob-wobble 22s ease-in-out infinite alternate;
}
.about-image-frame img {
width:100%; height:100%; object-fit:cover;
filter:saturate(0.92) brightness(1.03);
}
.about-image-flower {
position:absolute;
top:-30px; left:-50px;
width:160px;
color:var(--sage-deep);
animation:sway 11s ease-in-out infinite alternate;
transform-origin:bottom right;
}
.about-image-flower-2 {
position:absolute;
bottom:-40px; right:-30px;
width:130px;
color:var(--blush);
animation:sway 13s ease-in-out infinite alternate-reverse;
transform-origin:top left;
}
.about-quote {
position:absolute;
bottom:40px; right:-24px;
background:var(--paper);
padding:24px 28px;
border-radius:var(--radius-sm);
box-shadow:var(--shadow-md);
max-width:300px;
font-family:'Fraunces', serif;
font-style:italic;
font-size:17px;
line-height:1.5;
color:var(--ink);
border-left:3px solid var(--blush);
}
.about-quote cite {
display:block;
font-family:'Nunito', sans-serif;
font-style:normal;
font-size:12px;
font-weight:600;
letter-spacing:0.12em;
text-transform:uppercase;
color:var(--muted);
margin-top:14px;
}
.about-content { max-width:580px; }
.about-content .eyebrow { margin-bottom:20px; }
.about-content p {
font-size:16px;
line-height:1.85;
color:var(--ink-2);
margin-bottom:22px;
max-width:560px;
}
.about-pillars {
display:grid; gap:24px;
margin-top:40px;
}
.pillar {
display:grid; grid-template-columns:44px 1fr;
gap:18px; align-items:start;
}
.pillar-icon {
width:44px; height:44px;
border-radius:50%;
background:var(--sage-mist);
color:var(--sage-deep);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.pillar-title {
font-family:'Fraunces', serif;
font-weight:500;
font-size:18px;
color:var(--ink);
margin-bottom:4px;
}
.pillar-text {
font-size:14.5px;
line-height:1.7;
color:var(--ink-2);
}
@media(max-width:980px) {
.about-grid { grid-template-columns:1fr; gap:80px; }
.about-image { max-width:440px; margin:0 auto; }
.about-quote { right:auto; left:auto; bottom:-40px; max-width:92%; margin:0 auto; position:relative; }
#about, .about-section { padding:90px 0 100px; }
}
/* ── Events ─────────────────────────────────────────────── */
#events, .events-section { padding:140px 0 120px; position:relative; overflow:hidden; }
#events::before, .events-section::before {
content:'';
position:absolute; top:50%; right:-120px;
width:280px; height:280px;
background:var(--blush-mist);
border-radius:40% 60% 52% 48%;
opacity:0.7;
transform:translateY(-50%);
}
.events-header {
display:grid; grid-template-columns:1.1fr 1fr;
gap:60px;
margin-bottom:72px;
align-items:end;
position:relative; z-index:2;
}
.events-header p {
font-size:16px; line-height:1.8; color:var(--ink-2);
max-width:440px; justify-self:end;
}
.events-grid {
display:grid; grid-template-columns:1fr 1fr;
gap:48px;
position:relative; z-index:2;
}
.event-card {
background:var(--paper);
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--line-soft);
transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
box-shadow:var(--shadow-sm);
}
.event-card:hover {
transform:translateY(-6px);
box-shadow:var(--shadow-md);
}
.event-img {
aspect-ratio:16/10;
overflow:hidden;
position:relative;
}
.event-img::after {
content:'';
position:absolute; inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(46,58,45,0.2));
}
.event-img img {
width:100%; height:100%; object-fit:cover;
transition:transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.event-card:hover .event-img img { transform:scale(1.05); }
.event-body { padding:32px 30px 34px; }
.event-tag {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--blush);
margin-bottom:10px;
}
.event-title {
font-family:'Fraunces', serif;
font-weight:500;
font-size:26px;
line-height:1.2;
color:var(--ink);
margin-bottom:12px;
letter-spacing:-0.01em;
}
.event-desc {
font-size:14.5px;
line-height:1.75;
color:var(--ink-2);
}
@media(max-width:880px) {
.events-header { grid-template-columns:1fr; gap:20px; margin-bottom:48px; }
.events-header p { justify-self:start; }
.events-grid { grid-template-columns:1fr; gap:32px; }
#events, .events-section { padding:80px 0; }
}
/* ── Online booking section (Fresha embed) ─────────────── */
.booking-section {
padding:90px 0 100px;
position:relative;
overflow:hidden;
}
.booking-header {
text-align:center;
max-width:680px;
margin:0 auto 48px;
}
.booking-header .eyebrow { justify-content:center; margin-bottom:18px; }
.booking-header p {
font-size:15.5px; line-height:1.75; color:var(--ink-2);
max-width:540px; margin:22px auto 0;
}
.booking-embed {
max-width:920px;
margin:0 auto;
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius);
box-shadow:var(--shadow-md);
overflow:hidden;
}
.booking-embed:has(iframe) { min-height:560px; }
.booking-embed iframe {
display:block;
width:100%;
border:0;
min-height:720px;
}
.booking-placeholder {
padding:64px 40px;
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
}
.booking-placeholder-icon {
width:80px; height:80px;
border-radius:50% 42% 52% 48% / 48% 50% 50% 52%;
background:linear-gradient(135deg, var(--blush-mist), var(--lavender-mist));
display:flex; align-items:center; justify-content:center;
color:var(--blush);
margin-bottom:6px;
}
.booking-placeholder-icon svg { width:36px; height:36px; }
.booking-placeholder h3 {
font-family:'Fraunces', serif;
font-weight:400;
font-size:28px;
color:var(--ink);
letter-spacing:-0.015em;
}
.booking-placeholder h3 em { font-style:italic; color:var(--blush); }
.booking-placeholder p {
font-size:15px; line-height:1.75; color:var(--ink-2);
max-width:460px;
}
.booking-placeholder .booking-buttons {
display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
margin-top:14px;
}
@media(max-width:768px) {
.booking-section { padding:70px 0 80px; }
.booking-placeholder { padding:48px 24px; }
.booking-placeholder h3 { font-size:24px; }
}
/* ── Useful Links — plain text list of other therapists ─── */
.useful-links-section {
padding:90px 0 100px;
position:relative;
}
.useful-links-header {
text-align:center;
max-width:680px;
margin:0 auto 48px;
}
.useful-links-header .eyebrow { justify-content:center; margin-bottom:18px; }
.useful-links-header p {
font-size:15.5px; line-height:1.75; color:var(--ink-2);
max-width:520px; margin:22px auto 0;
}
.useful-links-list {
list-style:none;
max-width:560px;
margin:0 auto;
padding:0;
}
.useful-links-list li {
padding:24px 0;
border-bottom:1px solid var(--line);
text-align:center;
}
.useful-links-list li:last-child { border-bottom:none; }
.useful-links-name {
font-family:'Fraunces', serif;
font-weight:500;
font-size:20px;
color:var(--ink);
letter-spacing:-0.01em;
}
.useful-links-title {
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--blush);
margin-top:4px;
}
.useful-links-contact {
font-size:13.5px;
color:var(--ink-2);
margin-top:6px;
}
.useful-links-contact a { color:var(--ink-2); border-bottom:1px solid var(--line); transition:color .2s, border-color .2s; }
.useful-links-contact a:hover { color:var(--blush); border-color:var(--blush); }
/* ── Compact event list (slim events on events.html / more.html) ── */
.event-list {
list-style:none;
max-width:720px;
margin:0 auto;
display:grid;
gap:18px;
}
.event-list-item {
display:grid;
grid-template-columns:54px 1fr auto;
gap:22px;
align-items:center;
padding:22px 26px;
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius-sm);
transition:transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
text-decoration:none;
color:inherit;
}
.event-list-item:hover {
transform:translateY(-3px);
box-shadow:var(--shadow-sm);
border-color:var(--line-sage);
}
.event-list-icon {
width:54px; height:54px;
flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border-radius:50% 42% 52% 48% / 48% 50% 50% 52%;
background:linear-gradient(135deg, var(--sage-soft), var(--blush-soft));
color:var(--sage-deep);
}
.event-list-icon svg { width:28px; height:28px; }
.event-list-body { min-width:0; }
.event-list-name {
font-family:'Fraunces', serif;
font-weight:500;
font-size:18px;
color:var(--ink);
line-height:1.3;
letter-spacing:-0.01em;
}
.event-list-meta {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--muted);
margin-top:2px;
}
.event-list-link {
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--sage-deep);
display:inline-flex; align-items:center; gap:8px;
white-space:nowrap;
transition:gap .2s, color .2s;
}
.event-list-item:hover .event-list-link { color:var(--blush); gap:12px; }
.event-list-link::after {
content:'→';
font-style:normal;
transition:transform .2s;
}
.event-list-item:hover .event-list-link::after { transform:translateX(3px); }
@media(max-width:680px) {
.event-list-item { grid-template-columns:48px 1fr; padding:18px 20px; gap:16px; }
.event-list-icon { width:48px; height:48px; }
.event-list-link { grid-column:1 / -1; padding-top:6px; }
}
/* ── Gift cards banner (blush wash) ─────────────────────── */
.cta-banner {
padding:120px 24px;
background:linear-gradient(135deg, var(--blush-mist) 0%, var(--bg-2) 35%, var(--bg-3) 65%, var(--lavender-mist) 100%);
text-align:center;
position:relative;
overflow:hidden;
}
.cta-banner::after {
content:'';
position:absolute; top:0; left:10%; right:10%;
height:1px;
background:linear-gradient(90deg, transparent, rgba(212,147,122,0.35), rgba(184,169,200,0.35), transparent);
}
.cta-banner .botanical-left, .cta-banner .botanical-right {
position:absolute; top:50%; transform:translateY(-50%);
color:var(--sage);
opacity:0.5;
}
.cta-banner .botanical-left { left:4%; width:120px; }
.cta-banner .botanical-right { right:4%; width:120px; transform:translateY(-50%) scaleX(-1); }
.cta-banner-inner {
max-width:640px; margin:0 auto;
position:relative; z-index:2;
}
.cta-banner .eyebrow { justify-content:center; margin-bottom:20px; }
.cta-banner h2 {
font-family:'Fraunces', serif;
font-weight:300;
font-size:clamp(38px, 5.4vw, 68px);
line-height:1.05;
letter-spacing:-0.025em;
color:var(--ink);
margin-bottom:22px;
}
.cta-banner h2 em {
font-style:italic; font-weight:400; color:var(--sage-deep);
}
.cta-banner p {
font-size:17px; line-height:1.75; color:var(--ink-2);
max-width:500px; margin:0 auto 40px;
}
@media(max-width:880px) {
.cta-banner { padding:80px 20px; }
.cta-banner .botanical-left, .cta-banner .botanical-right { display:none; }
}
/* ── FAQ ────────────────────────────────────────────────── */
#faq, .faq-section { padding:140px 0 120px; position:relative; overflow:hidden; }
.faq-header {
text-align:center;
margin-bottom:64px;
}
.faq-header .eyebrow { justify-content:center; margin-bottom:22px; }
.faq-grid {
max-width:880px; margin:0 auto;
display:grid; gap:14px;
}
.faq-item {
background:var(--paper);
border:1px solid var(--line-soft);
border-radius:var(--radius-sm);
overflow:hidden;
transition:border-color .3s, box-shadow .3s;
}
.faq-item:hover { border-color:var(--line-sage); }
.faq-item.open { border-color:var(--line-sage); box-shadow:var(--shadow-sm); }
.faq-q {
padding:24px 28px;
display:flex; align-items:center; justify-content:space-between;
gap:24px;
font-family:'Fraunces', serif;
font-weight:500;
font-size:18px;
line-height:1.4;
color:var(--ink);
cursor:pointer;
user-select:none;
transition:color .3s;
}
.faq-q:hover { color:var(--sage-deep); }
.faq-icon {
width:28px; height:28px; flex-shrink:0;
border-radius:50%;
background:var(--sage-mist);
display:flex; align-items:center; justify-content:center;
color:var(--sage-deep);
font-size:18px;
font-family:'Nunito', sans-serif; font-weight:300;
transition:transform .4s cubic-bezier(.2,.7,.2,1), background .3s;
}
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--blush-soft); }
.faq-a {
max-height:0;
overflow:hidden;
transition:max-height 0.5s cubic-bezier(.2,.7,.2,1);
}
.faq-a-inner {
padding:0 28px 26px;
font-size:15px;
line-height:1.8;
color:var(--ink-2);
max-width:680px;
}
.faq-item.open .faq-a { max-height:500px; }
@media(max-width:768px) {
#faq, .faq-section { padding:80px 0; }
.faq-q { padding:20px 22px; font-size:16px; }
.faq-a-inner { padding:0 22px 22px; font-size:14px; }
}
/* ── Contact ────────────────────────────────────────────── */
#contact, .contact-section {
padding:140px 0 120px;
background:rgba(233, 213, 192, 0.9);
position:relative;
overflow:hidden;
}
#contact::before, .contact-section::before {
content:'';
position:absolute; bottom:-80px; left:-80px;
width:300px; height:300px;
background:var(--sage-mist);
border-radius:50% 40% 52% 48%;
opacity:0.6;
}
.contact-grid {
display:grid; grid-template-columns:1fr 1.1fr;
gap:80px;
position:relative; z-index:2;
}
.contact-info .eyebrow { margin-bottom:22px; }
.contact-info p.contact-lead {
font-size:16px; line-height:1.8; color:var(--ink-2);
margin:18px 0 40px;
max-width:520px;
}
.contact-detail {
display:grid; grid-template-columns:44px 1fr;
gap:18px;
padding:18px 0;
border-bottom:1px solid var(--line);
align-items:start;
}
.contact-detail:last-of-type { border-bottom:none; }
.contact-detail-icon {
width:44px; height:44px;
border-radius:50%;
background:var(--sage-mist);
color:var(--sage-deep);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
}
.contact-detail-label {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--blush);
margin-bottom:4px;
}
.contact-detail-value {
font-family:'Fraunces', serif;
font-weight:500;
font-size:16px;
color:var(--ink);
line-height:1.55;
}
.contact-detail-value a { transition:color .3s; }
.contact-detail-value a:hover { color:var(--sage-deep); border-bottom:1px solid var(--blush); }
.contact-form {
background:var(--paper);
padding:40px;
border-radius:var(--radius);
border:1px solid var(--line-soft);
box-shadow:var(--shadow-md);
position:relative;
}
.contact-form::before {
content:'';
position:absolute; top:-28px; right:-28px;
width:80px; height:80px;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
animation:slow-spin 30s linear infinite;
}
@keyframes slow-spin { to { transform:rotate(360deg); } }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-group { margin-bottom:20px; }
.form-label {
display:block;
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--sage-deep);
margin-bottom:8px;
}
.form-label span { color:var(--blush); }
.form-input, .form-select, .form-textarea {
width:100%;
font-family:'Nunito', sans-serif;
font-size:15px;
color:var(--ink);
background:var(--bg);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:13px 16px;
transition:border-color .3s, background .3s, box-shadow .3s;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--muted-2); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline:none;
border-color:var(--sage);
background:var(--paper);
box-shadow:0 0 0 3px rgba(var(--sage-rgb), 0.12);
}
.form-select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.form-textarea { resize:vertical; min-height:120px; font-family:'Nunito', sans-serif; }
.form-submit-wrap { margin-top:8px; }
.form-note {
font-family:'Fraunces', serif;
font-style:italic;
font-size:13px;
color:var(--muted);
margin-top:16px;
text-align:center;
}
@media(max-width:980px) {
.contact-grid { grid-template-columns:1fr; gap:50px; }
.contact-form { padding:30px 24px; }
.form-row { grid-template-columns:1fr; gap:0; }
#contact, .contact-section { padding:80px 0 100px; }
}
/* ── Footer ─────────────────────────────────────────────── */
footer {
background:rgba(243, 231, 211, 0.92);
color:var(--ink-2);
padding:80px 0 40px;
position:relative;
overflow:hidden;
}
footer::before {
content:'';
position:absolute; top:-40px; right:-40px;
width:280px; height:280px;
background:radial-gradient(circle, rgba(201,136,115,0.2), transparent 70%);
border-radius:50%;
}
footer::after {
content:'';
position:absolute; bottom:-60px; left:-60px;
width:240px; height:240px;
background:radial-gradient(circle, rgba(184,169,200,0.18), transparent 70%);
border-radius:50%;
}
.footer-grid {
display:grid; grid-template-columns:1.5fr 1fr 1fr;
gap:60px;
margin-bottom:56px;
position:relative; z-index:2;
}
.footer-brand .nav-logo {
color:var(--ink);
font-size:24px;
margin-bottom:20px;
}
.footer-brand .nav-logo em { color:var(--blush); }
.footer-brand .nav-logo-mark { color:var(--sage-deep); }
.footer-brand p {
font-size:14px; line-height:1.75;
color:rgba(46,58,45,0.7);
max-width:340px;
margin-bottom:24px;
}
.footer-social { display:flex; gap:10px; }
.footer-social a {
width:40px; height:40px;
border-radius:50%;
background:rgba(46,58,45,0.08);
color:var(--ink);
display:flex; align-items:center; justify-content:center;
transition:background .3s, transform .3s, color .3s;
}
.footer-social a:hover { background:var(--blush); color:#fff; transform:translateY(-3px); }
.footer-col h4 {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:400;
font-size:16px;
color:var(--blush);
margin-bottom:22px;
}
.footer-col ul { list-style:none; display:grid; gap:12px; }
.footer-col ul li a {
font-size:13.5px;
color:rgba(46,58,45,0.72);
transition:color .2s, padding-left .2s;
}
.footer-col ul li a:hover { color:var(--blush); padding-left:6px; }
.footer-address {
margin-top:22px;
font-size:13px; line-height:1.7;
color:rgba(46,58,45,0.65);
}
.footer-address-label {
font-family:'Fraunces', serif; font-style:italic;
font-size:13px; color:var(--blush);
margin-bottom:6px;
}
.footer-bottom {
padding-top:32px;
border-top:1px solid rgba(46,58,45,0.15);
display:flex; align-items:center; justify-content:center;
flex-wrap:wrap;
gap:14px 28px;
font-size:12.5px;
color:rgba(46,58,45,0.6);
position:relative; z-index:2;
text-align:center;
}
.footer-bottom a { color:rgba(46,58,45,0.6); transition:color .2s; }
.footer-bottom a:hover { color:var(--blush); }
.footer-tagline {
font-family:'Fraunces', serif;
font-style:italic;
font-size:16px;
color:var(--blush);
}
.footer-credit {
width:100%;
font-size:11.5px;
letter-spacing:0.05em;
color:rgba(46,58,45,0.5);
text-align:center;
margin-top:4px;
}
.footer-credit a {
color:rgba(46,58,45,0.7);
text-decoration:none;
border-bottom:1px solid rgba(46,58,45,0.2);
padding-bottom:1px;
transition:color .2s, border-color .2s;
}
.footer-credit a:hover { color:var(--blush); border-bottom-color:var(--blush); }
.footer-credit-sep { margin:0 6px; color:rgba(46,58,45,0.3); }
.footer-staff { font-size:0.95em; opacity:0.7; }
.footer-staff:hover { opacity:1; }
@media(max-width:880px) {
.footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
}
@media(max-width:600px) {
.footer-grid { grid-template-columns:1fr; }
footer { padding:60px 0 32px; }
}
/* ── Mobile CTA Bar ─────────────────────────────────────── */
.mobile-cta-bar {
display:none;
position:fixed; bottom:0; left:0; right:0; z-index:200;
box-shadow:0 -4px 24px rgba(46,58,45,0.18);
}
.mobile-cta-call {
flex:1; background:var(--paper);
color:var(--ink); font-weight:600; font-size:13.5px;
display:flex; align-items:center; justify-content:center;
gap:8px; padding:16px;
border-top:1px solid var(--line);
}
.mobile-cta-book {
flex:1.5; background:var(--sage-deep); color:var(--bg);
font-weight:600; font-size:13.5px;
display:flex; align-items:center; justify-content:center;
padding:16px;
}
@media(max-width:768px) {
.mobile-cta-bar { display:flex; }
body { padding-bottom:56px; }
}
/* ── WhatsApp floating chat button ───────────────────────── */
.whatsapp-fab {
position:fixed;
bottom:28px;
right:80px;
z-index:150;
width:56px; height:56px;
border-radius:50%;
background:#25D366;
color:#fff;
display:flex; align-items:center; justify-content:center;
text-decoration:none;
box-shadow:0 6px 20px rgba(37, 211, 102, 0.35);
transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.whatsapp-fab:hover {
transform:translateY(-3px) scale(1.05);
box-shadow:0 10px 28px rgba(37, 211, 102, 0.45);
}
.whatsapp-fab svg { width:30px; height:30px; }
.whatsapp-fab::after {
content:'Chat on WhatsApp';
position:absolute;
right:calc(100% + 12px);
top:50%;
transform:translateY(-50%);
background:var(--ink);
color:var(--bg);
font-size:12.5px;
font-family:'Nunito', sans-serif;
font-weight:500;
padding:7px 12px;
border-radius:6px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity .25s;
}
.whatsapp-fab:hover::after { opacity:1; }
@media(max-width:768px) {
.whatsapp-fab { bottom:72px; right:70px; width:50px; height:50px; }
.whatsapp-fab svg { width:26px; height:26px; }
.whatsapp-fab::after { display:none; }
}
/* ── Scroll-to-top ──────────────────────────────────────── */
#scrolltop {
position:fixed; bottom:28px; right:24px; z-index:100;
width:44px; height:44px; border-radius:50%;
background:var(--paper);
color:var(--sage-deep);
display:flex; align-items:center; justify-content:center;
opacity:0; pointer-events:none;
transition:opacity 0.3s, transform 0.3s, background 0.3s;
box-shadow:var(--shadow-md);
border:1px solid var(--line-soft);
}
#scrolltop.visible { opacity:1; pointer-events:auto; }
#scrolltop:hover { transform:translateY(-3px); background:var(--sage-mist); }
@media(max-width:768px) { #scrolltop { bottom:72px; right:16px; } }
/* ── Testimonials ───────────────────────────────────────── */
#testimonials, .testimonials-section {
padding:140px 0 120px;
background:linear-gradient(180deg, rgba(246,230,220,0.55) 0%, rgba(233,213,192,0.4) 50%, rgba(216,200,232,0.42) 100%);
position:relative;
overflow:hidden;
}
#testimonials::before, .testimonials-section::before {
content:'';
position:absolute; bottom:0; left:15%; right:15%;
height:1px;
background:linear-gradient(90deg, transparent, rgba(184,169,200,0.4), rgba(212,147,122,0.35), transparent);
}
.testimonials-header {
text-align:center;
max-width:680px;
margin:0 auto 64px;
position:relative; z-index:2;
}
.testimonials-header .eyebrow { justify-content:center; margin-bottom:22px; }
.testimonials-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:28px;
max-width:1140px;
margin:0 auto;
position:relative; z-index:2;
}
.testimonial-card {
background:var(--paper);
padding:38px 32px 30px;
border-radius:var(--radius);
border:1px solid var(--line-soft);
box-shadow:var(--shadow-sm);
position:relative;
transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .3s;
display:flex;
flex-direction:column;
}
.testimonial-card:hover {
transform:translateY(-6px);
box-shadow:var(--shadow-md);
border-color:var(--line-sage);
}
.testimonial-mark {
position:absolute; top:-18px; left:28px;
width:50px; height:40px;
font-family:'Fraunces', serif;
font-size:78px;
font-weight:500;
font-style:italic;
line-height:1;
color:var(--blush);
background:var(--paper);
padding:0 10px;
}
.testimonial-text {
font-family:'Fraunces', serif;
font-style:italic;
font-weight:300;
font-size:16.5px;
line-height:1.7;
color:var(--ink);
margin:8px 0 24px;
flex:1;
}
.testimonial-cite {
display:flex; align-items:center; gap:14px;
padding-top:20px;
border-top:1px solid var(--line);
font-style:normal;
}
.testimonial-avatar {
width:42px; height:42px;
border-radius:50% 40% 52% 48% / 48% 50% 50% 52%;
background:linear-gradient(135deg, var(--sage-soft), var(--blush-soft));
display:flex; align-items:center; justify-content:center;
font-family:'Fraunces', serif;
font-weight:500;
font-size:14px;
color:var(--sage-deep);
flex-shrink:0;
letter-spacing:0.02em;
}
.testimonial-name {
font-family:'Fraunces', serif;
font-weight:500;
font-size:15px;
color:var(--ink);
line-height:1.3;
}
.testimonial-stars {
display:flex; gap:2px;
margin-top:3px;
color:var(--blush);
font-size:11px;
letter-spacing:1px;
}
@media(max-width:980px) {
.testimonials-grid { grid-template-columns:1fr 1fr; }
#testimonials, .testimonials-section { padding:90px 0 80px; }
}
@media(max-width:640px) {
.testimonials-grid { grid-template-columns:1fr; gap:20px; }
}
/* ── Gift card page specific ────────────────────────────── */
.gift-showcase {
padding:100px 0;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}
.gift-card-visual {
position:relative;
aspect-ratio:1.6/1;
border-radius:var(--radius);
background:linear-gradient(135deg, #f4eddd, #e9d8d3);
padding:44px 40px;
box-shadow:var(--shadow-sm);
border:1px solid var(--line);
overflow:hidden;
transform:rotate(-3deg);
transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.gift-card-visual:hover { transform:rotate(0) scale(1.02); }
.gift-card-visual-inner {
position:relative; z-index:2;
display:flex; flex-direction:column;
justify-content:space-between;
height:100%;
}
.gift-card-label {
font-family:'Fraunces', serif;
font-style:italic;
font-size:16px;
color:var(--sage-deep);
margin-bottom:10px;
}
.gift-card-brand {
font-family:'Fraunces', serif;
font-weight:400;
font-size:clamp(28px, 3.2vw, 40px);
line-height:1;
color:var(--ink);
letter-spacing:-0.01em;
}
.gift-card-brand em { font-style:italic; color:var(--sage-deep); }
.gift-card-footer {
display:flex; align-items:flex-end; justify-content:space-between;
font-family:'Fraunces', serif;
font-style:italic;
color:var(--muted);
font-size:14px;
}
@media(max-width:900px) {
.gift-showcase { grid-template-columns:1fr; gap:48px; padding:60px 0; }
.gift-card-visual { max-width:460px; margin:0 auto; }
}
/* ── Cherry Blossoms (ambient drift) ────────────────────── */
.sakura-layer {
position:fixed; inset:0;
pointer-events:none;
z-index:5;
overflow:hidden;
}
.sakura {
position:absolute;
top:-40px; left:0;
width:var(--size, 22px); height:var(--size, 22px);
opacity:0;
will-change:transform, opacity;
animation:sakura-fall var(--dur, 22s) linear infinite;
animation-delay:var(--delay, 0s);
}
.sakura svg { width:100%; height:100%; display:block; filter:drop-shadow(0 2px 3px rgba(212,147,122,0.18)); }
@keyframes sakura-fall {
0% { transform:translate(var(--x,0), -10vh) rotate(0deg); opacity:0; }
6% { opacity:var(--op, 0.42); }
50% { transform:translate(calc(var(--x,0) + var(--dx, 30px) * 0.55), 55vh) rotate(calc(var(--rot, 360deg) * 0.55)); }
94% { opacity:var(--op, 0.42); }
100% { transform:translate(calc(var(--x,0) + var(--dx, 30px)), 115vh) rotate(var(--rot, 360deg)); opacity:0; }
}
.sakura-static {
position:absolute;
width:var(--size, 40px); height:var(--size, 40px);
opacity:var(--op, 0.32);
pointer-events:none;
animation:sakura-sway 7s ease-in-out infinite alternate;
z-index:0;
}
.sakura-static svg { width:100%; height:100%; display:block; }
@keyframes sakura-sway {
0% { transform:rotate(var(--r-from, -10deg)) scale(1); }
100% { transform:rotate(var(--r-to, 10deg)) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
.sakura { animation:none; opacity:0.3; top:20%; }
.sakura-static { animation:none; }
}
/* ── Helpers ────────────────────────────────────────────── */
.text-center { text-align:center; }
/* ═══════════════════════════════════════════════════════════
Booking system — book.html
═══════════════════════════════════════════════════════════ */
.booking-app { padding:48px 0 120px; }
/* Step indicator */
.booking-steps {
list-style:none; padding:0; margin:0 0 56px;
display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
counter-reset:step;
}
.booking-steps .step {
display:flex; flex-direction:column; align-items:center; gap:8px;
position:relative; padding-top:8px;
text-align:center;
font-family:'Nunito', sans-serif; font-size:13px;
color:var(--muted); transition:color .3s;
}
.booking-steps .step::before {
content:""; position:absolute; top:24px; left:calc(50% + 18px); right:calc(-50% + 18px);
height:2px; background:var(--line);
}
.booking-steps .step:last-child::before { display:none; }
.step-num {
width:32px; height:32px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--paper); border:2px solid var(--line);
font-family:'Fraunces', serif; font-weight:500; font-size:15px;
color:var(--muted); transition:all .3s;
position:relative; z-index:1;
}
.booking-steps .step.is-active { color:var(--ink); }
.booking-steps .step.is-active .step-num { background:var(--blush); border-color:var(--blush); color:#fff; box-shadow:0 4px 14px rgba(var(--blush-rgb),0.32); }
.booking-steps .step.is-complete .step-num { background:var(--sage); border-color:var(--sage); color:#fff; }
.booking-steps .step.is-complete::before { background:var(--sage); }
.step-label { letter-spacing:0.04em; }
@media(max-width:680px) {
.booking-steps .step-label { display:none; }
.booking-steps { gap:0; }
.booking-steps .step::before { top:24px; left:calc(50% + 18px); right:calc(-50% + 18px); }
}
/* Panels */
.booking-panel { animation:bookFade .4s ease both; }
@keyframes bookFade { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }
.booking-panel-title {
font-family:'Fraunces', serif; font-weight:500;
font-size:clamp(28px, 4vw, 38px);
color:var(--ink); margin:0 0 8px;
letter-spacing:-0.01em;
}
.booking-panel-sub {
font-family:'Nunito', sans-serif; color:var(--muted);
font-size:15px; margin:0 0 32px;
}
.booking-panel-sub a { color:var(--blush); border-bottom:1px solid var(--blush-soft); }
.booking-panel-sub a:hover { border-bottom-color:var(--blush); }
.booking-loading { padding:48px; text-align:center; color:var(--muted); font-style:italic; }
.booking-error {
padding:24px; text-align:center; color:var(--ink);
background:rgba(var(--blush-rgb),0.08);
border:1px solid rgba(var(--blush-rgb),0.2);
border-radius:14px;
font-family:'Nunito', sans-serif;
}
/* Treatment grid */
.treatment-grid {
display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:18px;
}
.treatment-card {
text-align:left; padding:24px;
background:var(--paper);
border:1.5px solid var(--line);
border-radius:18px;
font-family:'Nunito', sans-serif;
cursor:pointer; transition:all .25s;
position:relative; overflow:hidden;
display:flex; flex-direction:column; gap:10px;
}
.treatment-card::after {
content:""; position:absolute; inset:0;
border-radius:18px;
border:2px solid transparent;
pointer-events:none; transition:border-color .2s;
}
.treatment-card:hover {
border-color:var(--blush-soft);
transform:translateY(-3px);
box-shadow:0 12px 30px rgba(46,58,45,0.06);
}
.treatment-card.is-selected { border-color:var(--blush); background:var(--blush-mist); }
.treatment-card.is-selected::after { border-color:var(--blush); }
.treatment-card-head {
display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.treatment-card-name {
font-family:'Fraunces', serif; font-weight:500;
font-size:19px; color:var(--ink);
margin:0; line-height:1.25;
}
.treatment-card-price {
font-family:'Fraunces', serif; font-weight:500;
font-size:18px; color:var(--blush);
white-space:nowrap;
}
.treatment-card-desc {
font-size:13.5px; line-height:1.55; color:var(--muted);
margin:0;
}
.treatment-card-meta {
display:flex; align-items:center; justify-content:space-between;
font-size:13px; color:var(--ink-2);
margin-top:auto; padding-top:8px;
border-top:1px dashed var(--line);
}
.treatment-card-cta { color:var(--blush); font-weight:600; letter-spacing:0.03em; }
/* Calendar */
.calendar-wrap {
background:var(--paper);
border:1.5px solid var(--line);
border-radius:20px;
padding:24px; max-width:560px; margin:0 auto;
}
.calendar-header {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:18px;
}
.cal-nav {
width:38px; height:38px; border-radius:50%;
background:transparent; border:1.5px solid var(--line);
color:var(--ink); font-size:22px; line-height:1;
cursor:pointer; transition:all .2s;
display:flex; align-items:center; justify-content:center;
}
.cal-nav:hover { background:var(--blush); color:#fff; border-color:var(--blush); }
.cal-nav:disabled { opacity:0.3; cursor:not-allowed; }
.cal-nav:disabled:hover { background:transparent; color:var(--ink); border-color:var(--line); }
.cal-month {
font-family:'Fraunces', serif; font-size:20px; font-weight:500;
color:var(--ink);
}
.calendar-weekdays {
display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
text-align:center; font-family:'Nunito', sans-serif;
font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
color:var(--muted); padding:8px 0; margin-bottom:4px;
border-bottom:1px solid var(--line-soft);
}
.calendar-grid {
display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;
}
.cal-day {
aspect-ratio:1;
display:flex; align-items:center; justify-content:center;
background:transparent; border:1.5px solid transparent;
font-family:'Nunito', sans-serif; font-size:14px; font-weight:500;
border-radius:10px; cursor:pointer;
color:var(--ink); transition:all .15s;
}
.cal-day.is-blank { cursor:default; }
.cal-day.is-available:hover { background:var(--blush-mist); border-color:var(--blush-soft); }
.cal-day.is-today { font-weight:700; color:var(--blush); }
.cal-day.is-unavailable { color:var(--muted-2); cursor:not-allowed; opacity:0.4; text-decoration:line-through; }
.cal-day.is-selected { background:var(--blush); color:#fff; border-color:var(--blush); }
.calendar-legend {
display:flex; gap:24px; justify-content:center;
margin-top:20px; padding-top:16px; border-top:1px solid var(--line-soft);
font-family:'Nunito', sans-serif; font-size:12.5px; color:var(--muted);
}
.legend-item { display:inline-flex; align-items:center; gap:8px; }
.legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.legend-dot.available { background:var(--blush); }
.legend-dot.unavailable { background:transparent; border:1px dashed var(--muted-2); }
/* Time slots */
.time-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
gap:10px; max-width:720px; margin:0 auto;
}
.time-slot {
padding:14px 10px;
background:var(--paper);
border:1.5px solid var(--line);
border-radius:12px;
font-family:'Nunito', sans-serif; font-weight:500;
font-size:15px; color:var(--ink);
cursor:pointer; transition:all .15s;
}
.time-slot:hover { border-color:var(--blush); background:var(--blush-mist); }
.time-slot.is-selected { background:var(--blush); color:#fff; border-color:var(--blush); }
/* Summary card on step 4 */
.booking-summary {
background:var(--blush-mist);
border:1.5px solid var(--blush-soft);
border-radius:18px;
padding:24px; margin-bottom:32px;
display:flex; flex-direction:column; gap:8px;
}
.summary-line {
display:flex; justify-content:space-between; align-items:baseline;
gap:16px; padding:6px 0;
font-family:'Nunito', sans-serif; font-size:14.5px;
border-bottom:1px dashed rgba(var(--blush-rgb),0.25);
}
.summary-line:last-child { border-bottom:none; }
.summary-line span { color:var(--muted); }
.summary-line strong { color:var(--ink); font-weight:600; text-align:right; }
/* Booking — Step 4 form layout (matches contact-form aesthetic) */
.booking-details-grid {
display:grid;
grid-template-columns:340px 1fr;
gap:32px;
align-items:start;
}
@media(max-width:880px) {
.booking-details-grid { grid-template-columns:1fr; gap:24px; }
}
.booking-form-card {
background:var(--paper);
padding:40px;
border-radius:24px;
border:1px solid var(--line-soft);
box-shadow:0 12px 32px rgba(46,58,45,0.06), 0 2px 6px rgba(46,58,45,0.03);
position:relative;
overflow:hidden;
}
.booking-form-card::before {
content:'';
position:absolute; top:-28px; right:-28px;
width:80px; height:80px;
background:url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity:0.55;
animation:slow-spin 30s linear infinite;
pointer-events:none;
}
#ter-booking-flow .form-row {
display:grid; grid-template-columns:1fr 1fr; gap:20px;
margin-bottom:20px;
}
@media(max-width:600px) {
#ter-booking-flow .form-row { grid-template-columns:1fr; gap:0; }
.booking-form-card { padding:28px 22px; }
}
#ter-booking-flow .form-group { margin-bottom:20px; }
#ter-booking-flow .form-group:last-of-type { margin-bottom:0; }
#ter-booking-flow .form-row .form-group { margin-bottom:0; }
#ter-booking-flow .form-label {
display:block;
font-family:'Fraunces', serif;
font-style:italic;
font-size:14px;
color:var(--sage-deep);
margin-bottom:8px;
}
#ter-booking-flow .form-label span { color:var(--blush); }
#ter-booking-flow .form-input,
#ter-booking-flow .form-textarea {
width:100%; box-sizing:border-box;
font-family:'Nunito', sans-serif;
font-size:15px;
color:var(--ink);
background:var(--bg);
border:1px solid var(--line);
border-radius:var(--radius-sm);
padding:13px 16px;
transition:border-color .3s, background .3s, box-shadow .3s;
}
#ter-booking-flow .form-input::placeholder,
#ter-booking-flow .form-textarea::placeholder { color:var(--muted-2); }
#ter-booking-flow .form-input:focus,
#ter-booking-flow .form-textarea:focus {
outline:none;
border-color:var(--sage);
background:var(--paper);
box-shadow:0 0 0 3px rgba(var(--sage-rgb), 0.12);
}
#ter-booking-flow .form-textarea { resize:vertical; min-height:120px; font-family:'Nunito', sans-serif; }
.booking-summary {
position:sticky; top:96px;
/* (already styled above for blush-mist card) */
}
@media(max-width:880px) {
.booking-summary { position:static; }
}
.booking-policy {
background:rgba(var(--sage-rgb),0.07);
border-left:3px solid var(--sage);
padding:14px 18px; border-radius:10px;
font-family:'Nunito', sans-serif; font-size:13.5px;
color:var(--ink-2); margin:24px 0;
}
.booking-policy strong { color:var(--ink); font-weight:600; }
.form-error {
background:rgba(var(--blush-rgb),0.1);
border:1px solid rgba(var(--blush-rgb),0.3);
border-radius:10px; padding:14px 18px;
margin-top:18px;
font-family:'Nunito', sans-serif; font-size:14px; color:var(--blush);
}
.booking-nav {
display:flex; align-items:center; justify-content:space-between;
gap:16px; margin-top:32px;
}
.booking-nav.center { justify-content:center; }
.booking-nav .btn-ghost {
background:transparent; border:none; cursor:pointer;
font-family:'Nunito', sans-serif; font-size:14px; color:var(--muted);
padding:10px 14px; border-radius:8px; transition:color .2s, background .2s;
}
.booking-nav .btn-ghost:hover { color:var(--ink); background:var(--blush-mist); }
/* Confirmation panel */
.booking-confirm { text-align:center; padding:48px 0; }
.confirm-icon {
width:88px; height:88px; margin:0 auto 24px;
color:var(--sage);
animation:confirmPop .5s cubic-bezier(.2,.7,.2,1.4) both;
}
@keyframes confirmPop { from { opacity:0; transform:scale(0.5);} to { opacity:1; transform:scale(1);} }
.confirm-card {
max-width:480px; margin:32px auto 0;
background:var(--paper);
border:1.5px solid var(--sage-soft);
border-radius:18px;
padding:28px;
display:flex; flex-direction:column; gap:6px;
text-align:left;
box-shadow:0 12px 32px rgba(122,148,120,0.12);
}
.confirm-card .summary-line { border-bottom-color:rgba(var(--sage-rgb),0.2); }
/* Acuity embed wrapper */
.acuity-embed {
background:var(--paper);
border-radius:24px;
padding:24px;
border:1px solid var(--line-soft);
box-shadow:0 12px 32px rgba(46,58,45,0.06), 0 2px 6px rgba(46,58,45,0.03);
}
.acuity-embed iframe {
width:100%;
min-height:800px;
border-radius:16px;
display:block;
}
@media (max-width:640px) {
.acuity-embed { padding:14px; border-radius:18px; }
.acuity-embed iframe { border-radius:12px; min-height:1200px; }
}