/* Fonts are loaded via + in each
page's (faster than a render-blocking CSS @import). */
:root {
--color-bg: #F8F6F0; /* Pale warm cream */
--color-surface: #FFFFFF; /* Pure White */
--color-surface-alt: #F4F0E6; /* Slightly darker cream for cards */
--color-sage: #E8EDE3; /* Pastel green note */
--color-clay: #F2EBE5; /* Pastel clay note */
--color-sand: #F4EEDF; /* Pastel sand note */
--color-text: #191B1A; /* Inky dark */
--color-text-light: #4A504D; /* Darkened for WCAG AA */
--color-border: #E2DDD3; /* Subtle dividing lines */
--color-primary: #191B1A;
--color-accent: #C9A96E; /* Warm golden ochre */
--color-cta: #3A2E28; /* Warm espresso — CTA colour, softer than inky black */
--color-cta-hover: #4A3A32;
--color-cta-text: #F8F6F0; /* Text on CTA (cream) */
--font-heading: 'Playfair Display', serif;
--font-body: 'Mulish', sans-serif;
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 9rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background-color: var(--color-bg);
color: var(--color-text);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
/* Typography elements */
h1 { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; color: var(--color-text);}
h2 { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 4rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: var(--spacing-md); color: var(--color-text);}
h3 { font-family: var(--font-heading); font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; color: var(--color-text); margin-bottom: var(--spacing-md);}
h4 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: var(--spacing-xs); color: var(--color-text);}
p { font-size: 1.125rem; color: var(--color-text-light); margin-bottom: 1.4rem; line-height: 1.75; text-wrap: pretty; }
h1, h2, h3, .testimonial-quote { text-wrap: balance; }
a { color: var(--color-text); text-decoration: none; transition: var(--transition); }
/* Editorial italic emphasis on a key word in headings */
h1 em, h2 em, h3 em, h4 em, .massive-quote em, .testimonial-quote em { font-style: italic; font-weight: 400; }
.meta-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-light);
display: block;
margin-bottom: var(--spacing-sm);
font-weight: 600;
}
/* Containers & Base Padding */
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 60px);
}
.container-narrow { max-width: 780px; margin: 0 auto; }
.section { padding: var(--spacing-xl) 0; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.p-0 { padding: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.text-center { text-align: center; }
.bg-surface { background-color: transparent; }
.bg-surface-alt { background-color: transparent; }
.bg-dark { background-color: var(--color-text); color: var(--color-bg); }
.bg-dark h2, .bg-dark p { color: var(--color-bg); }
.bg-dark .meta-label { color: rgba(248, 246, 240, 0.6); }
/* Grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-lg); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-lg); }
/* Buttons */
.btn {
display: inline-flex; justify-content: center; align-items: center;
padding: 1.125rem 2.5rem;
border-radius: 100px;
white-space: nowrap;
font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
text-decoration: none; transition: var(--transition); cursor: pointer; border: none;
}
/* Frosted glass primary CTA — picks up the colour of whatever sits behind it */
.btn-primary {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(18px) saturate(1.7);
-webkit-backdrop-filter: blur(18px) saturate(1.7);
border: 1px solid rgba(25, 27, 26, 0.10);
color: var(--color-text);
box-shadow: 0 8px 26px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.65);
}
@supports (backdrop-filter: blur(18px)) {
.btn-primary { background: rgba(255, 255, 255, 0.28); }
}
.btn-primary:hover { background: rgba(255, 255, 255, 0.5); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.11), inset 0 1px 0 rgba(255,255,255,0.7); }
.btn-primary:active { transform: scale(0.98); }
.btn-glass {
display: inline-flex;
align-items: center;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 100px;
color: var(--color-text);
font-size: 1rem;
font-weight: 500;
text-decoration: none;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@supports (backdrop-filter: blur(15px)) {
.btn-glass { background: rgba(255, 255, 255, 0.25); }
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.btn-secondary { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-text); }
.btn-link { font-weight: 500; font-size: 0.95rem; color: var(--color-text); border-bottom: 1px solid var(--color-text); padding-bottom: 2px; }
.btn-link:hover { opacity: 0.6; }
/* Navigation Refined */
.nav-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; border-bottom: 1px solid transparent; background: transparent; transition: all 0.4s ease; }
.nav-header.scrolled { background: rgba(248, 246, 240, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(226, 221, 211, 0.5); }
.nav-container { display: flex; justify-content: space-between; align-items: center; height: 80px; }
.nav-logo { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: var(--spacing-md); align-items: center; }
.nav-logo { white-space: nowrap; }
.nav-link { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; color: var(--color-text-light); white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--color-text); }
.nav-social { display: inline-flex; align-items: center; gap: 0.45rem; }
.nav-social svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-social span { display: inline; } /* show the "YouTube" label so the link reads clearly */
/* Hero Splits */
.section-pt { padding-top: calc(80px + var(--spacing-xl)); padding-bottom: calc(var(--spacing-xl) / 2); }
/* Homepage hero: headline column + framed portrait */
.hero-duo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-portrait { margin: 0; position: relative; width: 100%; max-width: 380px; justify-self: end; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.4); box-shadow: 0 24px 48px -18px rgba(25,27,26,0.24), inset 0 1px 0 rgba(255,255,255,0.8); }
.hero-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; }
.hero-portrait figcaption { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.1rem; background: rgba(255,255,255,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 0.85rem; line-height: 1.4; }
.hero-portrait figcaption strong { display: block; font-weight: 700; color: var(--color-text); }
.hero-portrait .cap-sub { color: var(--color-text-light); }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #3F9D5F; box-shadow: 0 0 0 4px rgba(63,157,95,0.18); flex-shrink: 0; }
@media (max-width: 1024px) {
.hero-duo { grid-template-columns: 1fr; gap: var(--spacing-lg); }
.hero-portrait { justify-self: start; }
}
.lead-text { font-size: 1.5rem; color: var(--color-text-light); margin-top: var(--spacing-md); line-height: 1.65; }
.lead-strong { font-size: 1.5rem; font-weight: 500; color: var(--color-text); margin-top: var(--spacing-sm); }
/* Border Lists (Swiss grid style) */
.border-top-list { border-top: 1px solid var(--color-border); padding-top: var(--spacing-md); }
.list-rows { display: flex; flex-direction: column; }
.row-item {
display: grid; grid-template-columns: 80px 1fr;
padding: var(--spacing-lg) 0;
border-bottom: 1px solid var(--color-border);
}
.row-item:first-child { padding-top: 0; }
.row-item:last-child { border-bottom: none; padding-bottom: 0; }
.number-icon { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 300; color: var(--color-text-light); line-height: 1; display: block; margin-top: -0.25rem; }
/* Quotes */
.massive-quote {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1.1;
letter-spacing: -0.03em;
text-align: center;
max-width: 1000px;
margin: 0 auto; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg);
color: var(--color-text);
position: relative; z-index: 2;
}
.massive-quote cite {
display: block; font-family: var(--font-body); font-size: 0.875rem; font-style: normal;
text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-light);
margin-top: var(--spacing-md); font-weight: 600;
}
/* Cards (Frosted Minimal) */
.card {
padding: var(--spacing-lg) 2.75rem;
border-radius: var(--radius-sm);
text-decoration: none;
display: flex; flex-direction: column;
transition: var(--transition);
height: 100%; position: relative; z-index: 5;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -18px rgba(25, 27, 26, 0.30), inset 0 1px 0 rgba(255,255,255,0.85); border-color: rgba(255, 255, 255, 0.8); }
/* Frosted-glass tiles — translucent, blurred, with sheen + edge highlight */
.card-frost {
background: rgba(255, 255, 255, 0.9);
border: 1px solid var(--color-border);
box-shadow: 0 14px 34px rgba(25, 27, 26, 0.08);
}
.card-sand { background: rgba(245, 236, 215, 0.93); }
.card-sage { background: rgba(228, 237, 220, 0.93); }
.card-clay { background: rgba(244, 233, 224, 0.93); }
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
.card-frost {
background: linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.16) 60%, rgba(255,255,255,0.28) 100%);
backdrop-filter: blur(24px) saturate(1.7);
-webkit-backdrop-filter: blur(24px) saturate(1.7);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 24px 48px -18px rgba(25, 27, 26, 0.24), inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 0 1px rgba(255,255,255,0.16);
}
.card-sand { background: linear-gradient(135deg, rgba(247,238,214,0.6) 0%, rgba(247,238,214,0.18) 60%, rgba(255,255,255,0.26) 100%); }
.card-sage { background: linear-gradient(135deg, rgba(225,238,217,0.6) 0%, rgba(225,238,217,0.18) 60%, rgba(255,255,255,0.26) 100%); }
.card-clay { background: linear-gradient(135deg, rgba(245,232,221,0.62) 0%, rgba(245,232,221,0.2) 60%, rgba(255,255,255,0.26) 100%); }
}
.card-meta { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-xl); color: var(--color-text-light); }
.card p { color: var(--color-text-light); margin-bottom: var(--spacing-xl); flex-grow: 1; font-size: 1rem; }
/* Split Banner for "About" */
.split-banner { display: grid; grid-template-columns: 1fr 1fr; width: 100%; min-height: 80vh; background: transparent; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.split-image { background-size: cover; background-position: center; border-right: 1px solid var(--color-border); border-radius: 0; min-height: 70vh; }
.split-text { padding: 10% 12%; display: flex; flex-direction: column; justify-content: center; background: transparent; }
/* Testimonial Cards */
.testimonial-card {
position: relative;
overflow: hidden;
padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, var(--spacing-lg));
border: 1px solid rgba(25, 27, 26, 0.08); /* Clean thin outline */
border-radius: var(--radius-sm);
background: #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,0.03);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}
.testimonial-card > * { position: relative; z-index: 2; }
/* Organic Evolving Watercolor Tint (Bottom 40%) */
.testimonial-card::before {
content: '';
position: absolute;
bottom: -20%; left: -20%; right: -20%;
height: 70%;
filter: blur(25px);
z-index: 0;
pointer-events: none;
transition: opacity 0.8s ease, filter 0.8s ease;
}
/* Hover Effect: Paint it Away */
.testimonial-card:hover::before {
opacity: 0;
filter: blur(40px);
}
/* Unique Theme 1 (Warm / Peach & Sunflower) */
.testimonial-card:nth-child(3n+1)::before,
.testimonial-card.theme-warm::before {
background: radial-gradient(ellipse at 30% 100%, rgba(235,145,100,0.4) 0%, transparent 60%),
radial-gradient(ellipse at 70% 100%, rgba(240,180,90,0.3) 0%, transparent 60%),
radial-gradient(circle at 50% 100%, rgba(220,130,120,0.2) 0%, transparent 70%);
animation: evolveWatercolorA 16s infinite alternate ease-in-out;
}
/* Unique Theme 2 (Cool / Sage & Dusty Blue) */
.testimonial-card:nth-child(3n+2)::before,
.testimonial-card.theme-cool::before {
background: radial-gradient(ellipse at 20% 100%, rgba(138,154,91,0.3) 0%, transparent 60%),
radial-gradient(ellipse at 80% 100%, rgba(150,170,180,0.3) 0%, transparent 60%),
radial-gradient(circle at 50% 100%, rgba(110,130,120,0.2) 0%, transparent 70%);
animation: evolveWatercolorB 19s infinite alternate ease-in-out;
animation-delay: -3s;
}
/* Unique Theme 3 (Earthy / Terracotta & Ochre) */
.testimonial-card:nth-child(3n)::before,
.testimonial-card.theme-earthy::before {
background: radial-gradient(ellipse at 40% 100%, rgba(205,120,110,0.3) 0%, transparent 60%),
radial-gradient(ellipse at 80% 100%, rgba(220,180,150,0.4) 0%, transparent 60%),
radial-gradient(circle at 20% 100%, rgba(160,150,100,0.25) 0%, transparent 70%);
animation: evolveWatercolorC 14s infinite alternate ease-in-out;
animation-delay: -7s;
}
/* Distinct Animations for true organic randomness */
@keyframes evolveWatercolorA {
0% { transform: translateY(15%) rotate(-2deg) scale(1); opacity: 0.6; }
50% { transform: translateY(-3%) rotate(1deg) scale(1.05); opacity: 1; }
100% { transform: translateY(8%) rotate(3deg) scale(0.95); opacity: 0.8; }
}
@keyframes evolveWatercolorB {
0% { transform: translateY(10%) rotate(2deg) scale(1.05); opacity: 0.8; }
50% { transform: translateY(5%) rotate(-1deg) scale(0.98); opacity: 0.6; }
100% { transform: translateY(-5%) rotate(-3deg) scale(1.1); opacity: 1; }
}
@keyframes evolveWatercolorC {
0% { transform: translateY(-2%) rotate(-1deg) scale(1.1); opacity: 1; }
50% { transform: translateY(10%) rotate(3deg) scale(0.95); opacity: 0.7; }
100% { transform: translateY(4%) rotate(-2deg) scale(1.02); opacity: 0.9; }
}
.testimonial-quote { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.4; margin-bottom: var(--spacing-md); }
.testimonial-author { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-light); font-weight: 600; }
/* Google reviews trust badge */
.reviews-badge { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: var(--spacing-md); padding: 0.55rem 1.1rem; border: 1px solid var(--color-border); border-radius: 100px; background: rgba(255,255,255,0.55); font-size: 0.9rem; font-weight: 600; color: var(--color-text); transition: var(--transition); }
.reviews-badge:hover { border-color: var(--color-text); transform: translateY(-2px); }
.reviews-stars { color: var(--color-accent); letter-spacing: 0.12em; font-size: 1rem; }
.reviews-badge .reviews-sep { color: var(--color-border); }
/* "Meet her in video" teaser — a portrait poster with a play affordance, linking to her channel.
Swap the for a 16:9