/* =========================================================================
Telehealth Psychology Australia — Color & Type Tokens
"The Quiet Practice": editorial restraint, warm-green-on-cream.
Palette aligned to THPA Brand Guidelines v1.0 (warm green #2D4B3A);
DESIGN.md carries the matching design intent.
Naming: semantic names (DESIGN.md) are canonical. The historical --warm*
family is preserved as aliases so existing work keeps rendering.
========================================================================= */
/* ---- Fonts ----------------------------------------------------------------
Hedvig Letters Serif: self-hosted variable TTF (brand-supplied).
Inter: still loaded from Google Fonts — replace with self-hosted woff2 in prod.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Hedvig Letters Serif";
src: url("fonts/HedvigLettersSerif-Regular-VariableFont_opsz.ttf") format("truetype-variations"),
url("fonts/HedvigLettersSerif-Regular-VariableFont_opsz.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Inter is loaded via in each page (preconnect + non-blocking),
not @import here: @import is render-blocking and request-chained. */
:root {
/* ====================================================================
COLOR — The Pine-and-Paper Palette (THPA Brand Guidelines v1.0)
Warm green (#2D4B3A) on warm-cream neutrals. ONE committed green
voice; no second brand colour. Brand rule: avoid red and bright
orange — they read alarming for a mental-health audience.
==================================================================== */
/* Primary — THPA warm green (Brand Guidelines "Warm") */
--considered-pine: #2d4b3a; /* the single brand voice colour */
--deeper-pine: #243d2e; /* interactive hover / pressed */
--practice-mist: #f5f9f6; /* faint green wash: active step-badge, icon pills */
/* Secondary accent — THPA apricot, the logo "dot". Confirmed against the
real wordmark by the practice owner (2026-06-18). Use SPARINGLY: the
brand mark and small live/status signals only. Green stays the dominant
voice and the only action colour; apricot is punctuation, never buttons,
large fills, or the eyebrow. (Still avoid bright/alarming orange + red.) */
--apricot: #e8a06a; /* logo dot + live status dot */
--apricot-deep: #d4823f; /* deeper apricot for contrast / hover */
--apricot-soft: #fbeede; /* faint warm tint */
--apricot-ring: rgba(232, 160, 106, 0.55); /* the pulsing "now accepting" halo — --apricot at 55% */
/* Gradient companions ONLY, never flat fills (Brand support greens) */
--forest-green: #3a6350; /* 2nd stop of the signature gradient */
--lichen: #4a7d66; /* 3rd stop of the signature gradient */
/* Neutral */
--ink-charcoal: #141414; /* all primary text; outline-button border */
--slate: #555555; /* secondary text: subheads, FAQ answers, chip labels */
--quiet-stone: #6b6b6b; /* muted/tertiary: captions, footer fine print */
--hairline: rgba(0, 0, 0, 0.08); /* 8% black — dividers & most borders */
--hairline-card: rgba(0, 0, 0, 0.12); /* 12% black — crisper edge that defines a card surface (vs 8% dividers) */
--paper-white: #ffffff; /* primary card / panel / page surface */
--soft-page: #fafafa; /* default chip bg; panel that recedes half a step */
--warm-cream: #f8f4ed; /* full-section warm background — gently deepened 2026-06-26 so card sections chapter softly; card edges (--hairline-card) carry definition so this stays a whisper */
--cream-fade: #fbf9f5; /* midpoint between --warm-cream and --paper-white; hero wash only */
--quiet-forest: #1b3129; /* the ONE dark surface (deep brand green) */
/* Signature gradient — scroll-progress / progress bar ONLY. Never on text. */
--signature-gradient: linear-gradient(90deg, var(--considered-pine), var(--forest-green), var(--lichen));
/* On-dark text (Quiet Forest section) */
--text-on-dark: #eef4f0;
--text-on-dark-muted: #9fb3a8;
/* Status (used sparingly — healthcare context) */
--info: var(--considered-pine);
--success: var(--considered-pine);
--warn: #b8742a; /* muted ochre for advisories */
--danger: #a83232; /* crisis-line red / input error, never decorative */
/* ---- Backward-compatible aliases (historical --warm family) --------- */
--warm: var(--considered-pine);
--warm-hover: var(--deeper-pine);
--warm-light: var(--practice-mist);
--warm-border: #d3e0d8;
--bg-warm-light: var(--warm-cream);
--bg-off-white: var(--soft-page);
--bg-white: var(--paper-white);
--bg-dark: var(--quiet-forest);
--text-primary: var(--ink-charcoal);
--text-secondary: var(--slate); /* now two-tier: slate (secondary) ... */
--text-tertiary: var(--quiet-stone); /* ... quiet-stone (tertiary/muted) */
--border: var(--hairline);
--border-strong: rgba(0, 0, 0, 0.12);
/* ====================================================================
TYPE
==================================================================== */
--font-serif: "Hedvig Letters Serif", "Hedvig fallback", Georgia, "Times New Roman", serif;
--font-sans: "Hedvig Letters Sans", "Hedvig Sans fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
/* Editorial display / heading scale (Hedvig Letters Serif, weight 400) */
--fs-display: clamp(2.5rem, 6vw, 4.25rem); /* hero — one per page */
--fs-headline: clamp(1.75rem, 3.5vw, 2.75rem); /* section headings */
--fs-title: 1rem; /* card/FAQ titles — Hedvig weight 600 */
/* Legacy heading aliases (kept for existing markup) */
--fs-h1: var(--fs-headline);
--fs-h2: clamp(1.5rem, 3vw, 2.25rem);
--fs-h3: 1.375rem;
--fs-h4: 1.125rem;
/* Body & utility (Hedvig Letters Sans — single weight 400; emphasis comes
from size, tracking, caps and colour, with browser synthesis only for
inline ) */
--fs-lead: 1.125rem; /* hero subhead, intro paragraphs */
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-label: 0.6875rem; /* 11px — eyebrow / category label */
--fs-eyebrow: var(--fs-label);
--fs-caption: 0.75rem;
--lh-display: 1.05;
--lh-headline: 1.2;
--lh-title: 1.35;
--lh-body: 1.6;
--lh-loose: 1.75;
/* legacy aliases */
--lh-tight: var(--lh-display);
--lh-heading: var(--lh-headline);
--tracking-display: -0.03em; /* display + headline */
--tracking-title: -0.02em; /* title */
--tracking-label: 0.16em; /* eyebrow / category label */
--tracking-nav: 0.03em; /* soft nav-link label variant */
/* legacy aliases */
--tracking-eyebrow: var(--tracking-label);
--tracking-heading: var(--tracking-display);
/* ====================================================================
SPACING — Framer-style sectional rhythm
==================================================================== */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;
--space-3xl: 144px;
/* legacy numeric scale (kept for existing markup) */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 144px;
--max-w: 1280px; /* max-w-7xl */
/* ====================================================================
RADIUS
==================================================================== */
--radius-none: 0px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-pill: 9999px;
/* ====================================================================
ELEVATION — flat by default; shadows are interactive feedback
==================================================================== */
--shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.08); /* card lift */
--shadow-btn-glow: 0 6px 20px rgba(45, 75, 58, 0.25); /* primary btn hover, green-tinted */
--shadow-dropdown: 0 20px 60px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.04);
--shadow-panel-resting: 0 1px 3px rgba(0, 0, 0, 0.04); /* fee / pricing card anchor */
--shadow-focus: 0 0 0 2px var(--paper-white), 0 0 0 4px rgba(45, 75, 58, 0.85); /* site-wide focus ring: white gap + solid pine, ~6:1 on white (WCAG 2.4.7/1.4.11) */
--shadow-step-halo: 0 0 0 6px rgba(45, 75, 58, 0.10); /* active step-badge halo */
/* legacy shadow aliases */
--shadow-sm: var(--shadow-panel-resting);
--shadow-md: var(--shadow-card-hover);
--shadow-lg: var(--shadow-dropdown);
/* ====================================================================
MOTION
==================================================================== */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* card lift + tab indicator slide */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 160ms;
--dur-base: 240ms;
--dur-slow: 400ms; /* card-lift / scroll-reveal */
}
/* ---- Font-metric fallbacks (CLS reduction) ------------------------------ */
@font-face {
font-family: "Hedvig fallback";
src: local("Georgia");
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: "Hedvig Sans fallback";
src: local("Arial");
size-adjust: 100%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
/* =========================================================================
Semantic element styles
========================================================================= */
html { color: var(--ink-charcoal); background: var(--paper-white); color-scheme: light; }
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-charcoal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Quiet Heading Rule: headings are Hedvig weight 400. Never bold. */
h1, h2, h3, h4 {
font-family: var(--font-serif);
color: var(--ink-charcoal);
font-weight: 400;
letter-spacing: var(--tracking-display);
line-height: var(--lh-headline);
text-wrap: balance;
margin: 0;
}
h1 { font-size: var(--fs-headline); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
/* Display — hero only, one per page */
.display {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-display);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
}
/* Headline — section headings, always preceded by the eyebrow */
.section-heading {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-headline);
line-height: var(--lh-headline);
letter-spacing: var(--tracking-display);
}
/* Title — card titles, FAQ questions, pricing headers. Hedvig weight 600. */
.title {
font-family: var(--font-serif);
font-weight: 600;
font-size: var(--fs-title);
line-height: var(--lh-title);
letter-spacing: var(--tracking-title);
}
p, li {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-charcoal);
text-wrap: pretty;
}
.lead { font-size: var(--fs-lead); color: var(--slate); line-height: var(--lh-loose); }
.muted { color: var(--slate); } /* secondary text */
.tertiary { color: var(--quiet-stone); } /* muted/tertiary text */
.small { font-size: var(--fs-small); }
.prose { max-width: 70ch; } /* 65–75ch prose cap */
/* Eyebrow / Category Label — the page's metronome.
11px, Hedvig Letters Sans 400, 0.16em, uppercase, Considered Pine, + 32px
trailing rule. (The family ships one weight; caps + tracking carry it.) */
.eyebrow,
.category-label {
display: inline-flex;
align-items: center;
gap: var(--space-md);
font-family: var(--font-sans);
font-size: var(--fs-label);
font-weight: 400;
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--considered-pine);
margin: 0 0 var(--space-md);
}
.eyebrow::after,
.category-label::after {
content: "";
width: 32px;
height: 1px;
background: var(--considered-pine);
flex: none;
}
/* Tightens the headline under an eyebrow. This used to be an inline
style="margin-top:8px" repeated on every section heading across the site;
it belongs here so the heading sits flush when there is no eyebrow above it
(headings are margin: 0 by default). */
.eyebrow + .section-heading,
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3 { margin-top: 8px; }
/* Full-width stacked buttons in the mobile sheet (was an inline
style="justify-content:center" on each one). */
.mobile-menu .btn { justify-content: center; }
a {
color: var(--considered-pine);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--deeper-pine); text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--considered-pine); color: var(--paper-white); }
/* Brand mark — the logo "dot" carries the single apricot accent (overrides the
inline SVG fill on every header + footer logo, site-wide, from one place). */
.brand-logo circle { fill: var(--apricot); }
/* Site-wide focus ring — required on every interactive element.
`transition: none` is load-bearing: the ring is drawn with box-shadow, and
several components (.btn, .cond-card, .team-card) transition box-shadow for
their hover state. Without this the ring would fade in over --dur-base and a
keyboard user would have no indicator at the start of the transition. Focus
rings appear instantly, always. */
:focus-visible { outline: none; box-shadow: var(--shadow-focus) !important; transition: none !important; }
/* Remove the ~300ms tap delay / double-tap-zoom on interactive controls.
touch-action: manipulation preserves pinch-zoom, so accessibility zoom stays. */
a, button, [role="button"], label, summary, input, select, textarea {
touch-action: manipulation;
}
/* =========================================================================
Component primitives
========================================================================= */
/* =========================================================================
Buttons — pill shape always. Modern, tactile, editorially restrained.
Hedvig Letters Sans 400 (the family's only weight; a touch more tracking
does the work 500 used to). Crisp proportions, spring easing, layered
hover lift, a sliding arrow affordance, green-tinted shadows on pine.
========================================================================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 0.9375rem;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1;
padding: 13px 26px;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
transition: background var(--dur-base) var(--ease-soft),
color var(--dur-base) var(--ease-soft),
border-color var(--dur-base) var(--ease-soft),
box-shadow var(--dur-base) var(--ease-soft),
transform var(--dur-fast) var(--ease-soft);
}
.btn svg, .btn [data-lucide] { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(0) scale(0.985); }
/* Trailing arrow affordance — nudges right on hover */
.btn .btn-arrow { transition: transform var(--dur-base) var(--ease-soft); }
.btn:hover .btn-arrow { transform: translateX(3px); }
/* Primary — Considered Pine fill; hover → Deeper Pine, lift, layered teal glow */
.btn-primary {
background: var(--considered-pine);
color: var(--paper-white);
}
.btn-primary:hover {
background: var(--deeper-pine);
color: var(--paper-white);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 2px 6px rgba(45, 75, 58, 0.18), 0 12px 28px rgba(45, 75, 58, 0.22);
}
.btn-primary:active {
transform: translateY(0) scale(0.985);
box-shadow: 0 2px 8px rgba(45, 75, 58, 0.2);
}
/* Outline — paper-white + 1.5px charcoal border; hover inverts to charcoal */
.btn-outline {
background: var(--paper-white);
color: var(--ink-charcoal);
border-color: var(--ink-charcoal);
}
.btn-outline:hover {
background: var(--ink-charcoal);
color: var(--paper-white);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(20, 20, 20, 0.16);
}
/* Soft — modern tertiary. Practice Mist fill, pine text. Quietly tactile. */
.btn-soft {
background: var(--practice-mist);
color: var(--considered-pine);
}
.btn-soft:hover {
background: #e6efe9;
color: var(--deeper-pine);
text-decoration: none;
transform: translateY(-1px);
}
/* Ghost — text-link affordance with a soft mist wash on hover */
.btn-ghost {
background: transparent;
color: var(--ink-charcoal);
}
.btn-ghost:hover { background: var(--practice-mist); color: var(--considered-pine); }
/* Sizes */
.btn-sm { padding: 9px 18px; font-size: 0.875rem; gap: 8px; }
.btn-sm svg, .btn-sm [data-lucide] { width: 16px; height: 16px; }
.btn-lg { padding: 17px 36px; font-size: 1.0625rem; gap: 12px; }
.btn-lg svg, .btn-lg [data-lucide] { width: 20px; height: 20px; }
/* Icon-only — square pill, optical centring */
.btn-icon { padding: 0; width: 46px; height: 46px; }
.btn-icon.btn-sm { width: 38px; height: 38px; }
.btn-icon.btn-lg { width: 54px; height: 54px; }
/* Full-width */
.btn-block { display: flex; width: 100%; }
/* Disabled */
.btn:disabled, .btn[aria-disabled="true"] {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.btn, .btn .btn-arrow { transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease; }
.btn:hover, .btn:active, .btn:hover .btn-arrow { transform: none; }
}
/* CTA pattern (signature) — 36px Considered Pine circle + 16px white arrow */
.cta-link {
display: inline-flex; align-items: center; gap: var(--space-3);
color: var(--considered-pine); font-weight: 500; font-size: 0.9375rem;
}
.cta-link .cta-arrow {
width: 36px; height: 36px; border-radius: var(--radius-pill);
background: var(--considered-pine); color: var(--paper-white);
display: inline-flex; align-items: center; justify-content: center;
transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
flex: none;
}
.cta-link .cta-arrow svg,
.cta-link .cta-arrow [data-lucide] { width: 16px; height: 16px; }
.cta-link:hover { text-decoration: none; }
.cta-link:hover .cta-arrow { background: var(--deeper-pine); transform: translateX(2px); }
/* Chips / booking-chips */
.chip,
.booking-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px;
background: var(--soft-page);
color: var(--slate);
border: 1.5px solid rgba(0, 0, 0, 0.1);
border-radius: var(--radius-pill);
font-family: var(--font-sans);
font-size: 0.8125rem; font-weight: 500;
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover,
.booking-chip:hover { border-color: rgba(0, 0, 0, 0.22); } /* tighten only, no transform */
.chip[aria-pressed="true"], .chip.is-selected,
.booking-chip[aria-pressed="true"], .booking-chip.is-selected {
background: var(--considered-pine);
color: var(--paper-white);
border-color: transparent;
}
/* Cards — flat at rest. .card-hover adds the lift. */
.card {
background: var(--paper-white);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
.card-hover {
transition: transform var(--dur-slow) var(--ease-soft), box-shadow var(--dur-slow) var(--ease-soft);
will-change: transform;
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
@media (prefers-reduced-motion: reduce) {
.card-hover, .card-hover:hover { transform: none; transition: none; }
}
/* Form fields */
.field {
width: 100%;
font-family: var(--font-sans);
font-size: var(--fs-body);
padding: 12px 16px;
background: var(--paper-white);
border: 1.5px solid var(--hairline);
border-radius: var(--radius-md);
color: var(--ink-charcoal);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field::placeholder { color: var(--quiet-stone); }
.field:focus-visible { outline: none; border-color: var(--considered-pine); box-shadow: var(--shadow-focus); }
.field-error { border-color: var(--danger); }
.field-error-msg {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 6px; font-size: var(--fs-small); color: var(--slate);
}
.field-label {
display: block;
font-size: var(--fs-small);
font-weight: 500;
color: var(--ink-charcoal);
margin-bottom: 6px;
}
/* Step Number Badge — 64px round, on the How-It-Works central rail */
.step-number-badge {
width: 64px; height: 64px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-pill);
background: var(--paper-white);
border: 2px solid var(--hairline);
color: var(--quiet-stone);
font-family: var(--font-serif);
font-weight: 600;
font-size: 1.5rem;
line-height: 1;
transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.step-number-badge.active {
background: var(--practice-mist);
border-color: var(--considered-pine);
color: var(--considered-pine);
box-shadow: var(--shadow-step-halo);
}
/* Practitioner Card — booking "Preferred Psychologist" step */
.booking-psych-card {
display: inline-flex; align-items: center; gap: var(--space-3);
padding: var(--space-3);
background: var(--soft-page);
border: 1.5px solid var(--hairline);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.booking-psych-card .avatar {
width: 44px; height: 44px; border-radius: var(--radius-pill);
object-fit: cover; flex: none; background: var(--practice-mist);
}
.booking-psych-card .psych-name { font-weight: 600; font-size: var(--fs-body); color: var(--ink-charcoal); }
.booking-psych-card .psych-role { font-size: var(--fs-small); color: var(--quiet-stone); }
.booking-psych-card:hover { border-color: rgba(0, 0, 0, 0.22); }
.booking-psych-card.is-selected {
background: var(--paper-white);
border-color: var(--considered-pine);
}
.booking-psych-card.is-selected .psych-name { color: var(--considered-pine); }
/* Service Tabs — sliding 3px Considered Pine indicator */
.service-tablist {
display: flex; gap: var(--space-lg);
position: relative;
border-bottom: 1px solid var(--hairline);
overflow-x: auto;
}
.service-tab {
appearance: none; background: none; border: none; cursor: pointer;
font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 500;
color: var(--quiet-stone);
padding: 12px 2px;
min-height: 44px; /* WCAG 2.5.8 */
white-space: nowrap;
transition: color var(--dur-base) var(--ease-out);
}
.service-tab:hover { color: var(--slate); }
.service-tab.active { color: var(--ink-charcoal); }
.service-tab-indicator {
position: absolute; bottom: -1px; left: 0; height: 3px;
background: var(--considered-pine);
transition: transform var(--dur-slow) var(--ease-soft), width var(--dur-slow) var(--ease-soft);
}
/* Navigation links — soft label variant + grow underline */
.nav-link {
position: relative;
font-family: var(--font-sans);
font-size: 0.875rem; font-weight: 400; letter-spacing: var(--tracking-nav);
color: var(--ink-charcoal);
text-decoration: none;
padding-bottom: 2px;
}
.nav-link::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
background: var(--ink-charcoal);
transition: width var(--dur-base) var(--ease-out);
}
.nav-link:hover { text-decoration: none; }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }
/* Dropdown mega-panel */
.dropdown-panel {
background: var(--paper-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-dropdown);
padding: var(--space-lg);
}
/* Signature gradient bar (scroll-progress) */
.progress-gradient {
height: 3px; width: 100%;
background: var(--signature-gradient);
}
/* Section scaffolding */
.section {
padding-top: var(--space-2xl);
padding-bottom: var(--space-2xl);
}
@media (min-width: 1024px) {
.section { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
}
.section-warm-light, .section-cream { background: var(--warm-cream); }
.section-off-white, .section-soft { background: var(--soft-page); }
.section-mist { background: var(--practice-mist); }
.section-dark { background: var(--quiet-forest); color: var(--text-on-dark); }
.section-dark .eyebrow, .section-dark .category-label { color: var(--text-on-dark-muted); }
.section-dark .eyebrow::after, .section-dark .category-label::after { background: var(--text-on-dark-muted); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--text-on-dark); }
.container {
max-width: var(--max-w);
margin: 0 auto;
padding-left: var(--space-lg);
padding-right: var(--space-lg);
}
/* Hero atmosphere — soft blurred green blob. Hero only. */
.hero-blob {
position: absolute;
border-radius: 50%;
background: var(--considered-pine);
filter: blur(80px);
opacity: 0.18;
pointer-events: none;
animation: hero-float 22s ease-in-out infinite;
}
@keyframes hero-float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(24px, -28px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.hero-blob { animation: none; }
}
/* Scroll reveal (Intersection Observer toggles .is-visible) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.slide-left { transform: translateX(-24px); }
.reveal.slide-right { transform: translateX(24px); }
.reveal.scale { transform: scale(0.96); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}