/* MyVetNurse — Brand tokens & base styles */
:root {
/* Brand palette */
--sage: #A7B49B;
--sage-light: #C5CFBC;
--sage-soft: #DCE2D5;
--sage-tint: #EDEFE7;
--olive: #B49B7A;
--olive-light: #CDBA9F;
--olive-soft: #E4D9C7;
--forest: #1F3A2E;
--forest-deep: #142319;
--cream: #F4F2EB;
--cream-warm: #F8F5EC;
--paper: #FBFAF4;
--ink: #1F3A2E;
--ink-soft: #2E4A3D;
--muted: #6B7568;
--muted-2: #8B9385;
--rule: #DDE1D4;
/* Accent (Tweakable: sage or forest dominant) */
--accent: var(--forest);
--accent-soft: var(--sage-soft);
--accent-ink: var(--forest);
/* Type */
--serif: "Newsreader", "Cormorant Garamond", Georgia, serif;
--sans: "Nunito", "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
--font-menu: "Fredoka", "Nunito", sans-serif;
/* Radius / shadow */
--r-sm: 10px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 40px;
--r-pill: 999px;
--shadow-sm: 0 2px 10px rgba(31, 58, 46, 0.06);
--shadow-md: 0 12px 36px -12px rgba(31, 58, 46, 0.14);
--shadow-lg: 0 30px 60px -20px rgba(31, 58, 46, 0.22);
--container: 1280px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--cream);
color: var(--ink);
font-family: var(--sans);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 {
font-family: var(--serif);
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
text-wrap: balance;
margin: 0;
}
p { text-wrap: pretty; margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
/* ---------- Top Bar / Nav ---------- */
.topstrip {
background: var(--forest);
color: var(--cream);
font-size: 13px;
letter-spacing: 0.04em;
}
.topstrip-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 32px;
max-width: var(--container);
margin: 0 auto;
gap: 24px;
}
.topstrip svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; }
.topstrip a { opacity: 0.9; display: inline-flex; align-items: center; gap: 6px; }
.topstrip a:hover { opacity: 1; }
.topstrip-left, .topstrip-right { display: flex; gap: 22px; align-items: center; }
.topstrip-right { font-variant: tabular-nums; }
.topstrip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; margin-right: 8px; box-shadow: 0 0 0 4px rgba(167, 180, 155, 0.25); }
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
/* Default (over hero): fully transparent with a soft top-down scrim so the
cream text + logo stay legible without a hard green bar. */
background: transparent;
border-bottom: 1px solid transparent;
transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav::before {
/* Gentle gradient scrim that fades into the hero — no solid bar */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 140%;
background: linear-gradient(180deg, rgba(20, 35, 25, 0.55) 0%, rgba(20, 35, 25, 0) 100%);
pointer-events: none;
opacity: 1;
transition: opacity .35s ease;
}
/* Scrolled state: forest-green frosted glass, cream text, clear shadow.
Defined and always visible over cream content (vs cream-on-cream that
"disappeared"). This is the green-on-scroll behaviour. */
.nav.is-scrolled {
background: rgba(26, 46, 36, 0.88);
backdrop-filter: saturate(160%) blur(18px);
-webkit-backdrop-filter: saturate(160%) blur(18px);
border-bottom-color: rgba(167, 180, 155, 0.18);
box-shadow: 0 6px 26px -14px rgba(20, 35, 25, 0.5);
}
.nav.is-scrolled::before { opacity: 0; }
.nav-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 12px 32px;
max-width: var(--container);
margin: 0 auto;
gap: 24px;
min-height: 58px;
position: relative;
}
.nav-links {
grid-column: 2;
justify-self: center;
display: flex;
gap: 34px;
font-family: var(--font-menu);
font-size: 15.5px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--cream);
}
.nav.is-scrolled .nav-links { color: var(--cream); }
.nav-links a {
position: relative;
padding: 6px 0;
transition: color .2s ease, opacity .2s ease;
opacity: 0.92;
}
.nav-links a:hover { opacity: 1; }
.nav.is-scrolled .nav-links a:hover { color: var(--sage-light); }
.nav-links a.active { opacity: 1; }
.nav-links a.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1.5px;
background: var(--sage-light);
}
.nav.is-scrolled .nav-links a.active::after { background: var(--sage-light); }
.nav-actions {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 12px;
}
/* Theme toggle + phone flip colour in scrolled state */
.nav.is-scrolled .nav-phone { color: var(--cream); }
/* ───── Hamburger (mobile only) ───── */
.nav-burger {
grid-column: 3;
justify-self: end;
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0 10px;
background: transparent;
border: none;
cursor: pointer;
}
.nav-burger span {
display: block;
height: 2px;
width: 100%;
border-radius: 2px;
background: var(--cream);
transition: transform .3s ease, opacity .25s ease, background .3s ease;
}
.nav.is-scrolled .nav-burger span { background: var(--cream); }
.nav.is-menu-open .nav-burger span { background: var(--cream); }
.nav.is-menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-menu-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ───── Mobile drawer ───── */
.nav-drawer {
position: fixed;
top: 0; right: 0;
height: 100dvh;
width: min(86vw, 360px);
background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
color: var(--cream);
z-index: 60;
transform: translateX(100%);
transition: transform .4s cubic-bezier(.2,.7,.3,1);
display: flex;
flex-direction: column;
padding: 96px 32px 40px;
gap: 8px;
box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.4);
overflow-y: auto;
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer-links { display: flex; flex-direction: column; gap: 4px; }
.nav-drawer-links a {
font-family: var(--serif);
font-size: 28px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--cream);
padding: 12px 0;
border-bottom: 1px solid rgba(167, 180, 155, 0.16);
transition: color .2s ease, padding-left .2s ease;
}
.nav-drawer-links a:hover, .nav-drawer-links a.active { color: var(--sage-light); padding-left: 6px; }
.nav-drawer-cta {
margin-top: 24px;
justify-content: center;
background: var(--sage) !important;
color: var(--forest-deep) !important;
padding: 15px 22px !important;
font-size: 15px !important;
}
.nav-drawer-contact {
margin-top: auto;
padding-top: 28px;
display: flex;
flex-direction: column;
gap: 14px;
font-size: 14px;
}
.nav-drawer-contact a, .nav-drawer-contact span {
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(244, 242, 235, 0.82);
}
.nav-drawer-contact a:hover { color: var(--cream); }
.nav-drawer-contact svg { width: 16px; height: 16px; color: var(--sage-light); }
.nav-scrim {
position: fixed;
inset: 0;
background: rgba(20, 35, 25, 0.45);
backdrop-filter: blur(2px);
z-index: 55;
}
/* Nav logo — hidden on desktop (the big hero logo carries the brand there), shown top-left on mobile. */
.nav-logo-mark {
grid-column: 1;
justify-self: start;
display: none;
align-items: center;
line-height: 0;
}
.nav-logo-mark img {
height: 94px;
width: auto;
display: block;
}
/* ───── Mobile nav: collapse to burger ───── */
@media (max-width: 860px) {
.nav-links { display: none; }
.nav-actions { display: none; }
.nav-phone { display: none; }
.nav-logo-mark { display: flex; align-items: flex-start; padding-top: 2px; }
.nav-burger { display: flex; align-self: flex-start; margin-top: 12px; }
.nav-inner { grid-template-columns: 1fr auto; padding: 12px 18px 8px; min-height: 110px; align-items: start; }
}
@media (min-width: 861px) {
.nav-drawer, .nav-scrim { display: none; }
}
/* ---------- Buttons ---------- */
.theme-toggle {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(244, 242, 235, 0.22);
background: transparent;
color: rgba(244, 242, 235, 0.85);
display: grid;
place-items: center;
cursor: pointer;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.theme-toggle:hover { background: rgba(244, 242, 235, 0.12); border-color: rgba(244, 242, 235, 0.4); color: var(--cream); }
.theme-toggle svg { width: 16px; height: 16px; }
/* Nav-context CTA: slightly compressed vs the global .btn — the bar is slim now. */
.nav .btn { padding: 9px 18px; font-size: 14px; }
.nav .btn svg { width: 14px; height: 14px; }
/* On the green-glass nav, btn-primary needs a subtle outline to lift off the forest tint */
.nav .btn-primary {
background: var(--sage);
color: var(--forest-deep);
box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.5);
}
.nav .btn-primary:hover { background: var(--sage-light); }
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-radius: var(--r-pill);
font-size: 15px;
font-weight: 500;
border: none;
transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary {
background: var(--forest);
color: var(--cream);
box-shadow: 0 6px 18px -8px rgba(31, 58, 46, 0.6);
}
.btn-primary:hover { background: var(--forest-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(31, 58, 46, 0.6); }
.btn-ghost {
background: transparent;
color: var(--forest);
padding: 14px 4px;
}
.btn-ghost:hover { color: var(--olive); }
.btn-outline {
background: transparent;
color: var(--forest);
border: 1.5px solid var(--rule);
padding: 12px 20px;
}
.btn-outline:hover { background: var(--sage-tint); border-color: var(--sage); }
/* ---------- Hero (fullscreen video) ---------- */
.hero {
position: relative;
min-height: 92vh;
display: flex;
/* Top-anchor the content stack (logo first, then text) instead of vertically
centring it — keeps the logo high in the viewport and prevents it from
overlapping the eyebrow/headline on shorter screens. */
align-items: flex-start;
overflow: hidden;
color: var(--cream);
isolation: isolate;
margin-top: -1px;
}
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 72% 50%;
z-index: -2;
}
.hero-shade {
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(100deg,
rgba(12, 22, 16, 0.88) 0%,
rgba(12, 22, 16, 0.66) 28%,
rgba(12, 22, 16, 0.24) 52%,
rgba(12, 22, 16, 0) 72%);
}
.hero-content {
position: relative;
/* Top padding clears the sticky nav (~56px) + breathing room.
Left padding scales with viewport (min 32px on mobile, capped at 96px on very wide screens). */
padding: clamp(96px, 12vh, 144px) 32px 80px clamp(32px, 5vw, 96px);
margin: 0;
max-width: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hero-content > * {
max-width: 460px;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(244, 242, 235, 0.14);
color: var(--cream);
border: 1px solid rgba(244, 242, 235, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 9px 18px;
border-radius: var(--r-pill);
font-size: 13px;
letter-spacing: 0.04em;
margin-bottom: 24px;
}
.hero-eyebrow svg { width: 14px; height: 14px; color: var(--sage-light); }
.hero h1 {
font-size: clamp(34px, 3.1vw, 50px);
line-height: 1.04;
letter-spacing: -0.024em;
font-weight: 600;
color: var(--cream);
text-shadow: 0 2px 24px rgba(15, 25, 18, 0.55);
/* Wider than the other hero children (460px) so the second line
("in the comfort of home") doesn't wrap onto a third line at large sizes. */
max-width: 640px;
}
.hero h1 em {
font-style: italic;
color: var(--olive);
font-weight: 500;
}
.hero-sub {
margin-top: 22px;
font-size: 17.5px;
color: rgba(244, 242, 235, 0.92);
max-width: 420px;
line-height: 1.55;
text-shadow: 0 1px 12px rgba(15, 25, 18, 0.4);
}
.hero-cta {
margin-top: 34px;
display: flex;
gap: 14px;
align-items: center;
flex-wrap: wrap;
}
.btn-ghost-light {
background: transparent;
color: var(--cream);
padding: 14px 4px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
border-radius: var(--r-pill);
}
.btn-ghost-light:hover { color: var(--sage-light); }
.btn-ghost-light svg { width: 16px; height: 16px; }
.hero-scroll {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: rgba(244, 242, 235, 0.7);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
pointer-events: none;
}
.hero-scroll svg { width: 16px; height: 16px; animation: scrollNudge 2.4s ease-in-out infinite; }
@keyframes scrollNudge {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(4px); opacity: 1; }
}
@media (max-width: 720px) {
/* STACKED hero on mobile: video block on top (animals fully in view), text on a solid forest panel below. No more text-over-animals overlap. */
.hero {
display: block;
min-height: 0;
align-items: stretch;
background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
}
.hero-video {
position: relative;
inset: auto;
width: 100%;
height: 44vh;
object-fit: cover;
object-position: center 38%; /* keep the animals' faces in frame */
z-index: 0;
display: block;
}
/* Shade only over the video block, gentle so the animals stay clear */
.hero-shade {
top: 0; left: 0; right: 0;
height: 44vh;
z-index: 1;
background:
linear-gradient(180deg,
rgba(20, 35, 25, 0.08) 0%,
rgba(20, 35, 25, 0) 45%,
rgba(20, 35, 25, 0.35) 100%);
}
.hero-content {
position: relative;
z-index: 2;
padding: 28px 22px 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.hero-content > * { max-width: 100%; }
/* Big hero logo hidden on mobile — the nav carries the logo top-left */
.hero-brand { display: none; }
/* Gap between the video block and the headline. !important defeats the
base shorthand padding (this file has source-order gotchas). */
.hero-content { padding-top: 48px !important; }
.hero h1 { font-size: clamp(30px, 8.2vw, 40px); }
.hero-sub { font-size: 15.5px; margin-top: 14px; max-width: 100%; }
.hero-cta { margin-top: 26px; width: 100%; gap: 10px; flex-direction: column; align-items: stretch; }
.hero-cta .btn { width: 100%; justify-content: center; padding: 15px 22px; }
.hero-cta .btn-ghost-light { justify-content: center; padding: 12px; }
.hero-scroll { display: none; }
}
/* ---------- Section helpers ---------- */
.section { padding: 110px 0; }
.section-head {
text-align: center;
max-width: 720px;
margin: 0 auto 64px;
}
.section-eyebrow {
font-size: 12px;
letter-spacing: 0.22em;
color: var(--olive);
text-transform: uppercase;
margin-bottom: 18px;
display: inline-flex;
align-items: center;
gap: 12px;
}
.section-eyebrow::before, .section-eyebrow::after {
content: "";
width: 28px;
height: 1px;
background: var(--olive-light);
}
.section h2 {
font-size: clamp(36px, 4vw, 56px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.018em;
}
.section h2 em { font-style: italic; color: var(--olive); }
.section-sub {
margin-top: 18px;
color: var(--muted);
font-size: 17.5px;
line-height: 1.55;
}
/* ---------- Services (icon row) ---------- */
.services-section {
background: var(--cream);
position: relative;
}
/* ---------- Pet ribbon ---------- */
.pets-ribbon {
background: var(--sage);
color: var(--cream);
padding: 22px 0;
}
.pets-ribbon-inner {
display: flex;
gap: 64px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
font-family: var(--serif);
font-style: italic;
font-size: 19px;
color: var(--forest);
}
.pets-ribbon-item {
display: inline-flex;
align-items: center;
gap: 14px;
}
.pets-ribbon-item svg { width: 26px; height: 26px; }
/* ---------- Prices teaser ---------- */
.prices {
background: var(--cream-warm);
position: relative;
overflow: hidden;
}
/* ---------- Booking teaser ---------- */
.booking {
background: var(--forest);
color: var(--cream);
position: relative;
overflow: hidden;
}
.booking::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 10%, rgba(167, 180, 155, 0.18), transparent 50%),
radial-gradient(ellipse at 10% 100%, rgba(180, 155, 122, 0.12), transparent 50%);
pointer-events: none;
}
.booking h2 { color: var(--cream); position: relative; }
.booking h2 em { color: var(--sage-light); }
.booking .section-sub { color: rgba(244, 242, 235, 0.7); position: relative; }
.booking .section-eyebrow { color: var(--sage-light); }
.booking .section-eyebrow::before, .booking .section-eyebrow::after { background: rgba(167, 180, 155, 0.45); }
@keyframes typing {
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes chatIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Learning ---------- */
.learning-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 24px;
}
.learning-card {
background: var(--paper);
border-radius: 22px;
overflow: hidden;
position: relative;
cursor: pointer;
border: 1px solid var(--rule);
box-shadow:
0 1px 2px rgba(31,58,46,0.04),
0 8px 20px -8px rgba(31,58,46,0.08),
0 24px 50px -24px rgba(31,58,46,0.12);
transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease;
display: flex;
flex-direction: column;
}
.learning-card:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(31,58,46,0.06),
0 16px 40px -12px rgba(31,58,46,0.16),
0 40px 80px -30px rgba(31,58,46,0.22);
border-color: rgba(167,180,155,0.5);
}
.learning-card-img {
aspect-ratio: 16/10;
position: relative;
overflow: hidden;
/* Eucalyptus texture under a soft sage tint, so the placeholder reads as
intentional imagery until real article photos are dropped in. */
background:
linear-gradient(150deg, rgba(167,180,155,0.5) 0%, rgba(220,226,213,0.42) 100%),
url("assets/card-leaves-soft.jpg") center/cover;
}
.learning-card-ph {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--forest);
opacity: 0.55;
font-size: 11.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.learning-card-ph svg { width: 34px; height: 34px; stroke-width: 1.4; }
.learning-card:hover .learning-card-ph { transform: scale(1.05); }
.learning-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.learning-card:hover .learning-card-img img { transform: scale(1.04); }
.learning-card.featured { grid-row: span 2; }
/* Featured image grows to fill whatever height the text leaves, so the tall
card never has a gap between the copy and the read link. */
.learning-card.featured .learning-card-img { aspect-ratio: auto; flex: 1 1 auto; min-height: 300px; }
.learning-card.featured .learning-card-body { flex: 0 0 auto; }
.learning-card-excerpt { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
/* ---------- 404 / page not found ---------- */
/* Fill the viewport and centre the whole block; top padding clears the fixed nav. */
.notfound {
text-align: center;
min-height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 104px 0 72px;
}
.notfound-inner { max-width: 640px; margin: 0 auto; }
.notfound-scene { width: min(540px, 90vw); margin: 0 auto 44px; }
.notfound-animals {
display: block;
width: 100%;
height: auto;
/* Bar tucks up to the "shelf" line so the flat arms sit on it and the lower
paws drape over the front. Percentage margin scales with the image width. */
margin-bottom: -4%;
position: relative;
z-index: 2;
filter: drop-shadow(0 4px 5px rgba(31, 58, 46, 0.12));
}
.notfound-ledge {
width: 116%;
margin-left: -8%;
height: 28px;
border-radius: 999px;
background: linear-gradient(180deg, var(--sage) 0%, var(--forest) 120%);
box-shadow: 0 16px 34px -12px rgba(31, 58, 46, 0.42);
position: relative;
z-index: 1;
}
.notfound-eyebrow {
font-family: var(--serif);
font-size: 18px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--olive);
font-weight: 600;
margin-bottom: 12px;
}
.notfound h1 { font-size: clamp(34px, 5.5vw, 54px); margin: 0 0 16px; }
.notfound-sub {
font-size: 17px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 460px;
margin: 0 auto 28px;
}
.notfound-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.notfound-links { margin-top: 26px; font-size: 14.5px; color: var(--muted); }
.notfound-links a { color: var(--forest); font-weight: 600; text-decoration: none; }
.notfound-links a:hover { text-decoration: underline; }
body.dark .notfound-links a { color: var(--sage-light); }
.learning-card-body {
padding: 22px 26px 26px;
display: flex;
flex-direction: column;
flex: 1;
}
.learning-card-meta {
display: flex;
gap: 14px;
align-items: center;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--olive);
margin-bottom: 12px;
}
.learning-card-meta span:not(:first-child)::before {
content: "·";
margin-right: 14px;
color: var(--muted-2);
}
.learning-card h3 {
font-size: 20px;
font-weight: 500;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.learning-card.featured h3 { font-size: 28px; }
.learning-card p {
font-size: 14.5px;
color: var(--muted);
line-height: 1.5;
margin-bottom: 16px;
}
.learning-link {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--forest);
font-weight: 500;
font-size: 14px;
}
.learning-link svg { width: 14px; height: 14px; transition: transform .3s ease; }
/* Whole card is clickable — the read link is stretched over the card. */
.learning-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.learning-card:hover h3 { color: var(--forest); }
.learning-card:hover .learning-link svg { transform: translateX(3px); }
/* ---------- Footer CTA & Footer ---------- */
.footer-cta {
background:
radial-gradient(ellipse at 20% 0%, rgba(167, 180, 155, 0.45) 0%, transparent 50%),
radial-gradient(ellipse at 80% 100%, rgba(180, 155, 122, 0.25) 0%, transparent 55%),
linear-gradient(180deg, var(--sage-tint) 0%, var(--cream-warm) 100%);
padding: 110px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
/* Hairline accent at top */
.footer-cta::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(140, 156, 126, 0.45) 50%, transparent 100%);
}
/* Botanical accent decorations — sage circles for soft texture */
.footer-cta::after {
content: "";
position: absolute;
width: 480px;
height: 480px;
bottom: -240px;
left: 50%;
transform: translateX(-50%);
background: radial-gradient(circle at center, rgba(167, 180, 155, 0.3) 0%, transparent 60%);
pointer-events: none;
}
.footer-cta > * { position: relative; z-index: 1; }
.footer-cta h2 { font-size: clamp(32px, 3.4vw, 48px); margin-bottom: 18px; }
.footer-cta h2 em { font-style: italic; color: var(--olive); }
.footer-cta .section-sub { max-width: 540px; margin: 0 auto 32px; }
.footer-cta-actions { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.footer {
background:
radial-gradient(ellipse at 0% 0%, rgba(167, 180, 155, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 100% 100%, rgba(167, 180, 155, 0.05) 0%, transparent 50%),
var(--forest-deep);
color: rgba(244, 242, 235, 0.78);
padding: 52px 0 24px;
font-size: 14.5px;
position: relative;
}
.footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(167, 180, 155, 0.3) 50%, transparent 100%);
}
/* ── Lean footer ── */
.footer-lean {
display: grid;
grid-template-columns: 1.6fr 0.8fr 1.2fr;
gap: 40px;
align-items: start;
padding-bottom: 26px;
}
.footer-lean-brand .brand-logo { filter: brightness(0) invert(1); }
.footer-lean-brand p {
margin: 16px 0 0;
max-width: 36ch;
line-height: 1.55;
font-size: 14px;
color: rgba(244, 242, 235, 0.66);
}
.footer-lean-nav { display: flex; flex-direction: column; gap: 11px; }
.footer-lean-nav a { color: rgba(244, 242, 235, 0.82); font-size: 15px; font-weight: 500; transition: color .2s ease; }
.footer-lean-nav a:hover { color: var(--sage-light); }
.footer-lean-contact { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-lean-contact a, .footer-lean-contact span {
display: inline-flex; align-items: center; gap: 10px;
color: rgba(244, 242, 235, 0.82); transition: color .2s ease;
}
.footer-lean-contact a:hover { color: var(--cream); }
.footer-lean-contact svg { width: 16px; height: 16px; color: var(--sage-light); flex-shrink: 0; }
.footer-lean-base {
padding: 0 0 2px;
font-size: 12.5px;
color: rgba(244, 242, 235, 0.48);
}
/* "Website created by RiverWood" credit — sits directly under the divider line, with the date moved up above it. */
.footer-credit {
text-align: center;
margin-top: 18px;
padding: 22px 0 2px;
border-top: 1px solid rgba(167, 180, 155, 0.14);
}
.footer-credit-link {
display: inline-flex;
align-items: center;
gap: 13px;
text-decoration: none;
opacity: 0.55;
transition: opacity .25s ease;
}
.footer-credit-link:hover { opacity: 0.9; }
.footer-credit-link span {
font-size: 13px;
letter-spacing: 0.01em;
color: var(--cream);
white-space: nowrap;
}
.footer-credit-link img {
height: 30px;
width: auto;
display: block;
}
@media (max-width: 440px) {
.footer-credit-link { flex-direction: column; gap: 9px; }
}
/* Pre-footer trust strip — socials + BVNA / Petplan on a light band */
.footer-trust {
background: var(--cream-warm);
border-top: 1px solid var(--rule);
padding: 30px 0;
}
.footer-trust-inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: clamp(22px, 4vw, 48px);
}
.footer-trust-sep { width: 1px; height: 48px; background: var(--rule); }
.footer-trust-logo { display: block; width: auto; }
.footer-trust-logo--bvna { height: 50px; }
.footer-trust-logo--petplan { height: 60px; }
.footer-trust-logo--isfm { height: 48px; border-radius: 10px; }
.footer-socials { display: flex; gap: 12px; }
/* Real brand-coloured icons (Facebook blue, Instagram gradient) */
.footer-socials a {
display: inline-flex;
border-radius: 10px;
transition: transform .25s ease, box-shadow .25s ease;
}
.footer-socials a:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px -8px rgba(31, 58, 46, 0.45);
}
.footer-socials svg { width: 42px; height: 42px; display: block; border-radius: 10px; }
@media (max-width: 720px) {
.footer { padding: 40px 0 22px; }
.footer-lean { grid-template-columns: 1fr; gap: 26px; padding-bottom: 24px; }
.footer-lean-base { flex-direction: column; align-items: flex-start; gap: 6px; }
.footer-trust-sep { display: none; }
.footer-trust-inner { gap: 22px 28px; }
.footer-trust-logo--bvna { height: 42px; }
.footer-trust-logo--petplan { height: 50px; }
.footer-trust-logo--isfm { height: 40px; }
.footer-socials svg { width: 38px; height: 38px; }
}
/* Phones: a balanced 2x2 grid (socials | BVNA / Petplan | ISFM) so the strip
never wraps to a lone, orphaned logo on its own row. */
@media (max-width: 560px) {
.footer-trust-inner {
display: grid;
grid-template-columns: repeat(2, auto);
justify-content: center;
align-items: center;
gap: 24px 30px;
}
.footer-trust-logo--bvna { height: 38px; }
.footer-trust-logo--petplan { height: 46px; }
.footer-trust-logo--isfm { height: 38px; }
.footer-socials { justify-content: center; }
.footer-socials svg { width: 36px; height: 36px; }
}
/* ---------- Responsive (basic) ---------- */
@media (max-width: 1080px) {
.learning-grid { grid-template-columns: repeat(2, 1fr); }
.learning-card.featured { grid-row: auto; grid-column: span 2; }
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 720px) {
.container { padding: 0 22px; }
.section { padding: 72px 0; }
.nav-links { display: none; }
.learning-grid { grid-template-columns: 1fr; }
.learning-card.featured { grid-column: auto; }
}
/* ---------- Pets ribbon dot ---------- */
.pets-ribbon-dot { color: rgba(31, 58, 46, 0.4); }
/* ---------- Anchor scroll spacing ---------- */
[id] { scroll-margin-top: 100px; }
/* ---------- Dark mode ---------- */
/* Strategy: keep brand colors (--cream, --sage, --olive, --forest) fixed so they
still mean what their names imply. Only flip the abstract text/surface tokens. */
body.dark {
--ink: #ECEDE3;
--ink-soft: #D2D6C7;
--muted: #98A292;
--muted-2: #7E8878;
--rule: rgba(167, 180, 155, 0.13);
--shadow-sm: 0 2px 10px rgba(0,0,0,0.28);
--shadow-md: 0 12px 36px -12px rgba(0,0,0,0.45);
--shadow-lg: 0 30px 60px -20px rgba(0,0,0,0.55);
--bg-page: #16241D;
--bg-surface: #223A2D;
--bg-surface-2: #1C3026;
background: var(--bg-page);
color: var(--ink);
}
/* Dark-mode section rhythm — alternate a deep page tone with a lifted surface
tone, each with a faint sage glow, so it reads with depth instead of a flat
monotone green. */
body.dark .services-section, body.dark #learning, body.dark .meet-naomi, body.dark .promise-band {
background:
radial-gradient(ellipse at 50% -12%, rgba(167, 180, 155, 0.08) 0%, transparent 60%),
var(--bg-page);
}
body.dark .home-gallery, body.dark .expect-band, body.dark .photo-strip, body.dark .prices {
background:
radial-gradient(ellipse at 80% 0%, rgba(167, 180, 155, 0.07) 0%, transparent 55%),
var(--bg-surface);
}
/* The per-service placeholder photo backdrops are id-scoped, so they outrank the
generic body.dark .placeholder-card flip — re-assert a dark surface here. */
body.dark #luxury-boarding .placeholder-card, body.dark #overnight-care .placeholder-card, body.dark #feline-behaviour .placeholder-card { background: var(--bg-surface); }
body.dark .learning-card { background: var(--bg-surface); }
body.dark .topstrip {
background: var(--forest-deep);
border-bottom: 1px solid rgba(167, 180, 155, 0.08);
}
body.dark .nav {
background: rgba(20, 32, 26, 0.7);
border-bottom: 1px solid rgba(167, 180, 155, 0.08);
}
body.dark .btn-primary {
background: var(--sage);
color: var(--forest-deep);
box-shadow: 0 6px 18px -8px rgba(167, 180, 155, 0.5);
}
body.dark .btn-primary:hover { background: var(--sage-light); }
body.dark .btn-outline { color: var(--ink); border-color: var(--rule); }
body.dark .btn-outline:hover { background: rgba(167, 180, 155, 0.08); border-color: var(--sage); }
body.dark .btn-ghost { color: var(--ink); }
body.dark .btn-ghost:hover { color: var(--sage-light); }
body.dark .pets-ribbon { background: rgba(167, 180, 155, 0.14); }
body.dark .pets-ribbon-inner, body.dark .pets-ribbon-item { color: var(--sage-light); }
body.dark .pets-ribbon-dot { color: rgba(236, 237, 227, 0.3); }
body.dark .booking { background: var(--forest-deep); }
body.dark .learning-card { border-color: var(--rule); }
body.dark .learning-card p { color: var(--muted); }
body.dark .learning-link { color: var(--ink); }
body.dark .learning-link:hover { color: var(--sage-light); }
body.dark .footer-cta { background: rgba(167, 180, 155, 0.08); }
body.dark .footer { background: #0B130E; }
/* Emphasis words keep their natural accent colour in dark mode (olive/sage). */
body.dark .section-eyebrow { color: var(--sage-light); }
body.dark .section-eyebrow::before, body.dark .section-eyebrow::after { background: rgba(167, 180, 155, 0.35); }
body.dark .nav-links a.active::after { background: var(--sage-light); }
body.dark .nav-logo-mark { color: var(--ink); }
/* ====================================================
Prices page
==================================================== */
.prices-hero {
background:
radial-gradient(ellipse at 15% 20%, rgba(167, 180, 155, 0.22) 0%, transparent 45%),
radial-gradient(ellipse at 85% 80%, rgba(180, 155, 122, 0.16) 0%, transparent 50%),
linear-gradient(180deg, var(--cream) 0%, var(--paper) 100%);
padding: 130px 0 60px;
position: relative;
overflow: hidden;
}
.prices-hero-inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.prices-hero .hero-eyebrow {
margin: 0 0 26px;
background: var(--sage-tint);
color: var(--ink-soft);
border: 1px solid var(--sage-soft);
backdrop-filter: none;
}
.prices-hero h1 {
font-family: var(--serif);
font-size: clamp(40px, 4.6vw, 64px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.022em;
color: var(--ink);
}
.prices-hero h1 em { font-style: italic; color: var(--olive); font-weight: 400; }
.prices-hero-sub {
margin: 22px auto 0;
max-width: 560px;
color: var(--muted);
font-size: 17.5px;
line-height: 1.55;
}
.prices-hero-tabs {
margin-top: 44px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.prices-tab {
background:
linear-gradient(180deg, rgba(167, 180, 155, 0.05) 0%, transparent 35%),
var(--paper);
border: 1px solid var(--rule);
border-radius: 18px;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 18px;
text-align: left;
box-shadow:
0 1px 2px rgba(31, 58, 46, 0.03),
0 6px 14px -6px rgba(31, 58, 46, 0.08);
transition:
border-color .3s ease,
transform .3s cubic-bezier(.2,.7,.3,1),
box-shadow .3s ease;
}
.prices-tab:hover {
border-color: rgba(167, 180, 155, 0.5);
transform: translateY(-3px);
box-shadow:
0 2px 4px rgba(31, 58, 46, 0.04),
0 12px 24px -8px rgba(31, 58, 46, 0.15);
}
/* Wrap the icon in a tinted circular badge */
.prices-tab > svg {
width: 24px;
height: 24px;
color: var(--forest);
flex-shrink: 0;
padding: 12px;
box-sizing: content-box;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,0.6) 0%, transparent 45%),
radial-gradient(circle at 70% 80%, var(--sage) 0%, var(--sage-soft) 50%, var(--sage-tint) 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.5),
0 3px 8px -2px rgba(140, 156, 126, 0.4);
}
.prices-tab strong {
display: block;
font-family: var(--serif);
font-size: 18px;
font-weight: 500;
color: var(--ink);
margin-bottom: 2px;
}
.prices-tab small { font-size: 13px; color: var(--muted); }
/* Sections */
/* Alternating sage / cream rhythm so the pricing pages aren't flat cream */
.price-section {
padding: 96px 0;
background:
radial-gradient(ellipse at 50% -8%, rgba(167,180,155,0.26) 0%, transparent 60%),
linear-gradient(180deg, #E8EDE0 0%, #EFF1E8 100%);
}
.price-section-alt { background: var(--cream-warm); }
.price-section-head {
text-align: center;
max-width: 640px;
margin: 0 auto 56px;
}
.price-section-head h2 {
font-size: clamp(32px, 3.4vw, 48px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.018em;
}
/* Tier grid */
.price-tiers {
display: grid;
gap: 20px;
align-items: stretch;
}
.price-tiers-4 { grid-template-columns: repeat(4, 1fr); }
.price-tiers-2 { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.price-tier {
background:
linear-gradient(180deg, rgba(167, 180, 155, 0.10) 0%, transparent 38%),
linear-gradient(rgba(251,250,244,0.92), rgba(251,250,244,0.95)),
url("assets/card-leaves-soft.jpg") center/cover;
border: 1px solid var(--rule);
border-radius: 22px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
overflow: hidden;
box-shadow:
0 1px 2px rgba(31, 58, 46, 0.04),
0 6px 16px -6px rgba(31, 58, 46, 0.08),
0 18px 38px -20px rgba(31, 58, 46, 0.1);
transition:
transform .35s cubic-bezier(.2,.7,.3,1),
box-shadow .35s ease,
border-color .35s ease;
}
/* Per-tier accent progression: sage -> deeper sage -> olive (rises with price).
Featured (4th) keeps its own forest drench below. */
.price-tier { --tier: #A7B49B; --tier-deep: #7E8E6E; }
.price-tiers-4 .price-tier:nth-child(1) { --tier: #A7B49B; --tier-deep: #7E8E6E; }
.price-tiers-4 .price-tier:nth-child(2) { --tier: #9DAE83; --tier-deep: #73855A; }
.price-tiers-4 .price-tier:nth-child(3) { --tier: #C2A881; --tier-deep: #9A7E51; }
/* Pet sitting (alt section) — consistently olive */
.price-section-alt .price-tier { --tier: #C2A881; --tier-deep: #9A7E51; }
/* Top accent bar in the tier colour */
.price-tier::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--tier) 0%, var(--tier-deep) 100%);
opacity: 0.9;
}
/* Soft glow in the bottom-right corner, in the tier colour */
.price-tier::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
bottom: -110px;
right: -110px;
background: radial-gradient(circle at center, color-mix(in srgb, var(--tier) 55%, transparent) 0%, transparent 65%);
opacity: 0.55;
pointer-events: none;
transition: opacity .4s ease;
}
.price-section-alt .price-tier { background: linear-gradient(180deg, rgba(180,155,122,0.10) 0%, transparent 38%), linear-gradient(rgba(251,250,244,0.92), rgba(251,250,244,0.95)), url("assets/card-leaves-soft.jpg") center/cover; }
.price-tier:hover {
transform: translateY(-6px);
box-shadow:
0 2px 4px rgba(31, 58, 46, 0.06),
0 14px 32px -10px rgba(31, 58, 46, 0.16),
0 32px 64px -24px rgba(31, 58, 46, 0.2);
border-color: rgba(167, 180, 155, 0.55);
}
.price-tier:hover::after { opacity: 0.8; }
/* Featured tier — deep forest with sage accents and glow */
.price-tier.featured {
background:
linear-gradient(135deg, rgba(31,58,46,0.88) 0%, rgba(20,35,25,0.93) 100%),
url("assets/card-leaves-deep.jpg") center/cover;
color: var(--cream);
border-color: var(--forest);
}
.price-tier.featured::before {
background: linear-gradient(90deg, transparent 5%, rgba(197, 207, 188, 0.6) 50%, transparent 95%);
height: 3px;
}
.price-tier.featured::after {
background: radial-gradient(circle at center, rgba(167, 180, 155, 0.5) 0%, transparent 60%);
opacity: 0.7;
}
.price-tier.featured h3, .price-tier.featured .price-tier-amount span { color: var(--cream); }
.price-tier.featured .price-tier-amount small, .price-tier.featured .price-tier-blurb { color: rgba(244, 242, 235, 0.78); }
.price-tier.featured .price-tier-icon {
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.35) 0%, transparent 45%),
radial-gradient(circle at 70% 80%, rgba(167, 180, 155, 0.6) 0%, rgba(167, 180, 155, 0.3) 100%);
color: var(--cream);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.2),
0 4px 12px -2px rgba(0, 0, 0, 0.2);
}
.price-tier.featured .price-tier-list li { color: rgba(244, 242, 235, 0.95); }
.price-tier.featured .price-tier-list svg { color: var(--sage-light); }
.price-tier.featured .price-tier-note { background: rgba(167, 180, 155, 0.12); color: rgba(244, 242, 235, 0.88); border-color: rgba(167, 180, 155, 0.25); }
/* Tab hanging from the top-centre, inside the card (not clipped by overflow) */
.price-tier-badge {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--olive) 0%, #9F8568 100%);
color: var(--cream);
padding: 7px 18px;
border-radius: 0 0 12px 12px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
box-shadow: 0 4px 12px -3px rgba(180, 155, 122, 0.5);
z-index: 3;
white-space: nowrap;
}
/* featured keeps the standard top padding so its price aligns with the others;
the "Recommended" tab sits in that padding, clear of the icon (left) */
.price-tier-head {
display: flex;
align-items: flex-start;
gap: 18px;
position: relative;
z-index: 1;
/* Uniform header height (icon + up to a 3-line title) so the price band lines
up across every card regardless of title length. */
min-height: 104px;
}
@media (max-width: 600px) {
.price-tier-head { min-height: 0; } /* cards are stacked — no need to align */
}
.price-tier-head > div:last-child { flex: 1; min-width: 0; }
/* Vivid circular icon tile in the tier colour (matches the home bento) */
.price-tier-icon {
width: 68px;
height: 68px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.55) 0%, transparent 48%),
radial-gradient(circle at 70% 82%, var(--tier-deep) 0%, var(--tier) 55%, color-mix(in srgb, var(--tier) 55%, white) 100%);
color: #18261d;
display: grid;
place-items: center;
flex-shrink: 0;
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.5),
inset 0 -2px 5px rgba(0, 0, 0, 0.10),
0 6px 16px -4px color-mix(in srgb, var(--tier-deep) 60%, transparent);
transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.price-tier:hover .price-tier-icon {
transform: scale(1.06) rotate(-3deg);
}
.price-tier-icon svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18)); }
.price-section-alt .price-tier-icon {
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.6) 0%, transparent 45%),
radial-gradient(circle at 70% 80%, var(--olive) 0%, var(--olive-light) 50%, var(--olive-soft) 100%);
box-shadow:
inset 0 1px 2px rgba(255, 255, 255, 0.55),
inset 0 -1px 3px rgba(0, 0, 0, 0.06),
0 4px 12px -3px rgba(180, 155, 122, 0.45);
}
.price-tier-icon svg { width: 32px; height: 32px; }
.price-tier h3 {
font-family: var(--serif);
font-size: 21px;
font-weight: 500;
letter-spacing: -0.008em;
margin-bottom: 6px;
position: relative;
z-index: 1;
}
.price-tier-blurb {
font-size: 15px;
color: var(--ink-soft);
line-height: 1.5;
}
.price-tier-amount {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 18px 0 16px;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
margin-top: 4px;
position: relative;
z-index: 1;
}
.price-tier-amount span {
font-family: var(--serif);
font-size: 46px;
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
line-height: 1;
}
.price-tier-amount small {
font-size: 12.5px;
color: var(--muted);
letter-spacing: 0.02em;
}
.price-tier.featured .price-tier-amount {
border-color: rgba(167, 180, 155, 0.22);
}
.price-tier-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 11px;
flex: 1;
position: relative;
z-index: 1;
}
.price-tier-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15.5px;
color: var(--ink);
line-height: 1.5;
}
/* Check in a small tier-tinted circle */
.price-tier-list svg {
width: 20px;
height: 20px;
padding: 4px;
box-sizing: border-box;
border-radius: 50%;
background: color-mix(in srgb, var(--tier) 26%, white);
color: var(--tier-deep);
flex-shrink: 0;
margin-top: 1px;
stroke-width: 3;
}
.price-tier.featured .price-tier-list svg {
background: rgba(197, 207, 188, 0.18);
color: var(--sage-light);
}
.price-tier-note {
margin-top: auto;
background: var(--sage-tint);
color: var(--ink-soft);
padding: 12px 14px;
border-radius: var(--r-sm);
border: 1px solid var(--rule);
font-size: 13.5px;
line-height: 1.5;
}
/* Placeholder card — used on Luxury Boarding and Overnight Care pages until
their full pricing tables land. Same visual family as .price-tier (rounded, bordered, paper bg) but a single wide card with a "what's included" list
and a CTA pair. */
.placeholder-card {
background:
radial-gradient(ellipse at 100% 0%, rgba(167, 180, 155, 0.12) 0%, transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(180, 155, 122, 0.08) 0%, transparent 55%),
var(--paper);
border: 1px solid var(--rule);
border-radius: 24px;
box-shadow:
0 1px 2px rgba(31, 58, 46, 0.04),
0 8px 20px -8px rgba(31, 58, 46, 0.08),
0 24px 50px -24px rgba(31, 58, 46, 0.12) !important;
padding: 44px 40px;
max-width: 720px;
margin: 0 auto;
box-shadow: var(--shadow-md);
position: relative;
overflow: hidden;
}
.placeholder-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(167, 180, 155, 0.5), transparent);
}
.placeholder-card-icon {
width: 96px;
height: 96px;
border-radius: 50%;
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.65) 0%, transparent 45%),
radial-gradient(circle at 70% 80%, var(--sage) 0%, var(--sage-soft) 50%, var(--sage-tint) 100%) !important;
color: var(--forest);
box-shadow:
inset 0 2px 4px rgba(255, 255, 255, 0.5),
inset 0 -2px 6px rgba(0, 0, 0, 0.08),
0 8px 18px -6px rgba(140, 156, 126, 0.5);
background: linear-gradient(135deg, var(--sage-tint) 0%, var(--sage-soft) 100%);
color: var(--forest);
display: grid;
place-items: center;
margin-bottom: 22px;
}
.placeholder-card-icon svg { width: 52px; height: 52px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)); }
.placeholder-card h3 {
font-family: var(--serif);
font-size: 26px;
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 4px;
}
.placeholder-card-cta {
margin-top: 32px;
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Watercolour leaf-texture backdrop. The previous blurred animal photos were
dropped at the client's request — they preferred the leaves. */
#luxury-boarding .placeholder-card, #overnight-care .placeholder-card, #feline-behaviour .placeholder-card {
/* Overlay strong enough that body text stays readable over the texture */
background:
linear-gradient(rgba(251,250,244,0.9), rgba(251,250,244,0.94)),
url("assets/card-leaves-soft.jpg") center/cover;
}
body.dark .placeholder-card {
background: var(--bg-surface);
border-color: rgba(167, 180, 155, 0.16);
}
body.dark .placeholder-card-icon {
background: linear-gradient(135deg, rgba(167, 180, 155, 0.16) 0%, rgba(167, 180, 155, 0.28) 100%);
color: var(--sage-light);
}
/* Pet sitting bands */
.sit-bands {
display: flex;
flex-direction: column;
gap: 12px;
padding: 18px;
background: var(--sage-tint);
border-radius: var(--r-md);
}
.sit-band {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(31, 58, 46, 0.14);
}
.sit-band:last-child { border-bottom: none; padding-bottom: 0; }
.sit-band-amt {
font-family: var(--serif);
font-size: 30px;
font-weight: 500;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.sit-band-label {
font-size: 14px;
color: var(--ink-soft);
text-align: right;
}
.price-tier-meta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--ink-soft);
padding-bottom: 4px;
border-bottom: 1px solid var(--rule);
margin-bottom: 4px;
}
.price-tier-meta svg { width: 14px; height: 14px; color: var(--olive); }
.price-section-foot {
margin-top: 48px;
text-align: center;
font-size: 14.5px;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--cream);
padding: 14px 22px;
border-radius: var(--r-pill);
border: 1px solid var(--rule);
width: max-content;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
}
.price-section-foot svg { width: 16px; height: 16px; color: var(--olive); flex-shrink: 0; }
.price-section-alt .price-section-foot { background: var(--paper); }
/* FAQ */
.faq-section {
background:
radial-gradient(ellipse at 90% 0%, rgba(167, 180, 155, 0.26) 0%, transparent 50%),
radial-gradient(ellipse at 10% 100%, rgba(180, 155, 122, 0.14) 0%, transparent 52%),
linear-gradient(180deg, #E8EDE0 0%, #EFF1E8 100%);
padding: 110px 0 130px;
position: relative;
overflow: hidden;
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
width: 100%;
background: transparent;
border: none;
padding: 22px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
cursor: pointer;
font-family: var(--serif);
font-size: 19px;
font-weight: 500;
color: var(--ink);
text-align: left;
}
.faq-q:hover { color: var(--forest); }
.faq-q-icon {
width: 38px;
height: 38px;
border-radius: 50%;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.6) 0%, transparent 45%), linear-gradient(135deg, var(--sage-soft) 0%, var(--sage-tint) 100%);
box-shadow:
inset 0 1px 1px rgba(255,255,255,0.5),
0 2px 6px -1px rgba(140, 156, 126, 0.35);
background: var(--sage-tint);
color: var(--forest);
display: grid;
place-items: center;
transition: transform .3s ease, background .2s ease;
flex-shrink: 0;
}
.faq-q-icon svg { width: 16px; height: 16px; }
.faq-item.open .faq-q-icon { transform: rotate(180deg); background: var(--sage-soft); }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .35s ease, padding .25s ease;
}
.faq-a p {
padding: 0 60px 24px 0;
color: var(--muted);
font-size: 15px;
line-height: 1.55;
}
.faq-item.open .faq-a { max-height: 320px; }
/* ── Questions (dedicated FAQ page) — one calm centred column ── */
.questions-list {
max-width: 760px;
margin: 0 auto;
border-top: 1px solid var(--rule);
}
.questions-list .faq-q { font-size: 21px; padding: 26px 0; }
.questions-list .faq-a p { padding: 0 40px 26px 0; font-size: 15.5px; }
.questions-list .faq-item.open .faq-a { max-height: 360px; }
.questions-help {
max-width: 760px;
margin: 56px auto 0;
text-align: center;
}
.questions-help p {
font-family: var(--serif);
font-size: clamp(19px, 2vw, 23px);
line-height: 1.4;
color: var(--ink-soft);
margin: 0 0 22px;
}
.questions-help-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* Dark mode for prices */
body.dark .prices-hero {
background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-surface-2) 100%);
}
body.dark .prices-hero .hero-eyebrow {
background: rgba(167, 180, 155, 0.1);
color: var(--ink-soft);
border-color: rgba(167, 180, 155, 0.2);
}
body.dark .prices-tab { background: var(--bg-surface); border-color: var(--rule); }
body.dark .prices-tab strong { color: var(--ink); }
body.dark .prices-tab svg { color: var(--sage-light); }
body.dark .price-section {
background:
radial-gradient(ellipse at 50% -12%, rgba(167, 180, 155, 0.08) 0%, transparent 60%),
var(--bg-page);
}
body.dark .price-section-alt {
background:
radial-gradient(ellipse at 80% 0%, rgba(167, 180, 155, 0.07) 0%, transparent 55%),
var(--bg-surface);
}
body.dark .price-tier, body.dark .price-section-alt .price-tier { background: var(--bg-surface); border-color: var(--rule); }
body.dark .price-tier-icon { background: rgba(167, 180, 155, 0.12); color: var(--sage-light); }
body.dark .price-tier-amount span { color: var(--ink); }
body.dark .price-tier-amount, body.dark .price-tier-meta { border-color: var(--rule); }
body.dark .price-tier-list svg { color: var(--sage-light); }
body.dark .price-tier-note { background: rgba(167, 180, 155, 0.08); color: var(--ink-soft); border-color: var(--rule); }
body.dark .sit-bands { background: rgba(167, 180, 155, 0.08); }
body.dark .sit-band { border-color: rgba(167, 180, 155, 0.16); }
body.dark .sit-band-amt { color: var(--ink); }
body.dark .price-section-foot { background: var(--bg-surface); border-color: var(--rule); color: var(--ink-soft); }
body.dark .price-section-alt .price-section-foot { background: var(--bg-surface); }
body.dark .faq-section {
background:
radial-gradient(ellipse at 50% -12%, rgba(167, 180, 155, 0.08) 0%, transparent 60%),
var(--bg-page);
}
body.dark .faq-item { border-color: var(--rule); }
body.dark .faq-q { color: var(--ink); }
body.dark .faq-q-icon { background: rgba(167, 180, 155, 0.12); color: var(--sage-light); }
body.dark .faq-item.open .faq-q-icon { background: rgba(167, 180, 155, 0.22); }
/* Prices responsive */
@media (max-width: 1080px) {
.price-tiers-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.price-tiers-4, .price-tiers-2 { grid-template-columns: 1fr; }
.prices-hero-tabs { grid-template-columns: 1fr; }
}
/* ====================================================
Brand logo (PNG lockup)
==================================================== */
/* The Logo component renders an ![]()
with inline height; width auto-scales. */
.brand-logo {
display: block;
width: auto;
height: auto; /* inline `style="height: ..px"` controls actual size */
max-width: 100%;
/* Smooth out edges when the PNG is scaled */
image-rendering: -webkit-optimize-contrast;
}
/* Brand mark in the hero — now a regular flex child of `.hero-content`
(was absolutely positioned; that caused overlap with the eyebrow on shorter
viewports). Sits at the top of the content stack, left-aligned with the text. */
.hero-brand {
display: block;
line-height: 0;
/* Spacing between logo and the eyebrow pill below it */
margin-bottom: clamp(24px, 4vh, 44px);
/* Override the .hero-content > * max-width so the logo isn't constrained to
the text column width (it has its own intrinsic width). */
max-width: none !important;
}
.brand-logo--hero {
/* Substantially larger than before — the cropped PNG (1.29:1) sits tight
against the lockup so the visible logo fills this height with minimal padding.
The tinted source (icon = sage-light, text = cream) lands the right colours
directly — only a drop-shadow filter is needed. */
height: clamp(160px, 24vh, 280px);
opacity: 0.96;
filter: drop-shadow(0 4px 22px rgba(0, 0, 0, 0.45));
transition: opacity .25s ease;
}
.hero-brand:hover .brand-logo--hero { opacity: 1; }
@media (max-width: 720px) {
/* Big hero logo hidden on mobile — the nav carries the logo top-left.
Placed here (after the base .hero-brand rule) so source order wins. */
.hero-brand { display: none !important; }
}
/* ====================================================
Nav phone link (left column — replaces TopStrip contact info)
==================================================== */
.nav-phone {
grid-column: 1;
justify-self: start;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--cream);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.01em;
opacity: 0.9;
transition: opacity .2s ease;
font-variant-numeric: tabular-nums;
}
.nav-phone:hover { opacity: 1; }
.nav-phone svg { width: 15px; height: 15px; }
.nav-phone .nav-phone-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sage-light);
box-shadow: 0 0 0 3px rgba(167, 180, 155, 0.22);
margin-right: 2px;
}
@media (max-width: 900px) {
/* Hide the number; keep the icon as a tap target */
.nav-phone .nav-phone-text { display: none; }
.nav-phone .nav-phone-dot { display: none; }
}
@media (max-width: 720px) {
/* On the smallest screens just hide the whole thing; the FAB + footer carry the phone. */
.nav-phone { display: none; }
}
/* ====================================================
Page transitions
==================================================== */
/* Cross-document view transitions in Chromium 126+. Same-origin navigations
get an automatic crossfade. Other browsers ignore this rule and fall back
to the @keyframes pageEnter below for a soft fade-in on each load. */
@view-transition {
navigation: auto;
}
/* Opacity-only — must NOT leave a transform on . A persistent transform
on an ancestor turns it into the containing block for position:fixed children, which made the fixed nav scroll away with the page ("appears then disappears"). */
@keyframes pageEnter {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
body {
animation: pageEnter 0.36s ease-out both;
}
}
/* ====================================================
Services section — Editorial style
Matches Naomi's pricing infographic visual language:
botanical corner accents, heart-motif divider, big serif card titles, sage pricing pill, "includes" bullets, circular icon tile.
==================================================== */
.services-section--editorial {
position: relative;
/* Soft green wash so the section is no longer flat cream: a sage glow up top
fading into cream, with a warm olive hint drifting in from the lower right. */
background:
radial-gradient(ellipse at 50% -8%, rgba(167,180,155,0.26) 0%, transparent 60%),
radial-gradient(ellipse at 92% 108%, rgba(180,155,122,0.12) 0%, transparent 55%),
linear-gradient(180deg, #E8EDE0 0%, #EFF1E8 100%);
padding-top: clamp(96px, 12vw, 150px);
padding-bottom: clamp(96px, 12vw, 150px);
overflow: hidden;
}
/* Botanical corner artwork — watercolour branch top-left + bottom-right.
Each .botanical-leaf is positioned in a corner; the inner ![]()
carries the
180° flip for the bottom-right. */
.botanical-leaves { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.botanical-leaf {
position: absolute;
width: clamp(255px, 36vw, 570px);
line-height: 0;
}
.botanical-leaf img {
display: block;
width: 100%;
height: auto;
opacity: 0.9;
}
.botanical-leaf--tl { top: 0; left: 0; }
.botanical-leaf--br { bottom: 0; right: 0; }
.botanical-leaf--br img { transform: rotate(180deg); }
/* Section head — bigger, centred, with heart divider */
.section-head--editorial {
position: relative;
z-index: 1;
text-align: center;
margin-bottom: clamp(56px, 7vw, 88px);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.section-head--editorial h2 {
font-size: clamp(38px, 5vw, 60px);
font-weight: 500;
letter-spacing: -0.022em;
line-height: 1.05;
}
.section-head--editorial .section-sub {
margin-top: 6px;
font-size: 17px;
max-width: 560px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
/* Heart-motif divider — small sage heart flanked by gradient hairlines */
.heart-divider {
display: flex;
align-items: center;
gap: 14px;
justify-content: center;
max-width: 200px;
margin: 26px auto 22px;
}
.heart-divider-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(156, 170, 139, 0.55) 50%, transparent 100%);
}
.heart-divider-mark {
width: 20px;
height: 18px;
flex-shrink: 0;
}
/* Mobile-only horizontal leaf dividers (desktop keeps the corner branches).
Small screens have no clear corner space: the heading spans the full width
and the cards cover the bottom corner. So the corner artwork goes entirely
and a horizontal watercolour spray frames the section top and bottom. */
.botanical-divider { display: none; }
@media (max-width: 720px) {
.botanical-leaf { display: none; }
.botanical-divider {
display: block;
width: min(330px, 82vw);
height: auto;
margin: 0 auto;
opacity: 0.9;
position: relative;
z-index: 0;
}
.botanical-divider--top { margin-bottom: 34px; }
.botanical-divider--bottom { margin-top: 42px; }
/* The dividers now occupy the breathing room the big paddings provided */
.services-section--editorial {
padding-top: 44px;
padding-bottom: 48px;
}
}
/* Dark mode — section-level surfaces */
body.dark .heart-divider-line {
background: linear-gradient(90deg, transparent 0%, rgba(197, 207, 188, 0.4) 50%, transparent 100%);
}
body.dark .botanical-leaf img { opacity: 0.6; }
body.dark .botanical-divider { opacity: 0.55; }
/* ====================================================
PAGE TRANSITIONS
A full-screen cream veil gives a quick cross-fade between pages and masks
the React re-render on load. Pages are prerendered, so the veil clears at
DOMContentLoaded with the full page already visible — no reveal elements
are hidden by CSS (see effects.jsx: only below-the-fold elements are hidden,
while off-screen, for scroll reveals). transitions.js inserts #page-veil
and sets the html classes.
==================================================== */
#page-veil {
position: fixed;
inset: 0;
z-index: 9999;
background: var(--cream);
opacity: 1;
pointer-events: none;
/* Failsafe: clear the veil even if the scripts never run */
animation: mvn-veil-clear 0s linear 6s forwards;
}
html.page-ready #page-veil { opacity: 0; transition: opacity 0.2s ease; }
html.page-leaving #page-veil { opacity: 1; transition: opacity 0.15s ease; animation: none; }
@keyframes mvn-veil-clear { to { opacity: 0; } }
/* Reveal elements are NOT hidden by CSS: pages are prerendered and everything
above the fold must be visible from the first paint. effects.jsx hides only
below-the-fold elements (while off-screen) for scroll reveals. */
@media (prefers-reduced-motion: reduce) {
#page-veil { display: none; }
}
/* ====================================================
MOTION + INTERACTIVITY LAYER
Wires up the cinematic feel: tilt cards, magnetic buttons, custom cursor, marquees, ambient float, keyframes.
==================================================== */
/* ────── Scroll progress bar ────── */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, var(--sage) 0%, var(--forest) 100%);
transform-origin: left center;
transform: scaleX(var(--p, 0));
z-index: 100;
pointer-events: none;
transition: transform 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {
.scroll-progress { display: none; }
}
/* Tilt cards — base transforms must use preserve-3d for nested .tilt-inner depth */
.tilt {
transform-style: preserve-3d;
will-change: transform;
transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
}
.tilt-inner {
transition: transform 0.5s cubic-bezier(.2,.7,.3,1);
will-change: transform;
}
/* Magnetic buttons — smooth follow */
.magnetic {
transition: transform 0.35s cubic-bezier(.2,.7,.3,1);
will-change: transform;
}
/* ────── Custom cursor (opt-in via body.has-custom-cursor) ────── */
body.has-custom-cursor { cursor: none; }
body.has-custom-cursor a, body.has-custom-cursor button, body.has-custom-cursor input, body.has-custom-cursor .magnetic, body.has-custom-cursor .tilt { cursor: none; }
.cursor-dot, .cursor-ring {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
transition: opacity 0.2s ease;
display: none; /* hidden until body.has-custom-cursor opts in */
}
body.has-custom-cursor .cursor-dot, body.has-custom-cursor .cursor-ring { display: block; }
.cursor-dot {
width: 8px;
height: 8px;
background: var(--forest);
border-radius: 50%;
mix-blend-mode: multiply;
}
.cursor-ring {
width: 36px;
height: 36px;
border: 1.5px solid rgba(31, 58, 46, 0.45);
border-radius: 50%;
transition: width 0.28s ease, height 0.28s ease, border-color 0.28s ease, opacity 0.2s ease;
}
.cursor-ring.is-grown {
width: 56px;
height: 56px;
border-color: var(--sage);
background: rgba(167, 180, 155, 0.12);
margin-top: -10px;
margin-left: -10px;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
.cursor-dot, .cursor-ring { display: none !important; }
body.has-custom-cursor { cursor: auto; }
}
/* ────── Ambient floating motion ────── */
@keyframes mvn-float {
0%, 100% { transform: translateY(0) rotate(0); }
50% { transform: translateY(-14px) rotate(2deg); }
}
.float {
animation: mvn-float 6s ease-in-out infinite;
will-change: transform;
}
/* ────── Marquee word strip ────── */
@keyframes marquee-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
.marquee {
display: flex;
overflow: hidden;
background: var(--forest-deep);
color: var(--cream);
padding: 22px 0;
border-top: 1px solid rgba(167, 180, 155, 0.18);
border-bottom: 1px solid rgba(167, 180, 155, 0.18);
position: relative;
}
.marquee::before, .marquee::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--forest-deep), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--forest-deep), transparent); }
.marquee-track {
display: flex;
flex-shrink: 0;
gap: 64px;
padding-right: 64px;
white-space: nowrap;
font-family: var(--serif);
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 400;
letter-spacing: -0.02em;
}
.marquee-item {
display: inline-flex;
align-items: center;
gap: 24px;
}
.marquee-item em { font-style: italic; color: var(--sage-light); }
.marquee-dot {
color: var(--olive);
font-size: 0.7em;
opacity: 0.7;
}
/* ====================================================
STATS BAND — animated counters on forest panel
==================================================== */
.stats-band {
position: relative;
background:
radial-gradient(ellipse at 20% 20%, rgba(167, 180, 155, 0.18) 0%, transparent 55%),
radial-gradient(ellipse at 80% 80%, rgba(180, 155, 122, 0.12) 0%, transparent 55%),
linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
color: var(--cream);
padding: 96px 0;
overflow: hidden;
}
.stats-band-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.stats-orb {
position: absolute;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(167, 180, 155, 0.5) 0%, transparent 70%);
filter: blur(1px);
}
.stats-orb--1 { width: 280px; height: 280px; top: -80px; left: 5%; }
.stats-orb--2 { width: 200px; height: 200px; top: 30%; right: 8%; opacity: 0.75; }
.stats-orb--3 { width: 240px; height: 240px; bottom: -60px; left: 40%; opacity: 0.55; }
.stats-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
text-align: center;
}
@media (max-width: 900px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 32px; }
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.stat-num {
font-family: var(--serif);
font-size: clamp(54px, 7vw, 92px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
color: var(--cream);
background: linear-gradient(180deg, var(--cream) 0%, var(--sage-light) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-variant-numeric: tabular-nums;
}
.stat-label {
font-size: 13.5px;
color: rgba(244, 242, 235, 0.7);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
max-width: 20ch;
line-height: 1.4;
}
/* ====================================================
PHOTO STRIP — asymmetric lookbook
==================================================== */
.photo-strip {
background:
radial-gradient(ellipse at 80% 0%, rgba(167, 180, 155, 0.22) 0%, transparent 55%),
radial-gradient(ellipse at 0% 100%, rgba(180, 155, 122, 0.12) 0%, transparent 55%),
linear-gradient(180deg, #E8EDE0 0%, #EFF1E8 100%);
padding: clamp(96px, 12vw, 140px) 0;
overflow: hidden;
}
.photo-strip-head {
max-width: 720px;
margin: 0 auto clamp(48px, 6vw, 72px);
text-align: center;
}
.photo-strip-head h2 {
font-family: var(--serif);
font-size: clamp(40px, 5.2vw, 64px);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.02;
margin: 14px 0 18px;
}
.photo-strip-head .section-sub {
margin: 0 auto;
max-width: 580px;
font-size: 16.5px;
line-height: 1.6;
color: var(--muted);
}
.photo-strip-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px;
height: clamp(520px, 65vh, 720px);
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 760px) {
.photo-strip-grid { grid-template-columns: 1fr; grid-template-rows: repeat(3, 280px); height: auto; }
}
.photo-card {
position: relative;
border-radius: 22px;
overflow: hidden;
text-decoration: none;
color: var(--cream);
box-shadow:
0 4px 12px -2px rgba(31, 58, 46, 0.12),
0 24px 60px -20px rgba(31, 58, 46, 0.25);
background: var(--forest-deep);
isolation: isolate;
cursor: pointer;
}
.photo-card--feature {
grid-row: span 2;
}
.photo-card-image {
position: absolute;
inset: -8% -8%;
background-size: cover;
background-position: center;
transition: transform 0.7s cubic-bezier(.2,.7,.3,1), filter 0.7s ease;
z-index: 0;
}
.photo-card:hover .photo-card-image {
transform: scale(1.06);
filter: saturate(1.1) brightness(1.05);
}
.photo-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 35, 25, 0) 35%, rgba(20, 35, 25, 0.9) 100%);
z-index: 1;
}
.photo-card-overlay {
position: absolute;
z-index: 2;
inset: auto 0 0 0;
padding: 28px 32px 32px;
display: flex;
flex-direction: column;
gap: 8px;
}
.photo-card-tag {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(244, 242, 235, 0.12);
border: 1px solid rgba(244, 242, 235, 0.22);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 999px;
font-size: 11.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
color: rgba(244, 242, 235, 0.92);
margin-bottom: 6px;
}
.photo-card h3 {
font-family: var(--serif);
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.018em;
margin: 0;
color: var(--cream);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.photo-card--feature h3 { font-size: clamp(28px, 3vw, 40px); }
.photo-card h3 em { font-style: italic; color: var(--sage-light); font-weight: 400; }
/* ====================================================
PROMISE BAND — editorial split
==================================================== */
.promise-band {
padding: clamp(96px, 12vw, 140px) 0;
background:
radial-gradient(ellipse at 0% 50%, rgba(167,180,155,0.22) 0%, transparent 58%),
linear-gradient(180deg, #E8EDE0 0%, #EFF1E8 100%);
}
.promise-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(56px, 7vw, 96px);
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 900px) { .promise-grid { grid-template-columns: 1fr; gap: 48px; } }
.promise-lede h2 {
font-family: var(--serif);
font-size: clamp(34px, 4vw, 56px);
font-weight: 400;
letter-spacing: -0.022em;
line-height: 1.15;
margin: 18px 0 0;
color: var(--ink);
}
.promise-lede h2 em {
font-style: italic;
color: var(--olive);
font-weight: 400;
}
.promise-beats {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-direction: column;
gap: 32px;
}
.promise-beats li {
display: grid;
grid-template-columns: 56px 1fr;
gap: 22px;
align-items: start;
padding-bottom: 32px;
border-bottom: 1px solid var(--rule);
}
/* h4 + p both stack inside the wide right column (grid auto-flow was
shoving the into the 56px first column and wrapping every word). */
.promise-beats li > h4, .promise-beats li > p { grid-column: 2; }
.promise-beats li:last-child { border-bottom: none; padding-bottom: 0; }
.promise-num {
font-family: var(--serif);
font-size: 32px;
font-weight: 400;
color: var(--sage);
letter-spacing: -0.02em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.promise-beats h4 {
font-family: var(--serif);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.012em;
margin: 0 0 8px;
color: var(--ink);
}
.promise-beats p {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--muted);
}
/* ====================================================
MEET NAOMI — founder portrait
==================================================== */
.meet-naomi {
background:
radial-gradient(ellipse at 100% 0%, rgba(167, 180, 155, 0.16) 0%, transparent 55%),
var(--cream);
padding: clamp(96px, 12vw, 140px) 0;
overflow: hidden;
}
.meet-naomi-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(48px, 6vw, 88px);
align-items: start;
max-width: 1180px;
margin: 0 auto;
}
/* Drop the portrait so the top of the arch lines up with the first bio
sentence (i.e. below the eyebrow + "Hello, I'm Naomi" heading). The offset
tracks the heading's clamp() so it holds across viewport widths. */
.meet-naomi-photo { margin-top: clamp(117px, 83px + 5.6vw, 155px); }
@media (max-width: 900px) {
.meet-naomi-grid { grid-template-columns: 1fr; gap: 56px; }
.meet-naomi-photo { margin-top: 0; }
}
.meet-naomi-photo-frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 220px 220px 28px 28px;
box-shadow:
0 8px 24px -8px rgba(31, 58, 46, 0.18),
0 30px 80px -30px rgba(31, 58, 46, 0.3);
}
/* Inner clip layer. clip-path (not overflow:hidden) reliably clips the image
to the arched shape while it scales on hover — overflow:hidden + border-radius
drops the rounded corners mid-transform in some browsers. Shadow stays on the
frame above so it is never clipped away. */
.meet-naomi-photo-clip {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
clip-path: inset(0 round 220px 220px 28px 28px);
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
.meet-naomi-photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.8s cubic-bezier(.2,.7,.3,1);
}
.meet-naomi-photo-frame:hover img { transform: scale(1.04); }
.meet-naomi-photo-tag {
position: absolute;
bottom: 18px;
left: 18px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(20, 35, 25, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--cream);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid rgba(244, 242, 235, 0.18);
}
.meet-naomi-photo-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--sage-light);
box-shadow: 0 0 0 4px rgba(167, 180, 155, 0.3);
animation: mvn-pulse 2.4s ease-in-out infinite;
}
@keyframes mvn-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(167, 180, 155, 0.3); }
50% { box-shadow: 0 0 0 8px rgba(167, 180, 155, 0); }
}
.meet-naomi-copy h2 {
font-family: var(--serif);
font-size: clamp(40px, 5.4vw, 68px);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.04;
margin: 12px 0 26px;
color: var(--ink);
}
.meet-naomi-copy h2 em {
font-style: italic;
color: var(--olive);
font-weight: 400;
}
.meet-naomi-blurb {
font-size: 17px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 18px;
max-width: 52ch;
}
/* ====================================================
SERVICES — colour-drenched bento cards (v2)
Each service fully filled with a brand colour, alternating dark/light
for rhythm. Asymmetric bento on desktop, full-width stack on mobile.
==================================================== */
.svc-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 18px;
max-width: 1180px;
margin: 0 auto;
}
/* Two wide cards on top (span 3 each), three across the bottom (span 2 each). */
.svc[data-span="half"] { grid-column: span 3; }
.svc[data-span="third"] { grid-column: span 2; }
.svc {
position: relative;
overflow: hidden;
border-radius: 26px;
padding: 34px 34px 28px;
min-height: 330px;
display: flex;
flex-direction: column;
text-decoration: none;
isolation: isolate;
box-shadow:
0 2px 8px rgba(20, 35, 25, 0.10),
0 24px 50px -24px rgba(20, 35, 25, 0.28);
transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.svc:hover {
transform: translateY(-7px);
box-shadow:
0 4px 12px rgba(20, 35, 25, 0.14),
0 40px 80px -30px rgba(20, 35, 25, 0.4);
}
/* ── Per-accent colour themes (custom props shared by inner rules) ──
One cohesive sage/forest/olive family: two deep-green anchors (Home, Overnight), three lighter/mid greens between them, with the olive emphasis
tone carried by the warm-sage Pet Sitting card and the light-card watermarks.
--wm / --wm-opacity drive the faded icon echo. */
.svc[data-accent="forest"] { /* Home Visits — deep forest (dark anchor) */
background: linear-gradient(150deg, #2A4234 0%, #18291E 100%);
--fg: #F4F2EB; --fg-muted: rgba(244,242,235,0.78); --icon: #C5CFBC;
--chip-bg: rgba(244,242,235,0.13); --chip-br: rgba(244,242,235,0.26);
--wm: #C5CFBC; --wm-opacity: 0.08;
}
.svc[data-accent="olive"] { /* Pet Sitting — warm sage (carries the olive tone) */
background: linear-gradient(150deg, #CFD3B8 0%, #B3B894 100%);
--fg: #2C3320; --fg-muted: rgba(44,51,32,0.88); --icon: #4A4327;
--chip-bg: rgba(31,58,46,0.10); --chip-br: rgba(44,51,32,0.22);
--wm: #7A6A45; --wm-opacity: 0.12;
}
.svc[data-accent="sage"] { /* Luxury Boarding — cool light sage */
background: linear-gradient(150deg, #B7C6AB 0%, #93A684 100%);
--fg: #1F3A2E; --fg-muted: rgba(31,58,46,0.9); --icon: #1F3A2E;
--chip-bg: rgba(31,58,46,0.10); --chip-br: rgba(31,58,46,0.20);
--wm: #1F3A2E; --wm-opacity: 0.10;
}
.svc[data-accent="night"] { /* Overnight Care — deep forest-teal (dark anchor) */
background: linear-gradient(150deg, #1E3A2C 0%, #102019 100%);
--fg: #ECEDE3; --fg-muted: rgba(236,237,227,0.8); --icon: #C5CFBC;
--chip-bg: rgba(167,180,155,0.16); --chip-br: rgba(167,180,155,0.30);
--wm: #C5CFBC; --wm-opacity: 0.08;
}
.svc[data-accent="moss"] { /* Feline Behaviour — mid moss green */
background: linear-gradient(150deg, #51664A 0%, #3B4C36 100%);
--fg: #F4F2EB; --fg-muted: rgba(244,242,235,0.86); --icon: #C5CFBC;
--chip-bg: rgba(244,242,235,0.14); --chip-br: rgba(244,242,235,0.28);
--wm: #C5CFBC; --wm-opacity: 0.09;
}
/* Soft radial highlight top-left for dimensional depth */
.svc::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 18% 12%, rgba(255,255,255,0.14) 0%, transparent 45%);
pointer-events: none;
z-index: 0;
}
/* Night card gets a couple of star specks */
.svc[data-accent="night"]::after {
content: "";
position: absolute;
top: 26px; right: 30%;
width: 3px; height: 3px;
border-radius: 50%;
background: var(--sage-light);
box-shadow: 40px 18px 0 -1px rgba(197,207,188,0.7), -30px 40px 0 -1.5px rgba(197,207,188,0.5);
z-index: 0;
}
/* Oversized faded echo of the card's own icon — soft graphic texture that ties
the set together. Bleeds off the bottom-right corner, sits behind the content
(z-index 0). Colour + opacity come from the per-accent --wm tokens. */
.svc-watermark {
position: absolute;
right: -22px;
bottom: -28px;
width: 188px;
height: 188px;
z-index: 0;
color: var(--wm, var(--fg));
opacity: var(--wm-opacity, 0.09);
pointer-events: none;
transform: rotate(-10deg);
transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
}
.svc-watermark svg { width: 100%; height: 100%; display: block; }
.svc:hover .svc-watermark {
transform: rotate(-10deg) scale(1.07);
opacity: calc(var(--wm-opacity, 0.09) + 0.03);
}
/* ── Top row: icon + price chip ── */
.svc-top {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: auto;
}
.svc-icon {
width: 56px; height: 56px;
display: grid;
place-items: center;
border-radius: 16px;
background: var(--chip-bg);
color: var(--icon);
flex-shrink: 0;
transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.svc:hover .svc-icon { transform: scale(1.06) rotate(-3deg); }
.svc-icon svg { width: 32px; height: 32px; }
.svc-chip {
display: inline-flex;
align-items: center;
padding: 8px 15px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--fg);
background: var(--chip-bg);
border: 1px solid var(--chip-br);
white-space: nowrap;
}
/* ── Body ── */
.svc-body {
position: relative;
z-index: 1;
margin-top: 26px;
}
.svc-body h3 {
font-family: var(--serif);
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 500;
letter-spacing: -0.018em;
line-height: 1.05;
margin: 0 0 12px;
color: var(--fg);
}
.svc-body p {
font-size: 15.5px;
line-height: 1.55;
font-weight: 600;
color: var(--fg-muted);
margin: 0;
max-width: 38ch;
}
/* ── Foot: CTA text + circular arrow button ── */
.svc-foot {
position: relative;
z-index: 1;
margin-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.svc-cta {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg);
}
.svc-arrow {
width: 46px; height: 46px;
flex-shrink: 0;
border-radius: 50%;
border: 1.5px solid var(--chip-br);
background: var(--chip-bg);
color: var(--fg);
display: grid;
place-items: center;
transition: transform .35s cubic-bezier(.2,.7,.3,1), background .3s ease, border-color .3s ease;
}
.svc-arrow svg { width: 18px; height: 18px; }
.svc:hover .svc-arrow { transform: translateX(4px); border-color: var(--fg); }
/* ── Responsive ── */
@media (max-width: 920px) {
.svc-grid { grid-template-columns: repeat(2, 1fr); }
.svc[data-span="half"], .svc[data-span="third"] { grid-column: span 1; }
/* 5 cards in 2 columns leaves one over — let the last span full width. */
.svc-grid > .svc:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.svc-grid { grid-template-columns: 1fr; gap: 14px; }
.svc { min-height: 280px; padding: 28px 26px 24px; border-radius: 22px; }
}
/* ── Naomi credential cards — big year/number, then label (reads as a timeline) ── */
/* ── Qualifications & credentials panel (replaces the old stat timeline) ── */
/* Full-width band under the portrait + bio grid */
.naomi-quals {
max-width: 1180px;
margin: clamp(48px, 6vw, 72px) auto 0;
padding: 28px 32px 26px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 20px;
box-shadow: 0 2px 8px rgba(20,35,25,0.04), 0 24px 48px -34px rgba(20,35,25,0.22);
}
.naomi-quals-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule);
}
.naomi-quals-badge {
width: 40px; height: 40px;
flex-shrink: 0;
border-radius: 12px;
display: grid; place-items: center;
background: var(--sage-tint);
color: var(--forest);
border: 1px solid var(--sage-soft);
}
.naomi-quals-badge svg { width: 22px; height: 22px; }
.naomi-quals-head h3 {
font-family: var(--serif);
font-size: 23px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--forest);
margin: 0;
}
.naomi-quals-list {
list-style: none;
padding: 0; margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px 28px;
}
@media (max-width: 1080px) {
.naomi-quals-list { grid-template-columns: repeat(2, 1fr); }
}
.naomi-qual {
display: flex;
align-items: flex-start;
gap: 10px;
}
.naomi-qual-check {
width: 22px; height: 22px;
flex-shrink: 0;
margin-top: 1px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--sage-tint);
color: var(--forest);
}
.naomi-qual-check svg { width: 13px; height: 13px; }
.naomi-qual-text {
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
}
/* Certificate pills — grouped on their own row under the list */
.naomi-quals-certs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 12px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--rule);
}
.naomi-quals-certs-label {
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
margin-right: 6px;
}
.naomi-qual-cert {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--sans);
font-size: 11.5px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--olive);
text-decoration: none;
cursor: pointer;
padding: 5px 11px 5px 8px;
border: 1px solid var(--sage-soft);
border-radius: 999px;
background: var(--sage-tint);
-webkit-appearance: none;
appearance: none;
transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.naomi-qual-cert svg { width: 14px; height: 14px; }
.naomi-qual-cert:hover {
color: var(--forest);
border-color: var(--sage);
background: var(--sage-soft);
transform: translateY(-1px);
}
/* Dark mode */
body.dark .naomi-quals { background: var(--bg-surface); border-color: var(--rule); }
body.dark .naomi-quals-head { border-color: var(--rule); }
body.dark .naomi-quals-head h3 { color: var(--ink); }
body.dark .naomi-quals-badge { background: rgba(167,180,155,0.12); color: var(--sage-light); border-color: var(--rule); }
body.dark .naomi-qual-check { background: rgba(167,180,155,0.12); color: var(--sage-light); }
body.dark .naomi-qual-text { color: var(--ink); }
body.dark .naomi-qual-cert { background: rgba(167,180,155,0.1); border-color: var(--rule); color: var(--olive); }
body.dark .naomi-qual-cert:hover { background: rgba(167,180,155,0.18); border-color: var(--sage); color: var(--sage-light); }
/* ── Certificate lightbox (in-page viewer) ── */
.cert-lightbox {
position: fixed;
inset: 0;
z-index: 2000;
display: grid;
place-items: center;
padding: 28px;
background: rgba(15, 25, 19, 0.64);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
animation: certFade .22s ease;
}
@keyframes certFade { from { opacity: 0; } to { opacity: 1; } }
.cert-lightbox-dialog {
position: relative;
width: auto;
max-width: min(620px, 92vw);
background: var(--paper);
border-radius: 18px;
padding: 18px;
box-shadow: 0 40px 90px -28px rgba(0,0,0,0.62);
animation: certPop .26s cubic-bezier(.2,.7,.3,1);
}
@keyframes certPop {
from { opacity: 0; transform: translateY(14px) scale(.97); }
to { opacity: 1; transform: none; }
}
.cert-lightbox-figure {
border-radius: 10px;
overflow: hidden;
background: #fff;
border: 1px solid var(--rule);
display: flex;
justify-content: center;
}
.cert-lightbox-figure img {
display: block;
width: auto;
max-width: 100%;
max-height: calc(90vh - 110px);
height: auto;
}
.cert-lightbox-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 16px;
flex-wrap: wrap;
}
.cert-lightbox-meta strong {
display: block;
font-family: var(--serif);
font-size: 18px;
font-weight: 600;
color: var(--forest);
letter-spacing: -0.01em;
}
.cert-lightbox-meta span {
display: block;
font-size: 12.5px;
color: #6B7568; /* fixed muted — the dialog stays light in dark mode */
margin-top: 3px;
}
.cert-lightbox-pdf { flex-shrink: 0; }
.cert-lightbox-close {
position: absolute;
top: -14px; right: -14px;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--forest);
color: var(--cream);
border: none;
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 8px 18px -5px rgba(0,0,0,0.55);
transition: transform .2s ease, background .2s ease;
}
.cert-lightbox-close:hover { transform: scale(1.08); background: var(--forest-deep); }
.cert-lightbox-close svg { width: 18px; height: 18px; }
@media (max-width: 520px) {
.cert-lightbox { padding: 16px; }
.cert-lightbox-close { top: -10px; right: -10px; }
}
@media (prefers-reduced-motion: reduce) {
.cert-lightbox, .cert-lightbox-dialog { animation: none; }
}
.meet-naomi-photo-frame.no-img {
background: linear-gradient(160deg, var(--sage) 0%, var(--forest) 100%);
}
.meet-naomi-photo-frame.no-img img { display: none; }
@media (max-width: 600px) {
.naomi-quals { padding: 22px 20px 20px; }
.naomi-quals-list { grid-template-columns: 1fr; gap: 13px; }
}
/* ====================================================
Image placeholders + "What to expect" media band
==================================================== */
.photo-ph {
position: relative;
width: 100%;
border-radius: 22px;
overflow: hidden;
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,0.5) 0%, transparent 55%),
linear-gradient(150deg, var(--sage) 0%, var(--sage-soft) 55%, var(--sage-tint) 100%);
box-shadow:
0 2px 8px rgba(20,35,25,0.08),
0 24px 50px -24px rgba(20,35,25,0.28);
}
.photo-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ───── Photo carousel (service-page ExpectBand) ───── */
.photo-carousel { position: relative; }
.photo-carousel .carousel-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
opacity: 0;
transition: opacity 0.9s ease;
pointer-events: none;
}
.photo-carousel .carousel-slide.active { opacity: 1; }
.carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(244, 242, 235, 0.82);
color: var(--forest);
border: 1px solid rgba(31, 58, 46, 0.12);
box-shadow: 0 4px 14px rgba(20, 35, 25, 0.18);
cursor: pointer;
opacity: 0;
transition: opacity 0.25s ease, background 0.2s ease;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.photo-carousel:hover .carousel-arrow, .photo-carousel:focus-within .carousel-arrow { opacity: 1; }
.carousel-arrow:hover { background: var(--cream); }
.carousel-arrow svg { width: 20px; height: 20px; }
.carousel-arrow--prev { left: 12px; }
.carousel-arrow--next { right: 12px; }
.carousel-dots {
position: absolute;
left: 0;
right: 0;
bottom: 12px;
z-index: 3;
display: flex;
justify-content: center;
gap: 8px;
}
.carousel-dot {
width: 8px;
height: 8px;
border-radius: 50%;
padding: 0;
background: rgba(244, 242, 235, 0.55);
border: 1px solid rgba(31, 58, 46, 0.3);
box-shadow: 0 1px 4px rgba(20, 35, 25, 0.25);
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active {
background: var(--cream);
transform: scale(1.35);
border-color: var(--forest);
}
/* Always show arrows on touch devices (no hover) */
@media (hover: none) {
.carousel-arrow { opacity: 1; }
}
.photo-ph-inner {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--forest);
opacity: 0.6;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
}
.photo-ph-inner svg { width: 38px; height: 38px; stroke-width: 1.4; }
.expect-band {
background:
radial-gradient(ellipse at 100% 0%, rgba(167,180,155,0.14) 0%, transparent 55%),
var(--cream);
overflow: hidden;
}
.expect-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
max-width: 1120px;
margin: 0 auto;
}
.expect-grid--rev { direction: rtl; }
.expect-grid--rev > * { direction: ltr; }
.expect-copy h2 {
font-family: var(--serif);
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.06;
margin: 12px 0 28px;
color: var(--ink);
}
.expect-copy h2 em { font-style: italic; color: var(--olive); font-weight: 400; }
.expect-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 24px;
}
.expect-steps li {
display: grid;
grid-template-columns: 48px 1fr;
gap: 18px;
align-items: start;
}
.expect-step-num {
font-family: var(--serif);
font-size: 24px;
font-weight: 500;
color: var(--sage);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.expect-steps h4 {
font-family: var(--serif);
font-size: 19px;
font-weight: 500;
margin: 0 0 5px;
color: var(--ink);
}
.expect-steps p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
@media (max-width: 820px) {
.expect-grid { grid-template-columns: 1fr; gap: 36px; }
.expect-grid--rev { direction: ltr; }
.expect-media { max-width: 420px; }
}
/* Bolder price-tier icons */
.price-tier-icon svg { width: 34px; height: 34px; stroke-width: 1.9; }
/* ── Photo placeholder banner (boarding / overnight) ── */
.ph-banner { max-width: 720px; margin: 0 auto 22px; }
/* Centre the sleeping cat in the boarding banner (4:3 source in a 2:1 frame) */
#luxury-boarding .ph-banner img { object-position: center 30%; }
/* ── Home gallery: asymmetric photo band ── */
.home-gallery {
background:
radial-gradient(ellipse at 10% 0%, rgba(167,180,155,0.12) 0%, transparent 55%),
var(--cream);
}
.home-gallery-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
grid-template-rows: auto auto;
gap: 18px;
max-width: 1080px;
margin: 0 auto;
}
.home-gallery-feature {
grid-row: span 2;
/* Stretch to the full two-row height so its bottom lines up with the stacked
pair on the right (overrides the inline portrait aspect-ratio). */
aspect-ratio: auto !important;
height: 100%;
}
.home-gallery-feature img { position: absolute; inset: 0; object-position: center 30%; }
@media (max-width: 760px) {
.home-gallery-grid { grid-template-columns: 1fr 1fr; }
/* Single row again — restore a definite ratio so it has height. */
.home-gallery-feature { grid-row: auto; grid-column: span 2; aspect-ratio: 4 / 3 !important; height: auto; }
}
@media (max-width: 480px) {
.home-gallery-grid { grid-template-columns: 1fr; }
.home-gallery-feature { grid-column: auto; }
}
/* ====================================================
CONTACT / BOOKING ENQUIRY PAGE
Two columns: reassurance + contact methods, and the enquiry form card.
==================================================== */
.contact-section {
background:
radial-gradient(ellipse at 90% 0%, rgba(167, 180, 155, 0.22) 0%, transparent 50%),
radial-gradient(ellipse at 8% 100%, rgba(180, 155, 122, 0.12) 0%, transparent 52%),
linear-gradient(180deg, #EFF1E8 0%, #F4F2EB 100%);
}
.contact-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 60px;
align-items: start;
}
/* ── Left: reassurance + contact methods ── */
.contact-aside h2 {
font-size: clamp(28px, 3vw, 38px);
font-weight: 500;
line-height: 1.12;
letter-spacing: -0.018em;
margin: 0 0 18px;
}
.contact-aside > p {
font-size: 16.5px;
line-height: 1.65;
color: var(--ink-soft);
margin: 0 0 30px;
max-width: 44ch;
}
.contact-methods {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 22px;
}
.contact-methods li {
display: flex;
align-items: flex-start;
gap: 16px;
}
.contact-method-icon {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 14px;
display: grid;
place-items: center;
background: var(--sage-tint);
color: var(--forest);
border: 1px solid var(--sage-soft);
}
.contact-method-icon svg { width: 20px; height: 20px; }
.contact-methods strong {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 3px;
}
.contact-methods a, .contact-methods div > span {
font-size: 16px;
color: var(--ink);
text-decoration: none;
line-height: 1.45;
}
.contact-methods a:hover { color: var(--olive); }
/* ── Right: form card ── */
.contact-form-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 24px;
padding: 36px 36px 30px;
box-shadow: 0 2px 8px rgba(20,35,25,0.05), 0 30px 60px -34px rgba(20,35,25,0.28);
display: flex;
flex-direction: column;
gap: 18px;
}
.contact-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.contact-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.contact-field > span {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--ink-soft);
}
.contact-field input, .contact-field select, .contact-field textarea {
width: 100%;
font-family: var(--sans);
font-size: 15.5px;
color: var(--ink);
background: var(--cream);
border: 1px solid var(--rule);
border-radius: 12px;
padding: 13px 15px;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
-webkit-appearance: none;
appearance: none;
}
.contact-field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
.contact-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236B7568' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 13px center;
background-size: 18px;
padding-right: 42px;
cursor: pointer;
}
.contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--muted-2, #9aa491); }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus {
outline: none;
border-color: var(--sage);
background: var(--paper);
box-shadow: 0 0 0 3px rgba(167, 180, 155, 0.28);
}
.contact-submit { margin-top: 6px; align-self: flex-start; }
.contact-form-note {
font-size: 12.5px;
color: var(--muted);
margin: 2px 0 0;
}
/* ── Success state ── */
.contact-success { text-align: center; align-items: center; gap: 14px; padding: 48px 36px; }
.contact-success-icon {
width: 64px; height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--sage-tint);
color: var(--forest);
border: 1px solid var(--sage-soft);
}
.contact-success-icon svg { width: 30px; height: 30px; }
.contact-success h3 {
font-family: var(--serif);
font-size: clamp(24px, 2.6vw, 30px);
font-weight: 500;
margin: 6px 0 0;
}
.contact-success p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0; max-width: 42ch; }
.contact-success-alt { color: var(--muted); font-size: 14px; margin-top: 10px; }
.contact-success-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* ── Dark mode ── */
body.dark .contact-section {
background:
radial-gradient(ellipse at 50% -12%, rgba(167, 180, 155, 0.08) 0%, transparent 60%),
var(--bg-page);
}
body.dark .contact-method-icon { background: rgba(167, 180, 155, 0.12); color: var(--sage-light); border-color: var(--rule); }
body.dark .contact-form-card { background: var(--bg-surface); border-color: var(--rule); }
body.dark .contact-field input, body.dark .contact-field select, body.dark .contact-field textarea {
background: var(--bg-surface-2);
border-color: var(--rule);
color: var(--ink);
}
body.dark .contact-field input:focus, body.dark .contact-field select:focus, body.dark .contact-field textarea:focus {
border-color: var(--sage);
background: var(--bg-surface-2);
box-shadow: 0 0 0 3px rgba(167, 180, 155, 0.22);
}
body.dark .contact-success-icon { background: rgba(167, 180, 155, 0.14); color: var(--sage-light); border-color: var(--rule); }
/* ── Responsive ── */
@media (max-width: 880px) {
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 520px) {
.contact-row { grid-template-columns: 1fr; }
.contact-form-card { padding: 26px 22px 24px; border-radius: 20px; }
}
/* ====================================================
ARTICLE (learning post)
==================================================== */
.article-hero-inner { max-width: 760px; margin: 0 auto; text-align: left; }
.article-figure {
max-width: 820px;
margin: 6px auto 0;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 22px 52px -28px rgba(20, 35, 25, 0.45);
}
.article-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Inline images scattered through the body of an article */
.article-inline {
margin: 32px 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 18px 42px -26px rgba(20, 35, 25, 0.42);
}
.article-inline img { width: 100%; height: auto; display: block; }
.article-inline figcaption {
font-size: 13.5px;
line-height: 1.5;
color: var(--muted);
padding: 11px 16px 0;
text-align: center;
}
.article-back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--olive);
text-decoration: none;
margin-bottom: 22px;
}
.article-back svg { width: 15px; height: 15px; transform: rotate(180deg); }
.article-back:hover { color: var(--forest); }
.article-body-section { padding: 10px 0 96px; }
.article-body { max-width: 720px; margin: 0 auto; }
.article-body > p {
font-size: 18.5px;
line-height: 1.75;
color: var(--ink-soft);
margin: 0 0 20px;
}
.article-body h2 {
font-family: var(--serif);
font-size: clamp(23px, 2.4vw, 28px);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--forest);
margin: 42px 0 14px;
}
.article-lead-in { margin-bottom: 10px !important; font-weight: 600; color: var(--ink) !important; }
.article-list {
list-style: none;
padding: 0;
margin: 0 0 22px;
display: flex;
flex-direction: column;
gap: 9px;
}
.article-list li {
position: relative;
padding-left: 24px;
font-size: 17.5px;
line-height: 1.6;
color: var(--ink-soft);
}
.article-list li::before {
content: "";
position: absolute;
left: 3px; top: 0.62em;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--olive);
}
.article-keypoints {
background: var(--sage-tint);
border: 1px solid var(--sage-soft);
border-radius: 18px;
padding: 26px 30px;
margin: 34px 0 40px;
}
.article-keypoints h2 { margin: 0 0 14px; font-size: 19px; }
.article-keypoints ul {
list-style: none;
padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 11px;
}
.article-keypoints li {
position: relative;
padding-left: 26px;
font-size: 15.5px;
line-height: 1.5;
color: var(--ink-soft);
}
.article-keypoints li::before {
content: "";
position: absolute;
left: 2px; top: 0.42em;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--sage);
border: 2px solid var(--forest);
}
.article-cta {
margin-top: 46px;
padding: 32px 34px;
border-radius: 20px;
background: linear-gradient(150deg, #C7D2B9 0%, #ABBC98 100%);
border: 1px solid rgba(31, 58, 46, 0.12);
}
.article-cta h2 { margin: 0 0 10px; color: var(--forest); }
.article-cta p { font-size: 16px; line-height: 1.65; color: rgba(31, 58, 46, 0.82); margin: 0 0 22px; }
.article-cta-pointer {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15.5px;
font-weight: 700;
color: var(--forest);
}
.article-cta-pointer svg { width: 18px; height: 18px; transform: rotate(90deg); flex-shrink: 0; }
/* Dark mode */
body.dark .article-body h2 { color: var(--ink); }
body.dark .article-keypoints { background: var(--bg-surface); border-color: var(--rule); }
body.dark .article-keypoints h2 { color: var(--ink); }
body.dark .article-keypoints li::before { border-color: var(--sage-light); }
/* .article-cta keeps its jade-green highlight in both modes (dark text reads on it) */
@media (max-width: 560px) {
.article-keypoints, .article-cta { padding: 24px 22px; }
.article-body > p { font-size: 17px; }
}
/* ====================================================
TESTIMONIALS — Facebook + Google reviews
==================================================== */
.tm-card {
position: relative;
margin: 0;
background: var(--paper);
border: 1.5px solid var(--sage-soft);
border-radius: 26px;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 2px 8px rgba(20,35,25,0.04), 0 22px 44px -30px rgba(20,35,25,0.22);
}
.tm-card > .tm-stars { margin: 26px 28px 14px; }
/* Carousel — slides share one grid cell so the frame is as tall as the
longest review (no reflow); crossfade between them. */
.tm-stack { display: grid; }
.tm-stack > .tm-slide {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity .55s ease;
pointer-events: none;
}
.tm-stack > .tm-slide.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.tm-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 22px;
}
.tm-arrow {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--sage-soft);
background: var(--paper);
color: var(--forest);
display: grid;
place-items: center;
cursor: pointer;
flex-shrink: 0;
transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.tm-arrow svg { width: 18px; height: 18px; }
.tm-arrow:hover { background: var(--sage-tint); border-color: var(--sage); transform: translateY(-1px); }
.tm-dots { display: flex; gap: 8px; }
.tm-dot {
width: 8px; height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: var(--sage-soft);
cursor: pointer;
transition: background .2s ease, transform .2s ease;
}
.tm-dot.is-active { background: var(--olive); transform: scale(1.25); }
.tm-stars {
display: inline-flex;
gap: 3px;
color: var(--olive);
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.tm-stars svg { width: 17px; height: 17px; }
.tm-card blockquote {
margin: 0;
padding: 0 28px 24px;
font-size: 16px;
line-height: 1.62;
color: var(--ink-soft);
flex: 1;
position: relative;
z-index: 1;
}
/* Name + source strip, attached to the bottom of the card */
.tm-card figcaption {
margin-top: auto;
padding: 15px 28px;
background: var(--sage-tint);
border-top: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.tm-name {
font-family: var(--serif);
font-size: 16px;
font-weight: 600;
color: var(--forest);
}
.tm-source {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--muted);
}
.tm-source svg { width: 15px; height: 15px; }
/* Service-page single review */
.service-testimonial { background: var(--cream-warm); }
.tm-single { max-width: 760px; margin: 0 auto; }
.tm-single .tm-card { padding: 38px 40px 30px; }
.tm-single .tm-card blockquote { font-size: 17.5px; line-height: 1.66; }
body.dark .service-testimonial { background: var(--bg-surface); }
body.dark .tm-card { background: var(--bg-surface); border-color: var(--rule); }
body.dark .service-testimonial .tm-card { background: var(--bg-surface-2); }
body.dark .tm-name { color: var(--ink); }
body.dark .tm-card figcaption { border-color: var(--rule); background: rgba(167, 180, 155, 0.1); }
body.dark .tm-arrow { background: var(--bg-surface); border-color: var(--rule); color: var(--sage-light); }
body.dark .tm-arrow:hover { background: var(--bg-surface-2); border-color: var(--sage); }
body.dark .tm-dot { background: rgba(167,180,155,0.3); }
body.dark .tm-dot.is-active { background: var(--olive); }
/* Responsive */
@media (max-width: 560px) {
.tm-single .tm-card { padding: 28px 24px 24px; }
}
/* ====================================================
CHAT WIDGET
Floating assistant bubble + panel (chat.jsx). Mounted in its own React
root on every page; styled to match the brand: forest green, cream,
serif heading, soft shadows.
==================================================== */
.mvn-chat-fab {
position: fixed;
right: clamp(16px, 3vw, 28px);
bottom: clamp(16px, 3vw, 28px);
z-index: 900;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border: none;
border-radius: 999px;
background: var(--forest, #22392b);
color: #f6f3ec;
font-family: var(--sans, "Nunito", sans-serif);
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 30px rgba(20, 35, 25, 0.35);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.mvn-chat-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(20, 35, 25, 0.4); }
.mvn-chat-fab svg { width: 22px; height: 22px; }
.mvn-chat-fab.is-open { padding: 14px; border-radius: 50%; }
.mvn-chat-panel {
position: fixed;
right: clamp(12px, 3vw, 28px);
bottom: clamp(76px, 3vw + 72px, 96px);
z-index: 901;
width: min(390px, calc(100vw - 24px));
height: min(560px, calc(100dvh - 120px));
display: flex;
flex-direction: column;
background: var(--cream, #faf7f1);
border: 1px solid rgba(34, 57, 43, 0.12);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(20, 35, 25, 0.28);
animation: mvn-chat-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes mvn-chat-in {
from { opacity: 0; transform: translateY(14px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.mvn-chat-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
background: var(--forest, #22392b);
color: #f6f3ec;
}
.mvn-chat-title {
font-family: var(--serif, "Newsreader", serif);
font-size: 20px;
line-height: 1.2;
}
.mvn-chat-subtitle { font-size: 12.5px; opacity: 0.75; margin-top: 2px; }
.mvn-chat-close {
background: rgba(246, 243, 236, 0.12);
border: none;
border-radius: 50%;
width: 42px;
height: 42px;
display: grid;
place-items: center;
color: inherit;
cursor: pointer;
}
.mvn-chat-close svg { width: 17px; height: 17px; }
.mvn-chat-close:hover { background: rgba(246, 243, 236, 0.22); }
.mvn-chat-list {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain; /* don't chain scrolling to the page behind */
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.mvn-chat-msg {
max-width: 85%;
padding: 10px 14px;
border-radius: 16px;
font-size: 14.5px;
line-height: 1.5;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.mvn-chat-msg.is-bot {
align-self: flex-start;
background: #fff;
border: 1px solid rgba(34, 57, 43, 0.1);
border-bottom-left-radius: 6px;
color: var(--ink, #24312a);
}
.mvn-chat-msg.is-user {
align-self: flex-end;
background: var(--accent, #3c5a45);
color: #f6f3ec;
border-bottom-right-radius: 6px;
}
.mvn-chat-suggestions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.mvn-chat-chip {
border: 1px solid rgba(34, 57, 43, 0.25);
background: transparent;
color: var(--ink, #24312a);
border-radius: 999px;
padding: 11px 16px;
font-size: 13.5px;
font-family: inherit;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.mvn-chat-chip:hover { background: var(--forest, #22392b); color: #f6f3ec; }
.mvn-chat-typing { display: flex; gap: 5px; align-items: center; min-height: 20px; }
.mvn-chat-typing span {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(34, 57, 43, 0.4);
animation: mvn-chat-dot 1.2s infinite ease-in-out;
}
.mvn-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.mvn-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes mvn-chat-dot {
0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.mvn-chat-inputrow {
display: flex;
gap: 8px;
padding: 12px 14px 8px;
border-top: 1px solid rgba(34, 57, 43, 0.1);
background: #fff;
}
.mvn-chat-inputrow input {
flex: 1;
min-width: 0;
border: 1px solid rgba(34, 57, 43, 0.2);
border-radius: 999px;
padding: 10px 16px;
font-size: 16px; /* below 16px, iOS Safari zooms the page when focused */
font-family: inherit;
color: var(--ink, #24312a);
background: var(--cream, #faf7f1);
outline: none;
}
.mvn-chat-inputrow input:focus { border-color: var(--accent, #3c5a45); }
.mvn-chat-inputrow button {
width: 44px;
height: 44px;
flex: none;
border: none;
border-radius: 50%;
background: var(--forest, #22392b);
color: #f6f3ec;
display: grid;
place-items: center;
cursor: pointer;
}
.mvn-chat-inputrow button svg { width: 18px; height: 18px; }
.mvn-chat-inputrow button:disabled { opacity: 0.4; cursor: default; }
.mvn-chat-privacy {
padding: 8px 16px 12px;
background: #fff;
font-size: 11px;
line-height: 1.45;
color: rgba(36, 49, 42, 0.6);
}
@media (max-width: 480px) {
.mvn-chat-panel {
right: 8px;
left: 8px;
width: auto;
bottom: 74px;
height: min(540px, calc(100dvh - 90px));
}
}
body.dark .mvn-chat-panel { background: #1d2620; border-color: rgba(246, 243, 236, 0.12); }
body.dark .mvn-chat-msg.is-bot { background: #27332b; border-color: rgba(246, 243, 236, 0.1); color: #e8e4da; }
body.dark .mvn-chat-inputrow { background: #1d2620; border-top-color: rgba(246, 243, 236, 0.1); }
body.dark .mvn-chat-inputrow input { background: #27332b; color: #e8e4da; border-color: rgba(246, 243, 236, 0.18); }
body.dark .mvn-chat-privacy { background: #1d2620; color: rgba(232, 228, 218, 0.55); }
body.dark .mvn-chat-chip { color: #e8e4da; border-color: rgba(246, 243, 236, 0.3); }
/* Links inside bot replies (linkified pages, phone, email) */
.mvn-chat-msg a {
color: var(--forest, #22392b);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
overflow-wrap: anywhere;
}
.mvn-chat-msg a:hover { color: var(--accent, #3c5a45); }
body.dark .mvn-chat-msg a { color: var(--sage-light, #C5CFBC); }
/* Racing border on the closed chat bubble: an animated multi-colour stroke
circling the pill. The pseudo-element is masked down to ONLY the 3px ring
(mask-composite cuts out the content box), so no colour can ever appear
inside the button — the conic gradient rotating behind the mask makes the
stroke colours race around the edge. Hidden while the panel is open and
for reduced motion. */
@property --mvn-fab-sweep {
syntax: "";
initial-value: 0deg;
inherits: false;
}
.mvn-chat-fab::before {
content: "";
position: absolute;
inset: -3px;
border-radius: inherit;
padding: 3px;
box-sizing: border-box;
pointer-events: none;
background: conic-gradient(
from var(--mvn-fab-sweep),
#a7b49b 0deg,
#ffd98a 90deg,
#b49a7a 180deg,
#e8ede0 270deg,
#a7b49b 360deg
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: mvn-fab-sweep 2s linear infinite;
}
.mvn-chat-fab.is-open::before { display: none; }
@keyframes mvn-fab-sweep {
to { --mvn-fab-sweep: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.mvn-chat-fab::before { display: none; }
}
/* ====================================================
TESTIMONIALS PAGE
All reviews in one place (testimonials.html). Masonry-style columns of
the existing tm-cards; service pages now show a teaser + link band
(.tm-linkband) where their carousels used to be.
==================================================== */
.tm-page-head {
padding-top: clamp(140px, 18vw, 190px);
padding-bottom: 0;
}
.tm-page-head .section-head { margin-bottom: 0; }
.tm-page-head h1 em { font-style: italic; color: var(--olive); font-weight: 400; }
.tm-page-wall { padding-top: clamp(40px, 5vw, 64px); }
.tm-wall {
columns: 3 320px;
column-gap: 24px;
}
.tm-wall .tm-card {
break-inside: avoid;
margin-bottom: 24px;
}
/* Service-page teaser + link band (replaces the old per-service carousel) */
.tm-linkband {
max-width: 760px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.tm-linkband-quote {
margin: 0;
font-family: var(--serif);
font-size: clamp(19px, 2.4vw, 23px);
line-height: 1.55;
color: var(--ink-soft);
}
.tm-linkband-quote cite {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-style: normal;
font-size: 14px;
color: var(--muted);
}
.tm-linkband .btn svg { width: 16px; height: 16px; }
body.dark .tm-linkband-quote { color: var(--ink-soft); }
/* Contact form: honeypot (hidden from people) + error message */
.contact-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.contact-form-error {
margin: 0 0 14px;
padding: 12px 16px;
border-radius: var(--r-sm);
background: #FBEAE7;
border: 1px solid #E4B7AE;
color: #7A2E1E;
font-size: 14.5px;
line-height: 1.5;
}
body.dark .contact-form-error {
background: rgba(180, 90, 70, 0.14);
border-color: rgba(200, 120, 100, 0.35);
color: #F0C9BF;
}
.contact-submit:disabled { opacity: 0.6; cursor: default; }