/* =========================================================
ELM AESTHETICS — Luxury Medical Aesthetics
Design System & Global Styles
========================================================= */
/* Fonts now loaded via in for faster first paint */
/* ---------- CSS Variables ---------- */
:root {
/* Brand palette — exact values from the brand identity */
--teal-deep: #0F2C2E; /* Background teal — exact brand spec */
--teal-rich: #143638;
--teal-soft: #1E4144;
--teal-darker: #081E20;
--gold: #E0B98A; /* Main metallic gold/copper — exact brand spec */
--gold-light: #F0D0B0; /* Highlight tone */
--gold-deep: #C8A07A; /* Shadow tone */
--gold-warm: #B8906A; /* Deeper copper accent */
--cream: #F5EFE7;
--cream-soft: #FAF6F0;
--ivory: #FBF9F4;
--charcoal: #2A2A2A;
--muted: #6B6B6B;
/* Typography */
--font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
--font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
/* Layout */
--container: 1240px;
--container-narrow: 960px;
--container-text: 720px;
--radius: 2px;
--transition: 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
/* Shadows */
--shadow-soft: 0 10px 40px rgba(15, 44, 46, 0.08);
--shadow-card: 0 20px 60px rgba(15, 44, 46, 0.12);
--shadow-deep: 0 30px 80px rgba(15, 44, 46, 0.18);
}
/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video, iframe, svg {
max-width: 100%;
height: auto;
}
iframe, video { display: block; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
font-family: var(--font-body);
font-weight: 300;
font-size: 16px;
line-height: 1.7;
color: var(--charcoal);
background: var(--ivory);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* fallback for older Safari */
position: relative; /* helps iOS Safari respect overflow on body */
width: 100%;
}
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.15;
color: var(--teal-deep);
letter-spacing: 0.01em;
}
.h-display {
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 4.75rem);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.05;
}
.h-section {
font-family: var(--font-display);
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 400;
line-height: 1.1;
}
.h-sub {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 400;
}
.eyebrow {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.32em;
color: var(--gold);
display: inline-block;
}
.lede {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
font-weight: 300;
font-style: italic;
color: var(--teal-soft);
line-height: 1.55;
}
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
.text-cream { color: var(--cream); }
.text-gold { color: var(--gold); }
.text-teal { color: var(--teal-deep); }
/* ---------- Layout ---------- */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 48px;
}
@media (max-width: 900px) {
.container { padding: 0 32px; }
}
@media (max-width: 600px) {
.container { padding: 0 32px; }
}
@media (max-width: 380px) {
.container { padding: 0 24px; }
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 28px; }
.container-text { max-width: var(--container-text); margin: 0 auto; padding: 0 28px; }
section { padding: clamp(70px, 10vw, 130px) 0; position: relative; }
.section-dark { background: var(--teal-deep); color: var(--cream); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--cream); }
.section-cream { background: var(--cream-soft); }
.section-ivory { background: var(--ivory); }
/* ---------- Diamond Divider ---------- */
.divider {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin: 22px 0;
color: var(--gold);
}
.divider::before, .divider::after {
content: "";
width: 36px;
height: 1px;
background: currentColor;
opacity: 0.7;
}
.divider-diamond { font-size: 0.65rem; transform: rotate(45deg); display: inline-block; }
/* Draw-in animation — only runs when JS adds .js-ready to */
.js-ready .divider::before,
.js-ready .divider::after {
transform: scaleX(0);
transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js-ready .divider::before { transform-origin: right center; }
.js-ready .divider::after { transform-origin: left center; }
.js-ready .divider.divider-drawn::before,
.js-ready .divider.divider-drawn::after {
transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
.js-ready .divider::before,
.js-ready .divider::after {
transform: scaleX(1) !important;
transition: none !important;
}
}
.divider-line {
width: 60px;
height: 1px;
background: var(--gold);
margin: 22px auto;
opacity: 0.7;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 36px;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
transition: all var(--transition);
border: 1px solid transparent;
border-radius: var(--radius);
position: relative;
overflow: hidden;
white-space: nowrap;
}
.btn-gold {
background: var(--gold);
color: var(--teal-deep);
}
.btn-gold:hover {
background: var(--gold-deep);
color: var(--ivory);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(168, 133, 76, 0.35);
}
.btn-outline {
background: transparent;
color: var(--cream);
border-color: var(--gold);
}
.btn-outline:hover {
background: var(--gold);
color: var(--teal-deep);
}
.btn-outline-dark {
background: transparent;
color: var(--teal-deep);
border-color: var(--teal-deep);
}
.btn-outline-dark:hover {
background: var(--teal-deep);
color: var(--cream);
}
.btn-ghost {
background: transparent;
color: var(--gold);
padding: 12px 0;
border-bottom: 1px solid var(--gold);
border-radius: 0;
}
.btn-ghost:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
/* ---------- Header / Nav ---------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 18px 0;
transition: padding var(--transition), background var(--transition);
background: rgba(15, 44, 46, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.site-header.scrolled {
padding: 12px 0;
background: rgba(15, 44, 46, 0.98);
box-shadow: 0 1px 0 rgba(201, 165, 107, 0.15);
}
.nav-wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
color: var(--cream);
text-decoration: none;
}
/* Real logo image used in the header (transparent PNG) — constant size, no scroll-shrink */
.nav-brand-img {
display: block;
height: 68px;
width: auto;
max-width: 320px;
transition: opacity var(--transition);
}
.nav-brand:hover .nav-brand-img { opacity: 0.85; }
.site-header.scrolled .nav-brand-img { height: 68px; }
@media (max-width: 1100px) {
.nav-brand-img { height: 58px; }
.site-header.scrolled .nav-brand-img { height: 58px; }
}
@media (max-width: 700px) {
.nav-brand-img { height: 48px; }
.site-header.scrolled .nav-brand-img { height: 48px; }
}
/* Legacy nav-brand-mark (kept in case used elsewhere) */
.nav-brand-mark {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
}
.nav-brand-mark svg { width: 100%; height: 100%; }
.nav-brand-name {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: 0.22em;
color: var(--cream);
}
.nav-brand-name span { color: var(--gold); }
.nav-brand-sub {
display: block;
font-family: var(--font-body);
font-size: 0.6rem;
letter-spacing: 0.35em;
color: var(--gold);
margin-top: 2px;
}
/* ---------- Brand displays (logo as a hero element) ---------- */
.brand-display {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
border-radius: 4px;
}
.brand-display-hero {
max-width: 480px;
width: 100%;
}
.brand-display-compact {
max-width: 360px;
width: 100%;
}
.brand-display-small {
max-width: 260px;
width: 100%;
}
.nav-links {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
}
.nav-links a {
display: block;
padding: 9px 11px;
color: var(--cream);
font-size: 0.74rem;
font-weight: 300;
letter-spacing: 0.22em;
text-transform: uppercase;
position: relative;
opacity: 0.85;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); opacity: 1; }
.nav-links a.active::after {
content: "";
position: absolute;
bottom: 4px; left: 50%;
transform: translateX(-50%);
width: 18px; height: 1px;
background: var(--gold);
}
.nav-cta {
margin-left: 18px;
padding: 9px 18px !important;
background: var(--gold);
color: var(--teal-deep) !important;
border-radius: var(--radius);
opacity: 1 !important;
letter-spacing: 0.16em;
font-size: 0.71rem !important;
white-space: nowrap;
transition: all var(--transition);
}
.nav-cta:hover { background: var(--gold-light) !important; color: var(--teal-deep) !important; }
.nav-cta::after { display: none !important; }
.nav-toggle {
display: none;
width: 38px; height: 38px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
}
.nav-toggle span {
width: 24px; height: 1px;
background: var(--cream);
transition: all var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1100px) {
.nav-links {
position: fixed;
top: 0; right: -100%;
width: min(380px, 88vw);
height: 100vh;
height: 100dvh;
background: var(--teal-deep);
flex-direction: column;
justify-content: center;
justify-content: safe center;
align-items: stretch;
padding: 80px 40px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
transition: right 500ms cubic-bezier(0.2, 0.7, 0.2, 1);
box-shadow: -20px 0 60px rgba(0,0,0,0.3);
gap: 0;
}
.nav-links.open { right: 0; }
.nav-links a {
padding: 16px 0;
border-bottom: 1px solid rgba(201, 165, 107, 0.15);
text-align: left;
font-size: 0.85rem;
flex-shrink: 0;
}
.nav-links a.active::after { display: none; }
.nav-cta {
margin: 22px auto 0;
width: fit-content;
max-width: 100%;
padding: 13px 20px !important;
text-align: center;
white-space: nowrap;
font-size: 0.6rem !important;
letter-spacing: 0.03em;
line-height: 1.3;
flex-shrink: 0;
}
.nav-toggle { display: flex; z-index: 110; }
}
/* Short viewports (landscape phones / small windows): top-align + scroll
so the full nav list and CTA are always reachable. */
@media (max-width: 1100px) and (max-height: 640px) {
.nav-links {
justify-content: flex-start;
padding-top: 76px;
padding-bottom: 28px;
}
.nav-links a { padding: 12px 0; font-size: 0.8rem; }
.nav-cta { margin: 16px auto 0; padding: 12px 24px !important; }
}
/* ---------- Hero ---------- */
.hero {
min-height: 100vh;
position: relative;
display: flex;
align-items: center;
background: var(--teal-deep);
color: var(--cream);
padding-top: 100px;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at top right, rgba(201, 165, 107, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at bottom left, rgba(201, 165, 107, 0.08) 0%, transparent 50%),
var(--teal-deep);
}
.hero-bg::after {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.5;
mix-blend-mode: overlay;
}
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 80px;
align-items: center;
padding-top: 60px;
padding-bottom: 60px;
}
.hero-content { animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-content .eyebrow { margin-bottom: 22px; }
.hero-content h1 {
color: var(--cream);
font-size: clamp(2.5rem, 5.6vw, 4.75rem);
font-weight: 300;
line-height: 1.02;
margin-bottom: 26px;
letter-spacing: -0.005em;
}
.hero-content h1 em {
font-style: italic;
color: var(--gold);
font-weight: 400;
}
.hero-content .lede {
color: rgba(245, 239, 231, 0.85);
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
max-width: 520px;
margin-bottom: 38px;
}
.hero-ctas {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin-bottom: 50px;
}
.hero-trust {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 32px;
padding-top: 30px;
border-top: 1px solid rgba(224, 185, 138, 0.2);
max-width: 520px;
}
.hero-trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.8rem;
letter-spacing: 0.05em;
color: rgba(245, 239, 231, 0.78);
}
.hero-trust-item::before {
content: "◆";
color: var(--gold);
font-size: 0.55rem;
flex-shrink: 0;
}
@media (max-width: 500px) {
.hero-trust { grid-template-columns: 1fr; gap: 14px; }
}
.hero-visual {
position: relative;
animation: fadeUp 1.2s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-portrait {
position: relative;
aspect-ratio: 4/5;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
}
.hero-portrait img {
width: 100%; height: 100%; object-fit: contain;
}
.hero-portrait-placeholder {
text-align: center;
padding: 40px;
color: rgba(245, 239, 231, 0.6);
}
.hero-portrait-placeholder svg {
width: 70%; max-width: 220px;
margin: 0 auto 18px;
opacity: 0.85;
}
.hero-portrait-placeholder p {
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
color: rgba(245, 239, 231, 0.55);
}
.hero-badge {
position: absolute;
bottom: -30px; left: -30px;
width: 150px; height: 150px;
background: var(--gold);
color: var(--teal-deep);
border-radius: 50%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 22px;
box-shadow: var(--shadow-deep);
transform: rotate(-8deg);
}
.hero-badge-num {
font-family: var(--font-display);
font-size: 2.4rem;
line-height: 1;
font-weight: 500;
}
.hero-badge-text {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
margin-top: 6px;
line-height: 1.3;
}
@media (max-width: 900px) {
.hero { padding-top: 110px; min-height: auto; }
.hero-grid { grid-template-columns: 1fr; gap: 50px; }
.hero-visual { max-width: 440px; margin: 0 auto; width: 100%; }
.hero-badge { width: 120px; height: 120px; bottom: -20px; left: -10px; }
.hero-badge-num { font-size: 1.8rem; }
}
/* ---------- Hero — Centred Logo-Led (Option A) ---------- */
.hero.hero-centered {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 140px 30px 100px;
position: relative;
}
.hero.hero-centered::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 50% at 50% 30%,
rgba(224, 185, 138, 0.10), transparent 70%);
pointer-events: none;
z-index: 1;
}
.hero-centered-inner {
position: relative;
z-index: 3;
max-width: 820px;
margin: 0 auto;
}
.hero-centered-logo {
display: block;
width: 100%;
max-width: 280px;
height: auto;
margin: 0 auto 38px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-centered-eyebrow {
display: block;
margin-bottom: 28px;
color: var(--gold);
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}
.hero-centered-h1 {
color: var(--cream);
font-size: clamp(2.4rem, 5.4vw, 4.4rem);
font-weight: 300;
line-height: 1.06;
margin-bottom: 30px;
letter-spacing: -0.005em;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
.hero-centered-h1 em {
font-style: italic;
color: var(--gold-light);
font-weight: 400;
}
.hero-centered-lede {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.7;
color: rgba(245, 239, 231, 0.85);
max-width: 640px;
margin: 0 auto 40px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}
.hero-centered-lede em {
font-style: italic;
color: var(--gold-light);
}
.hero-centered-ctas {
justify-content: center;
margin-bottom: 0;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}
@media (max-width: 700px) {
.hero.hero-centered { padding: 130px 22px 80px; }
.hero-centered-logo { max-width: 220px; margin-bottom: 30px; }
.hero-centered-eyebrow { margin-bottom: 22px; font-size: 0.68rem; }
.hero-centered-h1 { margin-bottom: 22px; }
.hero-centered-lede { font-size: 1rem; margin-bottom: 30px; }
}
/* ---------- Hero — Editorial Tagline-Led (Option D) ---------- */
.hero.hero-editorial {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 150px 30px 110px;
position: relative;
}
.hero.hero-editorial::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(224, 185, 138, 0.07), transparent 50%),
radial-gradient(circle at 85% 80%, rgba(224, 185, 138, 0.05), transparent 50%);
pointer-events: none;
z-index: 1;
}
.hero-editorial-inner {
position: relative;
z-index: 3;
max-width: 880px;
margin: 0 auto;
}
.hero-editorial-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 50px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}
.hero-editorial-tagline {
font-family: var(--font-display);
font-size: clamp(2.6rem, 7vw, 5.2rem);
font-weight: 300;
color: var(--cream);
letter-spacing: -0.015em;
line-height: 1.04;
margin: 0 0 44px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
.hero-editorial-tagline em {
font-style: italic;
color: var(--gold-light);
font-weight: 400;
}
.hero-editorial-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 36px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}
.hero-editorial-rule-line {
width: 60px;
height: 1px;
background: var(--gold);
opacity: 0.6;
}
.hero-editorial-rule-diamond {
color: var(--gold);
font-size: 0.6rem;
}
.hero-editorial-body {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
line-height: 1.7;
color: rgba(245, 239, 231, 0.82);
max-width: 660px;
margin: 0 auto 46px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}
.hero-editorial-body em {
font-style: italic;
color: var(--gold-light);
}
.hero-editorial-ctas {
justify-content: center;
margin-bottom: 68px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}
.hero-editorial-logo {
display: block;
width: 100%;
max-width: 100px;
height: auto;
margin: 0 auto;
opacity: 0.8;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
}
@media (max-width: 700px) {
.hero.hero-editorial { padding: 130px 22px 80px; }
.hero-editorial-eyebrow { margin-bottom: 32px; font-size: 0.68rem; letter-spacing: 0.32em; }
.hero-editorial-tagline { margin-bottom: 32px; }
.hero-editorial-rule { margin-bottom: 26px; }
.hero-editorial-body { font-size: 1rem; margin-bottom: 36px; }
.hero-editorial-ctas { margin-bottom: 50px; }
.hero-editorial-logo { max-width: 85px; }
}
/* ---------- Hero — Blended (Option B: A + D stacked, logo centrepiece) ---------- */
.hero.hero-blended {
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
padding: 140px 30px 30px;
position: relative;
min-height: auto;
overflow: hidden;
}
.hero.hero-blended::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 45% at 50% 38%, rgba(224, 185, 138, 0.08), transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 80%, rgba(224, 185, 138, 0.04), transparent 70%);
pointer-events: none;
z-index: 1;
}
/* Large subtle tree watermark — sits behind hero content.
Dark variant uses dark-source tree (edges feather to teal — no halo).
Positioned with explicit top + height so:
• Top clears the fixed header
• Base sits ABOVE the body paragraph "A Leeds clinic led by..."
`background-position: center bottom` anchors the tree's roots
to the bottom of the positioning box. */
.hero.hero-blended::after {
content: "";
position: absolute;
top: 128px;
height: 380px;
left: 50%;
transform: translateX(-50%);
width: clamp(220px, 50vw, 580px);
background-image: url('assets/tree-watermark-dark.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center bottom;
opacity: 0.22;
pointer-events: none;
z-index: 2;
}
.hero-blended-inner {
position: relative;
z-index: 3;
max-width: 820px;
margin: 0 auto;
}
/* Eyebrow — Nurse-led aesthetics · An aesthetics practitioner since 2007 */
.hero-blended-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 22px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
/* Main headline */
.hero-blended-h1 {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 300;
line-height: 1.04;
color: var(--cream);
letter-spacing: -0.005em;
margin-bottom: 32px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}
.hero-blended-h1 em {
font-style: italic;
color: var(--gold-light);
font-weight: 400;
}
/* Large blended logo — centrepiece (true alpha transparency) */
.hero-blended-logo {
display: block;
width: 100%;
max-width: 160px;
height: auto;
margin: 0 auto 32px;
animation: fadeUp 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
/* Tagline — smaller than h1 (clearly secondary) */
.hero-blended-tagline {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.3rem);
font-weight: 300;
line-height: 1.06;
color: var(--cream);
letter-spacing: -0.005em;
margin: 0 0 18px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both;
}
.hero-blended-tagline em {
font-style: italic;
color: var(--gold-light);
font-weight: 400;
}
/* Diamond rule */
.hero-blended-rule {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 22px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}
.hero-blended-rule-line {
width: 50px;
height: 1px;
background: var(--gold);
opacity: 0.6;
}
.hero-blended-rule-diamond {
color: var(--gold);
font-size: 0.55rem;
}
/* Body — italic serif, two paragraphs */
.hero-blended-body {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.08rem, 1.45vw, 1.22rem);
line-height: 1.5;
color: rgba(245, 239, 231, 0.85);
max-width: 640px;
margin: 0 auto 14px;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both;
}
.hero-blended-body em {
font-style: italic;
color: var(--gold-light);
}
/* Second body paragraph — slightly more emphasis, more space below */
.hero-blended-body-second {
margin-bottom: 32px;
color: rgba(245, 239, 231, 0.9);
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both;
}
/* CTAs */
.hero-blended-ctas {
justify-content: center;
margin-bottom: 0;
animation: fadeUp 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
}
@media (max-width: 700px) {
.hero.hero-blended { padding: 96px 22px 28px; }
.hero-blended-eyebrow { margin-bottom: 18px; font-size: 0.66rem; letter-spacing: 0.26em; }
.hero-blended-h1 { margin-bottom: 26px; }
.hero-blended-logo { max-width: 130px; margin-bottom: 26px; }
.hero-blended-tagline { margin-bottom: 14px; }
.hero-blended-rule { margin-bottom: 18px; }
.hero-blended-body { font-size: 0.96rem; margin-bottom: 12px; }
.hero-blended-body-second { margin-bottom: 26px; }
/* Tree watermark sized for narrower mobile heroes */
.hero.hero-blended::after {
top: 96px;
height: 280px;
width: clamp(200px, 60vw, 360px);
}
.hero.hero-blended.hero-light::after {
top: 96px;
height: 320px;
width: clamp(240px, 70vw, 440px);
}
}
/* ===== Light-bg variant of blended hero — cream background, dark text ===== */
/* Apply to */
.hero.hero-blended.hero-light {
background: var(--cream-soft);
color: var(--teal-deep);
}
.hero.hero-blended.hero-light .hero-bg { display: none; }
.hero.hero-blended.hero-light::before {
background:
radial-gradient(ellipse 70% 45% at 50% 38%, rgba(200, 160, 122, 0.10), transparent 70%),
radial-gradient(ellipse 60% 40% at 50% 80%, rgba(200, 160, 122, 0.06), transparent 70%);
}
.hero.hero-blended.hero-light::after {
/* Cream variant — tree base sits MARGINALLY ABOVE the
"Considered care, exquisite results" tagline (around y=513 on cream).
Top pulled up to ~110px (just below the fixed header), giving the
tree max usable vertical space (~395-400px). Width clamp goes wider
and opacity bumped slightly so the tree reads more prominently. */
background-image: url('assets/tree-watermark.png');
width: clamp(280px, 78vw, 940px);
height: 395px;
top: 110px;
opacity: 0.18;
}
.hero.hero-blended.hero-light .hero-blended-h1 {
color: var(--teal-deep);
font-weight: 600;
}
.hero.hero-blended.hero-light .hero-blended-h1 em {
color: var(--gold-deep);
font-weight: 500;
}
.hero.hero-blended.hero-light .hero-blended-tagline {
color: var(--teal-deep);
font-weight: 600;
}
.hero.hero-blended.hero-light .hero-blended-tagline em {
color: var(--gold-deep);
}
.hero.hero-blended.hero-light .hero-blended-rule-line {
background: var(--gold-deep);
opacity: 0.55;
}
.hero.hero-blended.hero-light .hero-blended-rule-diamond {
color: var(--gold-deep);
}
/* Body text on cream — sans-serif medium for readability */
.hero.hero-blended.hero-light .hero-blended-body {
color: var(--teal-deep);
font-style: normal;
font-weight: 500;
font-family: 'Outfit', sans-serif;
font-size: clamp(1.05rem, 1.4vw, 1.18rem);
line-height: 1.55;
margin-bottom: 10px;
}
.hero.hero-blended.hero-light .hero-blended-body em {
font-style: italic;
font-weight: 500;
color: var(--teal-deep);
}
.hero.hero-blended.hero-light .hero-blended-body-second {
color: var(--teal-deep);
font-style: normal;
font-weight: 600;
font-family: 'Outfit', sans-serif;
margin-bottom: 22px;
}
/* Tighten cream-hero spacing so trustbar appears above the fold */
.hero.hero-blended.hero-light {
padding-top: 116px;
padding-bottom: 18px;
}
.hero.hero-blended.hero-light .hero-blended-h1 {
margin-bottom: 26px;
}
.hero.hero-blended.hero-light .hero-blended-logo {
max-width: 200px;
margin-bottom: 26px;
}
.hero.hero-blended.hero-light .hero-blended-tagline {
margin-bottom: 14px;
}
.hero.hero-blended.hero-light .hero-blended-rule {
margin-bottom: 18px;
}
/* The Explore Treatments outline button needs darker styling on cream */
.hero.hero-blended.hero-light .btn-outline {
color: var(--teal-deep);
border-color: var(--teal-deep);
}
.hero.hero-blended.hero-light .btn-outline:hover {
background: var(--teal-deep);
color: var(--cream);
}
/* ---------- Trust Bar ---------- */
.trustbar {
background: var(--teal-rich);
padding: 26px 0;
border-top: 1px solid rgba(201, 165, 107, 0.15);
border-bottom: 1px solid rgba(201, 165, 107, 0.15);
}
.trustbar-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px 44px;
text-align: center;
}
.trustbar-item {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
display: flex;
align-items: center;
gap: 14px;
}
.trustbar-item::before {
content: "◆";
color: var(--gold);
font-size: 0.5rem;
}
/* All items show the diamond — including the first */
.trustbar-item:first-child::before { display: inline-block; }
/* ---------- Section Header ---------- */
.section-header { text-align: center; max-width: 720px; margin: 0 auto 70px; }
.section-header .eyebrow { margin-bottom: 16px; }
.section-header h2 { margin-bottom: 20px; }
.section-header .lede { margin: 0 auto; max-width: 580px; }
/* ---------- About Preview / Cards ---------- */
.about-preview {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 80px;
align-items: center;
}
.about-preview-img {
position: relative;
aspect-ratio: 4/5;
background:
linear-gradient(135deg, rgba(15, 44, 46, 0.08), transparent),
var(--cream);
border-radius: 4px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
border: 1px solid rgba(15, 44, 46, 0.08);
}
.about-preview-img img { width: 100%; height: 100%; object-fit: cover; }
.about-preview-img .placeholder { padding: 50px; text-align: center; color: var(--muted); }
.about-preview-img .placeholder svg { width: 60%; max-width: 180px; margin: 0 auto 16px; }
.about-preview-img .placeholder p { font-family: var(--font-display); font-style: italic; }
.about-preview-content .signature {
font-family: var(--font-display);
font-style: italic;
font-size: 1.4rem;
color: var(--gold);
margin-top: 26px;
}
@media (max-width: 900px) {
.about-preview { grid-template-columns: 1fr; gap: 50px; }
.about-preview-img { max-width: 420px; margin: 0 auto; }
}
/* ---------- Treatment cards grid ---------- */
.treatments-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.treatment-card {
background: var(--cream-soft);
padding: 44px 32px;
border-radius: 4px;
text-align: center;
transition: all var(--transition);
border: 1px solid rgba(15, 44, 46, 0.06);
position: relative;
overflow: hidden;
display: block;
color: inherit;
text-decoration: none;
cursor: pointer;
}
.treatment-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0;
transition: opacity var(--transition);
}
.treatment-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-card);
background: var(--ivory);
}
.treatment-card:hover::before { opacity: 1; }
.treatment-card-icon {
width: 56px; height: 56px;
margin: 0 auto 22px;
color: var(--gold);
}
.treatment-card h3 {
font-size: 1.5rem;
margin-bottom: 12px;
color: var(--teal-deep);
}
.treatment-card p {
font-size: 0.94rem;
color: var(--muted);
margin-bottom: 22px;
line-height: 1.6;
}
.treatment-card .price {
display: inline-block;
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--gold);
font-style: italic;
}
/* ---------- Why Choose Us ---------- */
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 50px;
}
.why-item { text-align: center; }
.why-item-num {
display: inline-block;
font-family: var(--font-display);
font-size: 0.9rem;
font-style: italic;
color: var(--gold);
margin-bottom: 14px;
letter-spacing: 0.1em;
}
.why-item h3 {
font-size: 1.5rem;
margin-bottom: 14px;
color: var(--cream);
}
.why-item p {
font-size: 0.95rem;
color: rgba(245, 239, 231, 0.75);
line-height: 1.7;
}
.why-item-icon {
width: 64px; height: 64px;
margin: 0 auto 22px;
color: var(--gold);
}
/* ---------- Testimonials ---------- */
.testimonial-carousel {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.testimonial-slides { position: relative; min-height: 280px; }
.testimonial-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 600ms ease;
text-align: center;
padding: 0 20px;
}
.testimonial-slide.active { opacity: 1; position: relative; }
.testimonial-stars {
color: var(--gold);
font-size: 1.1rem;
letter-spacing: 0.3em;
margin-bottom: 28px;
}
.testimonial-quote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.3rem, 2.4vw, 1.85rem);
font-weight: 300;
line-height: 1.5;
color: var(--teal-deep);
margin-bottom: 36px;
}
.testimonial-author {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
}
.testimonial-author span {
display: block;
margin-top: 6px;
font-size: 0.7rem;
color: var(--muted);
letter-spacing: 0.18em;
font-style: normal;
}
.carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 40px;
}
.carousel-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(201, 165, 107, 0.3);
cursor: pointer;
transition: all var(--transition);
}
.carousel-dot.active { background: var(--gold); transform: scale(1.3); }
/* ---------- Gallery teaser ---------- */
.gallery-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
margin-top: 50px;
}
.gallery-strip-item {
aspect-ratio: 1;
background: var(--teal-soft);
position: relative;
overflow: hidden;
border-radius: 2px;
cursor: pointer;
display: block;
text-decoration: none;
}
.gallery-strip-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms ease; }
.gallery-strip-item:hover img { transform: scale(1.05); }
.gallery-strip-label {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 18px 14px;
color: var(--cream);
font-family: var(--font-display);
font-style: italic;
font-size: 1rem;
text-align: center;
background: linear-gradient(to top, rgba(15, 44, 46, 0.78) 0%, rgba(15, 44, 46, 0.0) 50%);
pointer-events: none;
letter-spacing: 0.02em;
}
.gallery-strip-placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: var(--gold);
font-family: var(--font-display);
font-style: italic;
font-size: 0.9rem;
background: linear-gradient(135deg, var(--teal-deep), var(--teal-soft));
}
@media (max-width: 700px) {
.gallery-strip { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Final CTA ---------- */
.final-cta {
background: var(--teal-deep);
color: var(--cream);
text-align: center;
padding: clamp(80px, 12vw, 140px) 0;
position: relative;
overflow: hidden;
}
.final-cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(201, 165, 107, 0.1) 0%, transparent 60%);
}
.final-cta-content { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; padding: 0 28px; }
.final-cta h2 {
color: var(--cream);
font-size: clamp(2.2rem, 4.5vw, 3.5rem);
margin-bottom: 22px;
}
.final-cta h2 em { color: var(--gold); font-style: italic; }
.final-cta p {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
color: rgba(245, 239, 231, 0.85);
margin-bottom: 38px;
line-height: 1.6;
}
.final-cta-actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
/* ---------- Footer ---------- */
.site-footer {
background: #081f1f;
color: rgba(245, 239, 231, 0.7);
padding: 80px 0 30px;
position: relative;
}
.site-footer::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80px; height: 1px;
background: var(--gold);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 50px;
margin-bottom: 50px;
}
.footer-brand h3 {
font-family: var(--font-display);
font-size: 1.7rem;
color: var(--gold);
letter-spacing: 0.15em;
margin-bottom: 8px;
}
.footer-brand h3 span { color: var(--gold); }
.footer-brand .footer-sub {
font-size: 0.65rem;
letter-spacing: 0.35em;
color: var(--gold);
margin-bottom: 18px;
}
.footer-brand p {
font-size: 0.9rem;
line-height: 1.7;
color: rgba(245, 239, 231, 0.6);
}
.footer-col h4 {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 22px;
font-weight: 500;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 11px; }
.footer-col a {
font-size: 0.9rem;
color: rgba(245, 239, 231, 0.7);
transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold); }
.footer-contact-line {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
font-size: 0.9rem;
color: rgba(245, 239, 231, 0.75);
}
.footer-contact-line svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.footer-social { display: flex; gap: 12px; margin-top: 18px; }
.footer-social a {
width: 38px; height: 38px;
border: 1px solid rgba(201, 165, 107, 0.3);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--gold);
transition: all var(--transition);
}
.footer-social a:hover {
background: var(--gold);
color: var(--teal-deep);
border-color: var(--gold);
}
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
padding-top: 30px;
border-top: 1px solid rgba(201, 165, 107, 0.12);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
font-size: 0.8rem;
color: rgba(245, 239, 231, 0.5);
}
.footer-bottom a { margin-left: 16px; }
@media (max-width: 900px) {
.footer-grid {
grid-template-columns: 1.2fr 1fr;
column-gap: clamp(90px, 16vw, 160px);
row-gap: 48px;
}
}
@media (max-width: 680px) {
.footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
.footer-bottom { text-align: center; flex-direction: column; }
}
/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
background: var(--teal-deep);
color: var(--cream);
padding: 200px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at top, rgba(201, 165, 107, 0.1) 0%, transparent 60%);
}
.page-hero-content { position: relative; z-index: 2; }
.page-hero h1 {
color: var(--cream);
font-size: clamp(2.5rem, 5vw, 4.25rem);
font-weight: 300;
margin-bottom: 18px;
letter-spacing: -0.005em;
}
.page-hero h1 em { color: var(--gold); font-style: italic; }
.page-hero p {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.1rem, 1.6vw, 1.3rem);
color: rgba(245, 239, 231, 0.8);
max-width: 640px;
margin: 0 auto;
}
/* Page-hero padding tightened on mobile — 200px top wastes huge screen space */
@media (max-width: 900px) {
.page-hero { padding: 140px 0 70px; }
}
@media (max-width: 600px) {
.page-hero { padding: 120px 0 56px; }
}
/* ---------- About page content ---------- */
.about-hero {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 80px;
align-items: center;
}
@media (max-width: 900px) {
.about-hero { grid-template-columns: 1fr; gap: 50px; }
.about-hero-img { max-width: 420px; margin: 0 auto; }
}
.about-hero-img {
aspect-ratio: 4/5;
background: var(--cream);
border-radius: 4px;
overflow: hidden;
position: relative;
border: 1px solid rgba(15, 44, 46, 0.08);
}
.about-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-img .placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 40px;
text-align: center;
color: var(--muted);
}
.about-body p {
font-size: 1.06rem;
line-height: 1.8;
color: var(--charcoal);
margin-bottom: 22px;
}
.about-body p.lede {
font-family: var(--font-display);
font-size: 1.4rem;
font-style: italic;
color: var(--teal-deep);
margin-bottom: 30px;
line-height: 1.45;
}
.about-signature {
margin-top: 30px;
font-family: var(--font-display);
font-style: italic;
font-size: 1.6rem;
color: var(--gold);
}
/* Credentials cards — 3 per row on desktop, responsive on smaller screens */
.credentials {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 60px;
}
@media (max-width: 900px) {
.credentials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.credentials { grid-template-columns: 1fr; }
}
.credential {
text-align: center;
padding: 36px 24px;
background: var(--cream-soft);
border-radius: 4px;
border-top: 2px solid var(--gold);
}
.credential-icon {
width: 48px; height: 48px;
margin: 0 auto 18px;
color: var(--gold);
}
.credential h4 {
font-size: 1.2rem;
margin-bottom: 8px;
color: var(--teal-deep);
}
.credential p {
font-size: 0.88rem;
color: var(--muted);
margin: 0;
line-height: 1.6;
}
/* ---------- Ethos page ---------- */
.ethos-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 80px;
margin-top: 70px;
}
.ethos-item {
position: relative;
padding-left: 110px;
min-height: 60px;
}
.ethos-item-num {
position: absolute;
left: 0; top: 4px;
width: 90px;
font-family: var(--font-display);
font-style: italic;
font-size: 2.4rem;
color: var(--gold);
line-height: 1;
text-align: left;
white-space: nowrap;
letter-spacing: -0.01em;
}
.ethos-item h3 {
font-size: 1.6rem;
margin-bottom: 12px;
color: var(--teal-deep);
line-height: 1.25;
}
.ethos-item p {
font-size: 0.98rem;
line-height: 1.75;
color: var(--muted);
}
@media (max-width: 800px) {
.ethos-grid { grid-template-columns: 1fr; gap: 50px; }
.ethos-item { padding-left: 95px; }
.ethos-item-num { font-size: 2.1rem; width: 78px; }
}
/* ---------- Treatments page ---------- */
.treatment-tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-bottom: 60px;
border-bottom: 1px solid rgba(201, 165, 107, 0.2);
padding-bottom: 14px;
}
.treatment-tab {
padding: 12px 22px;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
background: none;
border: none;
cursor: pointer;
position: relative;
transition: color var(--transition);
}
.treatment-tab:hover { color: var(--teal-deep); }
.treatment-tab.active { color: var(--gold-deep); }
.treatment-tab.active::after {
content: "";
position: absolute;
bottom: -15px; left: 50%;
transform: translateX(-50%);
width: 28px; height: 2px;
background: var(--gold);
}
.treatment-panel {
display: none;
animation: fadeUp 600ms ease;
}
.treatment-panel.active { display: block; }
.treatment-category {
margin-bottom: 60px;
}
.treatment-category h2 {
font-size: clamp(1.8rem, 3vw, 2.4rem);
margin-bottom: 8px;
}
.treatment-category-desc {
font-family: var(--font-display);
font-style: italic;
font-size: 1.1rem;
color: var(--muted);
margin-bottom: 30px;
}
/* Richer treatment description block + benefits */
.treatment-intro {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 50px;
margin-bottom: 40px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(15, 44, 46, 0.08);
align-items: start;
}
@media (max-width: 800px) {
.treatment-intro { grid-template-columns: 1fr; gap: 32px; }
}
.treatment-about p {
font-size: 1rem;
line-height: 1.8;
color: var(--charcoal);
margin-bottom: 14px;
}
.treatment-about p:last-child { margin-bottom: 0; }
.treatment-benefits {
background: var(--cream-soft);
padding: 28px 30px;
border-radius: 4px;
border-left: 3px solid var(--gold);
}
.treatment-benefits h4 {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 16px;
font-weight: 500;
}
.treatment-benefits ul {
list-style: none;
padding: 0;
margin: 0;
}
.treatment-benefits li {
position: relative;
padding-left: 22px;
padding-bottom: 11px;
font-size: 0.95rem;
line-height: 1.55;
color: var(--charcoal);
}
.treatment-benefits li:last-child { padding-bottom: 0; }
.treatment-benefits li::before {
content: "◆";
position: absolute;
left: 0;
top: 2px;
color: var(--gold);
font-size: 0.55rem;
}
.treatment-list {
display: grid;
gap: 0;
}
.treatment-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
padding: 22px 0;
border-bottom: 1px dashed rgba(15, 44, 46, 0.12);
align-items: baseline;
}
.treatment-row:last-child { border-bottom: none; }
.treatment-row-name {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 600;
color: var(--teal-deep);
letter-spacing: -0.005em;
}
.treatment-row-desc {
display: block;
font-family: var(--font-body);
font-size: 0.92rem;
font-style: normal;
font-weight: 400;
color: var(--charcoal);
margin-top: 4px;
line-height: 1.5;
}
.treatment-row-price {
font-family: var(--font-display);
font-size: 1.55rem;
font-weight: 600;
color: var(--gold-deep);
white-space: nowrap;
}
.treatment-row-price small {
font-size: 0.78rem;
font-weight: 400;
font-style: italic;
color: var(--muted);
margin-right: 4px;
}
@media (max-width: 600px) {
.treatment-row { padding: 20px 0; gap: 20px; }
.treatment-row-name { font-size: 1.2rem; }
.treatment-row-price { font-size: 1.35rem; }
.treatment-row-desc { font-size: 0.88rem; }
}
/* ---------- Laser pricing rows (dual price — single + course of 6) ---------- */
.laser-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
padding: 18px 0;
border-bottom: 1px dashed rgba(15, 44, 46, 0.12);
align-items: center;
}
.laser-row:last-child { border-bottom: none; }
.laser-row-name {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 600;
color: var(--teal-deep);
letter-spacing: -0.005em;
line-height: 1.3;
}
.laser-row-sub {
display: block;
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 400;
font-style: italic;
color: var(--muted);
margin-top: 2px;
letter-spacing: 0;
}
.laser-row-prices {
display: flex;
gap: 30px;
align-items: baseline;
}
.laser-price-pair {
text-align: right;
min-width: 90px;
}
.laser-price-label {
display: block;
font-family: var(--font-body);
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
font-weight: 500;
}
.laser-price-amount {
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 600;
color: var(--gold-deep);
white-space: nowrap;
}
@media (max-width: 600px) {
.laser-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 20px 0;
}
.laser-row-name { font-size: 1.15rem; }
.laser-row-prices {
justify-content: flex-start;
gap: 28px;
margin-top: 4px;
}
.laser-price-pair { text-align: left; min-width: 0; }
.laser-price-amount { font-size: 1.2rem; }
}
.treatment-info-box {
background: var(--cream-soft);
padding: 36px;
border-radius: 4px;
margin-top: 30px;
border-left: 3px solid var(--gold);
}
.treatment-info-box h4 {
font-size: 1.1rem;
margin-bottom: 10px;
color: var(--teal-deep);
}
.treatment-info-box p {
font-size: 0.92rem;
color: var(--muted);
margin-bottom: 12px;
line-height: 1.7;
}
.treatment-info-box ul {
list-style: none;
padding: 0;
margin-top: 10px;
}
.treatment-info-box li {
position: relative;
padding-left: 22px;
margin-bottom: 8px;
font-size: 0.92rem;
color: var(--charcoal);
}
.treatment-info-box li::before {
content: "◆";
position: absolute;
left: 0; top: 0;
color: var(--gold);
font-size: 0.55rem;
top: 8px;
}
/* ---------- Testimonials Page Grid ---------- */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 30px;
}
.testimonial-card {
background: var(--cream-soft);
padding: 40px 34px;
border-radius: 4px;
border-top: 3px solid var(--gold);
position: relative;
transition: var(--transition-card);
}
@media (max-width: 600px) {
.testimonial-card { padding: 30px 22px; }
}
transition: all var(--transition);
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}
.testimonial-card-stars {
color: var(--gold);
font-size: 0.9rem;
letter-spacing: 0.25em;
margin-bottom: 18px;
}
.testimonial-card-quote {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
line-height: 1.6;
color: var(--teal-deep);
margin-bottom: 26px;
}
.testimonial-card-meta {
display: flex;
align-items: center;
gap: 14px;
padding-top: 18px;
border-top: 1px solid rgba(15, 44, 46, 0.08);
}
.testimonial-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--gold);
color: var(--teal-deep);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 500;
flex-shrink: 0;
}
.testimonial-card-author {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
color: var(--teal-deep);
}
.testimonial-card-treatment {
display: block;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
margin-top: 2px;
}
/* ---------- Booking page — path choice cards ---------- */
.path-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 30px;
max-width: 880px;
margin: 0 auto;
}
.path-card {
position: relative;
background: var(--ivory);
border: 1px solid rgba(15, 44, 46, 0.08);
border-radius: 6px;
padding: 44px 36px;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
transition: var(--transition-card);
cursor: pointer;
min-width: 0;
}
.path-card:hover {
transform: translateY(-4px);
border-color: rgba(200, 160, 122, 0.4);
box-shadow: 0 14px 36px rgba(15, 44, 46, 0.09);
}
.path-card-featured {
background: var(--teal-deep);
border-color: var(--teal-deep);
}
.path-card-featured:hover {
border-color: var(--gold);
box-shadow: 0 14px 36px rgba(15, 44, 46, 0.18);
}
.path-card-badge {
position: absolute;
top: 18px;
right: 18px;
background: var(--gold);
color: var(--teal-deep);
font-family: var(--font-body);
font-size: 0.65rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 30px;
font-weight: 500;
}
.path-card-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(200, 160, 122, 0.12);
border: 1px solid rgba(200, 160, 122, 0.35);
display: flex; align-items: center; justify-content: center;
margin-bottom: 22px;
color: var(--gold-deep);
}
.path-card-featured .path-card-icon {
background: rgba(224, 185, 138, 0.15);
border-color: rgba(224, 185, 138, 0.4);
color: var(--gold);
}
.path-card-icon svg { width: 26px; height: 26px; }
.path-card-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 10px;
}
.path-card-featured .path-card-eyebrow { color: var(--gold); }
.path-card-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
color: var(--teal-deep);
margin: 0 0 14px 0;
line-height: 1.25;
}
.path-card-featured .path-card-title { color: var(--cream); }
.path-card-text {
color: var(--muted);
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 24px 0;
flex: 1;
}
.path-card-featured .path-card-text { color: rgba(245, 239, 231, 0.78); }
.path-card-cta {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
transition: gap var(--transition);
}
.path-card-featured .path-card-cta { color: var(--gold); }
.path-card:hover .path-card-cta { gap: 14px; }
/* Trust signals row inside the featured (dark teal) path card */
.path-card-reassure {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 10px;
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid rgba(224, 185, 138, 0.18);
font-family: var(--font-body);
font-size: 0.78rem;
line-height: 1.5;
color: rgba(245, 239, 231, 0.7);
}
.path-card-reassure span[aria-hidden] {
color: var(--gold-deep);
}
@media (max-width: 600px) {
.path-card { padding: 36px 26px; }
.path-card-title { font-size: 1.3rem; }
.path-card-reassure {
font-size: 0.72rem;
margin-top: 18px;
padding-top: 14px;
}
}
/* ---------- LeadConnector booking widget (live frame) ---------- */
.lc-frame {
position: relative;
background: var(--ivory);
border: 1px solid rgba(15, 44, 46, 0.08);
border-radius: 6px;
box-shadow: 0 14px 40px rgba(15, 44, 46, 0.08);
min-height: 1150px;
max-width: 920px;
margin: 0 auto;
}
/* Gold accent rail across the top edge */
.lc-frame::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
z-index: 2;
}
.lc-frame iframe {
display: block;
width: 100%;
min-height: 1150px;
height: 1150px;
background: var(--ivory);
position: relative;
z-index: 1;
}
@media (max-width: 600px) {
.lc-frame, .lc-frame iframe { min-height: 1280px; height: 1280px; }
}
/* Once iframe load fires, hide the loading placeholder explicitly */
.lc-frame.iframe-loaded .lc-frame-loading {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
/* Loading placeholder sits behind the iframe — visible while iframe content streams in,
then naturally hidden once the iframe paints its own background on top. */
.lc-frame-loading {
position: absolute;
inset: 0;
z-index: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
color: var(--gold-deep);
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.2em;
text-transform: uppercase;
background: var(--ivory);
pointer-events: none;
}
.lc-frame-spinner {
width: 34px; height: 34px;
border-radius: 50%;
border: 2px solid rgba(200, 160, 122, 0.18);
border-top-color: var(--gold-deep);
animation: lc-spin 0.9s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.lc-frame-spinner { animation: none; border-top-color: var(--gold-deep); }
}
/* ---------- LeadConnector booking widget mockup ---------- */
.lc-wrap {
max-width: 920px;
margin: 0 auto;
}
/* ---------- Desktop / Mobile split for LC service-menu widget ---------- */
/* CTA opens LC's full-screen widget in a new tab — used on ALL device sizes.
We dropped the embedded iframe approach entirely to avoid the iframe-in-iframe
scroll and layout conflicts with LC's mobile widget. */
.lc-cta {
background: var(--ivory) !important;
border: 1px solid rgba(15, 44, 46, 0.08) !important;
border-top: 3px solid var(--gold-deep) !important;
border-radius: 6px !important;
box-shadow: 0 14px 40px rgba(15, 44, 46, 0.08) !important;
padding: 48px 36px !important;
text-align: center !important;
max-width: 540px !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.lc-cta h3 {
font-family: var(--font-display);
font-size: 1.85rem;
color: var(--teal-deep);
margin: 0 0 14px 0;
line-height: 1.2;
}
.lc-cta > p {
font-size: 0.98rem;
line-height: 1.6;
color: var(--muted);
margin: 0 0 26px 0;
}
.lc-cta-btn {
display: inline-block;
width: 100%;
padding: 14px 20px;
margin-bottom: 22px;
letter-spacing: 0.08em !important;
white-space: normal !important;
box-sizing: border-box;
}
.lc-cta-reassure {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 10px;
font-size: 0.82rem;
color: var(--muted);
margin-bottom: 24px;
line-height: 1.5;
}
.lc-cta-reassure span[aria-hidden] {
color: var(--gold-deep);
}
.lc-cta-subtitle {
font-size: 0.84rem;
line-height: 1.5;
color: var(--muted);
margin: 0;
padding-top: 20px;
border-top: 1px solid rgba(15, 44, 46, 0.08);
}
.lc-cta-subtitle a {
color: var(--gold-deep);
border-bottom: 1px solid var(--gold);
}
@media (max-width: 700px) {
.lc-cta {
padding: 38px 28px;
max-width: 460px;
}
.lc-cta h3 {
font-size: 1.65rem;
}
.lc-cta > p {
font-size: 0.95rem;
}
}
.lc-preview-ribbon {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(200, 160, 122, 0.14);
border: 1px dashed rgba(200, 160, 122, 0.5);
color: var(--gold-deep);
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.04em;
padding: 12px 20px;
border-radius: 4px 4px 0 0;
font-style: italic;
}
.lc-mock {
background: #ffffff;
border: 1px solid rgba(15, 44, 46, 0.1);
border-radius: 0 0 6px 6px;
overflow: hidden;
box-shadow: 0 14px 40px rgba(15, 44, 46, 0.08);
}
.lc-mock-header {
padding: 22px 30px;
border-bottom: 1px solid rgba(15, 44, 46, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 18px;
background: var(--cream-soft);
}
.lc-mock-brand { display: flex; align-items: center; gap: 14px; }
.lc-mock-logo {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--teal-deep);
color: var(--gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 500;
}
.lc-mock-brand-name {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--teal-deep);
font-weight: 500;
}
.lc-mock-brand-sub {
font-size: 0.78rem;
color: var(--muted);
letter-spacing: 0.06em;
}
.lc-mock-steps {
display: flex;
gap: 18px;
font-size: 0.72rem;
letter-spacing: 0.06em;
color: rgba(15, 44, 46, 0.4);
flex-wrap: wrap;
}
.lc-mock-step.active { color: var(--gold-deep); font-weight: 500; }
.lc-mock-summary {
padding: 18px 30px;
background: var(--ivory);
border-bottom: 1px solid rgba(15, 44, 46, 0.06);
display: flex;
justify-content: space-between;
align-items: center;
gap: 18px;
}
.lc-mock-label {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 6px;
font-weight: 500;
}
.lc-mock-service-name {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--teal-deep);
margin-bottom: 4px;
}
.lc-mock-meta {
font-size: 0.8rem;
color: var(--muted);
}
.lc-mock-change {
background: transparent;
border: 1px solid rgba(15, 44, 46, 0.15);
color: var(--teal-deep);
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 9px 18px;
border-radius: 30px;
cursor: pointer;
transition: var(--transition);
flex-shrink: 0;
}
.lc-mock-change:hover { border-color: var(--gold); color: var(--gold-deep); }
.lc-mock-body {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 0;
}
@media (max-width: 720px) {
.lc-mock-body { grid-template-columns: minmax(0, 1fr); }
}
/* Calendar */
.lc-mock-calendar {
padding: 28px 30px;
border-right: 1px solid rgba(15, 44, 46, 0.07);
min-width: 0;
}
@media (max-width: 720px) {
.lc-mock-calendar { border-right: none; border-bottom: 1px solid rgba(15, 44, 46, 0.07); }
}
.lc-mock-cal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.lc-mock-cal-month {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--teal-deep);
}
.lc-mock-cal-nav {
background: transparent;
border: 1px solid rgba(15, 44, 46, 0.12);
color: var(--teal-deep);
width: 30px; height: 30px;
border-radius: 50%;
font-size: 1.1rem;
cursor: pointer;
transition: var(--transition);
}
.lc-mock-cal-nav:hover { background: var(--cream-soft); border-color: var(--gold); }
.lc-mock-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
margin-bottom: 8px;
}
.lc-mock-cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
.lc-mock-day {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.88rem;
color: var(--teal-deep);
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
}
.lc-mock-day.muted { color: rgba(15, 44, 46, 0.18); cursor: default; }
.lc-mock-day.past { color: rgba(15, 44, 46, 0.3); cursor: not-allowed; text-decoration: line-through; }
.lc-mock-day.available { background: rgba(30, 65, 68, 0.06); font-weight: 500; }
.lc-mock-day.available:hover { background: var(--gold); color: var(--teal-deep); }
.lc-mock-day.selected { background: var(--teal-deep); color: var(--gold); font-weight: 500; }
.lc-mock-day.full { background: rgba(15, 44, 46, 0.04); color: rgba(15, 44, 46, 0.3); cursor: not-allowed; }
.lc-mock-day.closed { color: rgba(15, 44, 46, 0.2); cursor: not-allowed; }
.lc-mock-legend {
display: flex;
gap: 14px;
flex-wrap: wrap;
font-size: 0.72rem;
color: var(--muted);
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(15, 44, 46, 0.06);
}
.lc-mock-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lc-dot-available { background: rgba(30, 65, 68, 0.2); }
.lc-dot-full { background: rgba(15, 44, 46, 0.1); }
.lc-dot-closed { background: rgba(15, 44, 46, 0.04); border: 1px solid rgba(15, 44, 46, 0.18); }
/* Time slots */
.lc-mock-slots {
padding: 28px 30px;
min-width: 0;
}
.lc-mock-slots-header { margin-bottom: 16px; }
.lc-mock-date-selected {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--teal-deep);
}
.lc-mock-slot-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
gap: 8px;
}
.lc-mock-slot {
background: var(--ivory);
border: 1px solid rgba(15, 44, 46, 0.1);
color: var(--teal-deep);
font-family: var(--font-body);
font-size: 0.88rem;
padding: 12px 6px;
border-radius: 4px;
cursor: pointer;
transition: var(--transition);
}
.lc-mock-slot:hover:not(.taken):not(.selected) { border-color: var(--gold); background: var(--cream-soft); }
.lc-mock-slot.taken {
background: rgba(15, 44, 46, 0.03);
color: rgba(15, 44, 46, 0.25);
text-decoration: line-through;
cursor: not-allowed;
}
.lc-mock-slot.selected {
background: var(--teal-deep);
color: var(--gold);
border-color: var(--teal-deep);
font-weight: 500;
}
.lc-mock-timezone {
font-size: 0.72rem;
color: var(--muted);
margin-top: 18px;
font-style: italic;
}
.lc-mock-footer {
padding: 22px 30px;
background: var(--cream-soft);
border-top: 1px solid rgba(15, 44, 46, 0.07);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.lc-mock-summary-line {
font-size: 0.92rem;
color: var(--teal-deep);
min-width: 0;
flex: 1;
}
.lc-mock-continue { flex-shrink: 0; }
@media (max-width: 600px) {
.lc-mock-header { padding: 18px 20px; flex-direction: column; align-items: flex-start; }
.lc-mock-summary { padding: 16px 20px; flex-direction: column; align-items: flex-start; }
.lc-mock-change { align-self: stretch; text-align: center; }
.lc-mock-calendar, .lc-mock-slots { padding: 22px 20px; }
.lc-mock-footer { padding: 18px 20px; }
.lc-mock-continue { width: 100%; }
}
.lc-reassure {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin: 30px 0 0;
padding: 22px 28px;
background: var(--ivory);
border-radius: 4px;
border: 1px solid rgba(15, 44, 46, 0.06);
}
.lc-reassure-item {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.88rem;
color: var(--teal-deep);
}
.lc-reassure-item svg {
width: 22px; height: 22px;
color: var(--gold-deep);
flex-shrink: 0;
}
.lc-fallback {
text-align: center;
font-size: 0.88rem;
color: var(--muted);
margin: 28px 0 0;
font-style: italic;
}
.lc-fallback a { color: var(--gold-deep); border-bottom: 1px solid var(--gold); }
/* ---------- Google Reviews Showcase ---------- */
.google-reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 26px;
margin-top: 50px;
}
.google-review-card {
background: #ffffff;
padding: 32px 28px;
border-radius: 8px;
border: 1px solid rgba(15, 44, 46, 0.08);
box-shadow: 0 4px 16px rgba(15, 44, 46, 0.05);
transition: var(--transition-card);
position: relative;
display: flex;
flex-direction: column;
}
@media (max-width: 600px) {
.google-review-card { padding: 26px 22px; }
}
.google-review-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15, 44, 46, 0.09);
}
.google-review-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.google-review-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--teal-deep);
color: var(--gold);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.google-review-meta {
flex: 1;
min-width: 0;
}
.google-review-name {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 500;
color: var(--teal-deep);
margin: 0 0 4px 0;
line-height: 1.3;
}
.google-review-stars-line {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
color: var(--muted);
}
.google-review-stars-line .stars {
color: var(--gold-deep);
letter-spacing: 0.1em;
font-size: 0.85rem;
}
.google-review-source {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--ivory);
border: 1px solid rgba(15, 44, 46, 0.12);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 500;
color: var(--gold-deep);
flex-shrink: 0;
}
.google-review-quote {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.7;
color: var(--teal-deep);
margin: 0 0 18px 0;
flex: 1;
}
.google-review-footer {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-deep);
margin: 0;
padding-top: 14px;
border-top: 1px solid rgba(15, 44, 46, 0.07);
}
/* Mobile fit for the deep-teal Google CTA button */
.btn-google-reviews {
max-width: 100%;
}
@media (max-width: 600px) {
.google-cta-box { padding: 44px 22px !important; }
.btn-google-reviews {
padding: 15px 18px;
letter-spacing: 0.14em;
font-size: 0.7rem;
white-space: normal;
line-height: 1.3;
}
}
@media (max-width: 380px) {
.google-cta-box { padding: 40px 16px !important; }
.btn-google-reviews {
padding: 14px 12px;
letter-spacing: 0.1em;
font-size: 0.66rem;
}
}
/* ---------- Gallery page ---------- */
.gallery-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 50px;
}
.gallery-filter {
padding: 10px 20px;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
background: transparent;
color: var(--muted);
border: 1px solid rgba(15, 44, 46, 0.15);
border-radius: 30px;
cursor: pointer;
transition: all var(--transition);
}
.gallery-filter:hover, .gallery-filter.active {
background: var(--teal-deep);
color: var(--cream);
border-color: var(--teal-deep);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: 30px;
}
.gallery-item {
background: var(--cream-soft);
border-radius: 4px;
overflow: hidden;
border: 1px solid rgba(15, 44, 46, 0.06);
transition: all var(--transition);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
/* Gentle image zoom on hover — only on hover-capable devices */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.gallery-item .gallery-ba,
.gallery-item .gallery-ba-single { overflow: hidden; }
.gallery-item .gallery-ba img,
.gallery-item .gallery-ba-single img {
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
will-change: transform;
}
.gallery-item:hover .gallery-ba img,
.gallery-item:hover .gallery-ba-single img {
transform: scale(1.055);
}
}
.gallery-ba {
display: grid;
grid-template-columns: 1fr 1fr;
}
.gallery-ba-img {
aspect-ratio: 1;
background: var(--teal-soft);
position: relative;
overflow: hidden;
}
.gallery-ba-img img { width: 100%; height: 100%; object-fit: cover; }
.gallery-ba-img .placeholder {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--teal-deep), var(--teal-soft));
color: var(--gold);
font-family: var(--font-display);
font-style: italic;
font-size: 0.9rem;
}
.gallery-ba-img .label {
position: absolute;
top: 14px; left: 14px;
background: rgba(15, 44, 46, 0.85);
color: var(--gold);
padding: 5px 12px;
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
border-radius: 2px;
font-family: var(--font-body);
}
.gallery-item-content {
padding: 22px 24px;
}
.gallery-item-content h4 {
font-size: 1.15rem;
margin-bottom: 6px;
color: var(--teal-deep);
}
.gallery-item-content p {
font-size: 0.85rem;
color: var(--muted);
margin: 0;
}
.disclaimer {
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
color: var(--muted);
margin-top: 50px;
padding: 22px;
background: var(--cream-soft);
border-radius: 4px;
}
/* ---------- Booking page ---------- */
.booking-grid {
display: grid;
grid-template-columns: 1fr;
gap: 70px;
}
.booking-info {
max-width: 800px;
margin: 0 auto;
width: 100%;
}
.booking-form-wrap {
/* Stays inside the .container (~1144px effective max). The .reveal class on this
element animates its own transform, so we can't apply our own transform here
without conflict — keeping the layout safe is more important than the extra width. */
max-width: none;
margin: 0 auto;
width: 100%;
/* Sticky header is ~80-90px tall; offset anchor jumps so widget isn't hidden under it. */
scroll-margin-top: 110px;
}
.booking-form-wrap iframe {
width: 100% !important;
border: 0;
display: block;
}
.booking-grid .contact-quick {
max-width: 800px;
margin-left: auto;
margin-right: auto;
width: 100%;
box-sizing: border-box;
}
@media (max-width: 900px) {
.booking-grid { gap: 50px; }
}
/* Grid items default to min-width: auto which means they refuse to shrink
below their content's intrinsic width — a long