/* At Home, At Peace - landing site Palette and type per the brand idea board. */ /* ─── Font-load cloak ───────────────────────────────────────────────── Fallback fonts hold the layout at correct dimensions; we just hide the glyphs until the webfonts arrive, then fade them in. Opacity sits on (not ) so Chrome's LCP unhide-on-documentElement exception keeps LCP attribution working. */ html.fonts-loading { opacity: 0; } html.fonts-loaded { opacity: 1; transition: opacity 0.35s ease-out; } html:not(.fonts-loading):not(.fonts-loaded) { opacity: 1; } @media (prefers-reduced-motion: reduce) { html.fonts-loaded { transition: none; } } @media print { html { opacity: 1 !important; } } @view-transition { navigation: auto; } /* ─── Self-hosted web fonts (latin subset only) ─────────────────────── */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 500; font-display: block; src: url("fonts/cormorant-garamond.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 500; font-display: block; src: url("fonts/cormorant-garamond-italic.woff2") format("woff2"); } @font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400 600; font-display: block; src: url("fonts/inter-tight.woff2") format("woff2"); } /* ─── Metric-overridden fallback families ─────────────────────────────── The override values are derived from each web font's own OS/2 typo metrics (computed with fontTools) against published Capsize metrics for Georgia / Arial. With these in place the fallback text occupies the same line-box and, near enough, the same glyph widths as the web font - so the swap when the woff2 arrives is invisible. */ @font-face { font-family: "Cormorant Fallback"; font-style: normal; src: local("Georgia"); size-adjust: 85.63%; ascent-override: 107.90%; descent-override: 33.52%; line-gap-override: 0%; } @font-face { font-family: "Cormorant Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia"); size-adjust: 85.63%; ascent-override: 107.90%; descent-override: 33.52%; line-gap-override: 0%; } @font-face { font-family: "Inter Tight Fallback"; font-style: normal; src: local("Arial"); size-adjust: 108.00%; ascent-override: 89.70%; descent-override: 22.33%; line-gap-override: 0%; } :root { --sage: #7c9a7e; --sage-light: #a8c5aa; --sage-dark: #5a7a5c; --sage-deep: #3f5841; --warm: #f5f0eb; --warm-dark: #e8dfd6; --cream: #faf8f5; --text: #3d3d3d; --text-light: #6b6b6b; --accent: #c9956b; --accent-light: #e8c9a8; --white: #fff; --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "EB Garamond", serif; --sans: "Inter Tight", "Inter Tight Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* Layout - single source of truth for container widths and section rhythm. --maxw : outer wrapper (header, hero, footer, callout, contact, page-head). --content : centered text column for headlines, prose, glass cards. --section-y : default top/bottom padding for major body sections. --section-y-sm : compact rhythm for secondary bands and follow-up sections. */ --maxw: 1120px; --content: 760px; --gutter: clamp(20px, 4vw, 40px); --section-y: clamp(64px, 8vw, 96px); --section-y-sm: clamp(40px, 5vw, 64px); --header-space: 112px; } * { box-sizing: border-box; } html { scroll-padding-top: var(--header-space); overflow-x: clip; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--cream); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { padding-top: var(--header-space); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.005em; color: var(--text); margin: 0; } p { margin: 0 0 1em; } a { color: inherit; text-decoration: none; } /* HEADER */ .site-header { background: rgba(255, 255, 255, 0.78); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(232, 223, 214, 0.7); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 8px 24px -16px rgba(63, 88, 65, 0.12); position: fixed; top: 0; left: 0; right: 0; z-index: 40; animation: header-shrink linear both; animation-timeline: scroll(root block); animation-range: 0 160px; } /* Collapsing header - CSS scroll-driven, no JS. --header-grow goes 1 (top of page) → 0 (after 160px scroll). Header is fixed and main is offset by --header-space, so the header can shrink without feeding back into page scroll geometry. Browsers without scroll-timeline keep --header-grow at initial 0 - graceful fallback. */ @property --header-grow { syntax: ""; inherits: true; initial-value: 0; } @keyframes header-shrink { from { --header-grow: 1; } to { --header-grow: 0; } } @media (prefers-reduced-motion: reduce) { .site-header { animation: none; } .brand-lockup { transform: none; } } .header-inner { max-width: var(--maxw); margin: 0 auto; /* Safe to animate with fixed header: content flow is decoupled from header height. */ padding: calc(18px + 18px * var(--header-grow)) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; } /* WORDMARK BRAND */ .brand { --brand-scale-max: 2; --tagline-shrink-comp: 0.38; display: inline-flex; align-items: center; color: var(--sage-deep); line-height: 1; min-width: max-content; flex: 0 0 auto; } .brand-lockup { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; transform: scale(calc(1 + (var(--brand-scale-max) - 1) * var(--header-grow))); transform-origin: left center; } .brand .brand-mark { width: 38px; height: 38px; flex: 0 0 auto; display: block; } .brand .wordmark { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.005em; color: var(--sage-deep); display: inline-flex; align-items: baseline; gap: 0.3em; align-self: center; white-space: nowrap; flex: 0 0 auto; } .brand .wordmark em { font-style: italic; font-weight: 500; color: var(--sage-dark); } .brand .tagline { display: none; font-family: var(--sans); font-weight: 500; font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-dark); margin-left: 0; align-self: center; padding-left: 12px; border-left: 1px solid var(--warm-dark); /* Counter part of parent scale so tagline shrinks less than the wordmark. */ transform: translateY(1px) scale(calc(1 - var(--tagline-shrink-comp) * var(--header-grow))); transform-origin: left center; white-space: nowrap; } @media (min-width: 880px) { .brand .tagline { display: inline-block; } } .nav { display: flex; align-items: center; gap: 28px; flex: 0 0 auto; min-width: max-content; } .nav a { font-size: 14px; color: var(--text-light); transition: color 0.2s ease; } .nav a:hover, .nav a.is-active { color: var(--sage-dark); } .nav a.btn-primary, .nav a.btn-primary:hover, .nav a.btn-primary.is-active { color: var(--white); } /* BUTTONS */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font-size: 14px; font-weight: 500; font-family: var(--sans); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary { background: var(--sage-deep); color: var(--white); box-shadow: 0 1px 2px rgba(63, 88, 65, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.10); } .btn-primary:hover { background: #2f4530; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(63, 88, 65, 0.34), 0 0 0 1px rgba(63, 88, 65, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* HERO */ .hero { position: relative; background: var(--warm); border-bottom: 1px solid var(--warm-dark); overflow: hidden; isolation: isolate; --hero-min-h: 480px; --hero-fluid-h: 36vw; --hero-max-h: 640px; --hero-photo-pos-y: 40%; --hero-inner-top: 32px; --hero-inner-bottom: 210px; --hero-headline-y: 0px; --hero-subtext-y: 0px; --hero-subtext-x: 0px; --hero-subtext-maxw: 64ch; --hero-subtext-self: end; --hero-subtext-text-align: end; min-height: clamp(var(--hero-min-h), var(--hero-fluid-h), var(--hero-max-h)); } /* Banner photo. The ::after layer provides a soft top-right cream wash behind the headline (which sits over the open sky) and a subtle bottom shade so the heather/horses underneath the copy stay visible. */ .hero-photo { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 75% 35%, rgba(255, 255, 255, 0.45) 0%, transparent 55%), linear-gradient(135deg, #d8e4d3 0%, #a8c0a2 35%, #6f8f72 70%, #4a6a4d 100%); } .hero-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--hero-photo-pos-y); display: block; } .hero-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 78% 22%, rgba(250, 248, 245, 0.38) 0%, rgba(250, 248, 245, 0.24) 35%, rgba(250, 248, 245, 0.08) 65%, transparent 85%), linear-gradient(180deg, rgba(250, 248, 245, 0.04) 0%, transparent 35%, rgba(40, 50, 40, 0.06) 100%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: var(--hero-inner-top) var(--gutter) var(--hero-inner-bottom); display: grid; gap: 20px; justify-items: end; transition: padding 0.3s ease; } .hero-content { width: 100%; max-width: none; justify-self: stretch; text-align: right; margin-top: 0; } .hero-topline { display: block; width: 100%; max-width: none; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 0; text-align: end; white-space: normal; overflow-wrap: anywhere; text-wrap: pretty; justify-self: stretch; } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -0.01em; margin-bottom: 14px; width: 100%; max-width: none; white-space: normal; transform: translateY(var(--hero-headline-y)); transition: transform 0.3s ease, font-size 0.3s ease, line-height 0.3s ease; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 1px 12px rgba(40, 50, 40, 0.18); } .hero h1 em { font-style: italic; font-weight: 500; color: var(--sage-dark); } .hero-subtext { width: min(100%, var(--hero-subtext-maxw)); justify-self: var(--hero-subtext-self); text-align: var(--hero-subtext-text-align); margin-top: 0; transform: translate(var(--hero-subtext-x), var(--hero-subtext-y)); transition: transform 0.3s ease, width 0.3s ease; } .hero-subtext p { font-size: clamp(17px, 1.1vw + 0.45rem, 22px); line-height: 1.5; color: var(--text-light); width: 100%; max-width: 100%; text-wrap: auto; margin: 0; transition: font-size 0.3s ease, line-height 0.3s ease; } /* SUBHERO - secondary banner that carries the demoted About hero copy. Visually subordinate to the main photo hero: cream wash, compact padding, smaller heading, no photo. Bridges the hero into services. */ .subhero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 0%, rgba(124, 154, 126, 0.08) 0%, transparent 60%), linear-gradient(180deg, var(--warm) 0%, #efe7dc 100%); border-bottom: 1px solid var(--warm-dark); } .subhero-inner { position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; padding: var(--section-y-sm) var(--gutter); text-align: center; } .subhero .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .subhero h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.25; letter-spacing: -0.005em; color: var(--text); margin: 0; } .subhero h2 em { font-style: italic; font-weight: 500; color: var(--sage-dark); } .subhero--photo .subhero-bg { position: absolute; inset: 0; z-index: 0; } .subhero--photo .subhero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .subhero--photo .subhero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(20, 30, 22, 0.22) 0%, rgba(20, 30, 22, 0.14) 60%, transparent 90%), linear-gradient(180deg, rgba(20, 30, 22, 0.08) 0%, rgba(20, 30, 22, 0.16) 100%); } .subhero--photo .subhero-card { display: inline-block; max-width: var(--content); background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; padding: 26px 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 16px 36px -20px rgba(0, 0, 0, 0.35); } .subhero--photo .eyebrow { color: rgba(255, 255, 255, 0.9); } .subhero--photo h2 { color: var(--white); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .subhero--photo h2 em { color: var(--accent-light); } /* CALLOUT */ .callout { max-width: var(--maxw); margin: var(--section-y) auto 0; padding: 0 var(--gutter); } .callout-inner { background: linear-gradient(160deg, #4a6a4d 0%, var(--sage-deep) 50%, #344a36 100%); color: var(--white); border-radius: 16px; padding: 56px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.10) inset, 0 24px 48px -24px rgba(63, 88, 65, 0.55), 0 2px 6px rgba(63, 88, 65, 0.15); } .callout-inner::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, var(--sage) 0%, transparent 65%); right: -100px; bottom: -140px; opacity: 0.45; } .callout-inner h2 { color: var(--white); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin-bottom: 12px; position: relative; } .callout-inner h2 em { color: var(--accent-light); font-style: italic; font-weight: 500; } .callout-inner p { color: rgba(255, 255, 255, 0.82); font-size: 16px; margin: 0; position: relative; max-width: 460px; } .callout-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; justify-content: flex-end; } .callout-actions .btn-primary { background: var(--accent); } .callout-actions .btn-primary:hover { background: #b88358; box-shadow: 0 4px 12px rgba(201, 149, 107, 0.4); } /* Photo-backed callout - image sits behind a tinted scrim, with a blurred glass card holding the headline copy. */ .callout-inner--photo { isolation: isolate; } .callout-inner--photo .callout-bg { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; } .callout-inner--photo .callout-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .callout-inner--photo .callout-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 160deg, rgba(58, 80, 60, 0.62) 0%, rgba(40, 60, 42, 0.55) 50%, rgba(30, 48, 34, 0.65) 100%); } .callout-inner--photo > .callout-text, .callout-inner--photo > .callout-actions { position: relative; z-index: 1; } .callout-inner--photo .callout-text { background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; padding: 28px 32px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 32px -16px rgba(0, 0, 0, 0.35); } .callout-inner--photo .callout-text h2 { margin-bottom: 10px; } .callout-inner--photo .callout-text p { color: rgba(255, 255, 255, 0.92); } /* PAGE HEADER (about, contact) */ .page-head { position: relative; background: radial-gradient(ellipse at 50% 0%, rgba(124, 154, 126, 0.10) 0%, transparent 60%), linear-gradient(180deg, var(--warm) 0%, #efe7dc 100%); border-bottom: 1px solid var(--warm-dark); isolation: isolate; } .page-head-inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter); text-align: center; } .page-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; margin-bottom: 14px; letter-spacing: -0.01em; } .page-head h1 em { font-style: italic; font-weight: 500; color: var(--sage-dark); } .page-head p { font-size: 17px; color: var(--text-light); max-width: var(--content); margin: 0 auto; } /* Photo-backed page head - image fills the band, a soft scrim ensures the central glass card has enough contrast for the title copy. */ .page-head--photo { overflow: hidden; } .page-head--photo .page-bg { position: absolute; inset: 0; z-index: 0; } .page-head--photo .page-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .page-head--photo .page-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 55%, rgba(20, 30, 22, 0.32) 0%, rgba(20, 30, 22, 0.18) 60%, transparent 90%), linear-gradient(180deg, rgba(20, 30, 22, 0.10) 0%, rgba(20, 30, 22, 0.20) 100%); } .page-head--photo .page-head-inner { padding: calc(var(--section-y) * 1.5) var(--gutter); } .page-head--photo .page-head-card { display: inline-block; max-width: var(--content); background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 16px; padding: 40px 48px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 24px 48px -22px rgba(0, 0, 0, 0.35); } .page-head--photo .page-head-card h1 { color: var(--white); text-shadow: 0 1px 2px rgba(0,0,0,0.18); } .page-head--photo .page-head-card h1 em { color: var(--accent-light); } .page-head--photo .page-head-card p { color: rgba(255, 255, 255, 0.94); } /* CONTACT PAGE HEADER - keep photo treatment but reduce overall height so it sits closer to the About photo subhero proportions. */ .page-head--contact .page-head-inner { padding: var(--section-y-sm) var(--gutter); } .page-head--contact .page-head-card { padding: 26px 30px; } /* ABOUT - body sections */ .body-section { max-width: var(--content); margin: 0 auto; padding: var(--section-y-sm) var(--gutter); } .body-section h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 18px; } .body-section h2 em { font-style: italic; font-weight: 500; color: var(--sage-dark); } .body-section p { color: var(--text-light); font-size: 16.5px; line-height: 1.75; } .body-section--home-about { padding-top: var(--section-y-sm); padding-bottom: 16px; } .body-section--home-about + .body-section--home-about { padding-top: 8px; } .body-section--home-about + .subhero { margin-top: clamp(28px, 4vw, 52px); } .body-section--vet-bio { padding-bottom: var(--section-y-sm); } .vet-bio { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: start; } .vet-bio-avatar { width: 140px; height: 140px; border-radius: 50%; border: 2px dashed rgba(124, 154, 126, 0.45); background: linear-gradient(160deg, #f6f2ec 0%, #efe8de 100%); color: var(--text-light); display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; font-weight: 600; overflow: hidden; flex-shrink: 0; } .vet-bio-avatar > span { display: block; width: 100%; height: 100%; } .vet-bio-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; /* Keep object-position and transform-origin in sync — scale() defaults to center (50% 50%), which otherwise cancels object-position tweaks. */ --avatar-focus-x: 50%; --avatar-focus-y: 48%; object-position: var(--avatar-focus-x) var(--avatar-focus-y); transform: scale(1.18) translateY(4%); transform-origin: var(--avatar-focus-x) var(--avatar-focus-y); } .vet-bio-content h2 { margin-bottom: 12px; } .vet-bio-content p { margin: 0 0 10px; } .vet-bio-content p:last-child { margin-bottom: 0; } /* CONTACT */ .contact { max-width: var(--maxw); margin: 0 auto; padding: var(--section-y) var(--gutter) var(--section-y-sm); display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; } .contact h2 { font-size: 26px; margin-bottom: 16px; } .contact .lede { color: var(--text-light); font-size: 16px; line-height: 1.65; margin-bottom: 28px; } .channels { display: flex; flex-direction: column; gap: 22px; margin-top: 4px; } .channels--reach { gap: 28px; margin-top: 8px; } .contact-reach h2 { margin-bottom: 4px; } .channel-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 4px; } .channel-value { font-family: var(--serif); font-size: 22px; color: var(--text); } .channel-value a { color: var(--sage-dark); } .channel-value a:hover { text-decoration: underline; } .channel-meta { font-size: 13.5px; color: var(--text-light); margin-top: 4px; } .form-card { background: #fff; border: 1px solid var(--warm-dark); border-radius: 12px; padding: 36px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 14px 36px -16px rgba(63, 88, 65, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .form-card h2 { margin-bottom: 6px; } form { display: flex; flex-direction: column; gap: 16px; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; } .field input, .field textarea { font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: 1px solid var(--warm-dark); background: var(--cream); border-radius: 8px; color: var(--text); outline: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field textarea:focus { border-color: var(--sage); background: #fff; box-shadow: 0 0 0 3px rgba(124, 154, 126, 0.15); } .field textarea { min-height: 110px; resize: vertical; line-height: 1.55; } .submit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 4px; } /* Form validation + status */ .field-error { font-size: 12.5px; color: #b3492a; margin: 4px 0 0; min-height: 1em; line-height: 1.3; } .field.has-error input, .field.has-error textarea { border-color: #c97a5b; background: #fff8f4; box-shadow: 0 0 0 3px rgba(201, 122, 91, 0.12); } .form-status { font-size: 13px; margin: 0; flex: 1 1 auto; min-width: 0; } .form-status--success { color: var(--sage-deep); } .form-status--error { color: #b3492a; } .form-status--pending { color: var(--text-light); } /* Honeypot - visually hidden but still rendered for bots. */ .hp-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .emergency { margin: var(--section-y-sm) auto 0; max-width: var(--maxw); padding: 0 var(--gutter); } .emergency--inline { margin: 0 0 26px; max-width: none; padding: 0; } .emergency-inner { background: #fff; border: 1px solid var(--accent-light); border-left: 4px solid var(--accent); border-radius: 10px; padding: 22px 26px; display: flex; align-items: flex-start; gap: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 22px -14px rgba(201, 149, 107, 0.35); } .emergency-inner h3 { font-size: 17px; margin-bottom: 6px; color: var(--text); font-family: var(--serif); font-weight: 500; } .emergency-inner p { font-size: 14.5px; color: var(--text-light); margin: 0; line-height: 1.6; } .emergency-inner p + p { margin-top: 10px; } .emergency-inner a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; } .emergency-inner .icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px; background: #f6e7d6; color: #8a5a35; display: inline-flex; align-items: center; justify-content: center; } /* FOOTER */ .site-footer { margin-top: var(--section-y); background: var(--warm); border-top: 1px solid var(--warm-dark); } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter) 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .footer-inner h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dark); margin-bottom: 14px; } .footer-inner p, .footer-inner a { display: block; font-size: 14px; color: var(--text-light); margin-bottom: 6px; line-height: 1.55; } .footer-inner a:hover { color: var(--sage-dark); } .footer-inner .brand-block .footer-mark { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--sage-deep); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 10px; } .footer-inner .brand-block .footer-mark img { width: 32px; height: 32px; flex: 0 0 auto; display: block; } .footer-inner .brand-block .footer-mark em { font-style: italic; color: var(--sage-dark); } .footer-inner .brand-block p { margin-top: 4px; max-width: 320px; } .colophon { max-width: var(--maxw); margin: 0 auto; padding: 18px var(--gutter); border-top: 1px solid var(--warm-dark); font-size: 12.5px; color: var(--text-light); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .colophon-legal { display: flex; gap: 14px; } .colophon-legal a { color: inherit; text-decoration: none; opacity: 0.72; } .colophon-legal a:hover { opacity: 1; color: var(--sage-dark); text-decoration: underline; } .colophon-legal a[aria-current="page"] { opacity: 1; text-decoration: underline; } /* Legal / privacy */ .body-section--legal { padding-top: var(--section-y); padding-bottom: var(--section-y); } .body-section--legal h1 { font-family: var(--serif); font-size: clamp(28px, 4vw, 36px); font-weight: 500; color: var(--sage-deep); margin-bottom: 8px; } .body-section--legal h2 { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-dark); margin: 32px 0 12px; } .body-section--legal ul { margin: 0 0 14px; padding-left: 1.25em; color: var(--text-light); font-size: 16.5px; line-height: 1.75; } .body-section--legal li { margin-bottom: 6px; } .body-section--legal a { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 2px; } .body-section--legal a:hover { color: var(--sage-dark); } .legal-updated { font-size: 14px; margin-bottom: 24px; opacity: 0.85; } .form-privacy-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text-light); } .form-privacy-note a { color: var(--sage-dark); text-decoration: underline; text-underline-offset: 2px; } /* RESPONSIVE */ @media (max-width: 1024px) { .header-inner { gap: 16px; } .nav { gap: 18px; } } @media (max-width: 760px) { .nav { gap: 14px; } .nav a:not(.btn) { font-size: 13px; } } @media (max-width: 880px) { .hero { --hero-min-h: 420px; --hero-fluid-h: 52vw; --hero-max-h: 560px; --hero-photo-pos-y: 42%; --hero-inner-top: 18px; --hero-inner-bottom: 96px; --hero-headline-y: -3px; --hero-subtext-y: -6px; --hero-subtext-maxw: 52ch; --hero-subtext-self: start; --hero-subtext-text-align: left; } .hero-inner { justify-items: stretch; gap: 14px; } .hero-content { text-align: left; } .hero h1 { font-size: clamp(34px, 7vw, 50px); line-height: 1.08; margin-bottom: 10px; } .hero-subtext p { font-size: clamp(16px, 2.9vw, 19px); } .hero-photo::after { background: linear-gradient( 180deg, rgba(250, 248, 245, 0.18) 0%, rgba(250, 248, 245, 0.28) 35%, rgba(250, 248, 245, 0.38) 70%, rgba(250, 248, 245, 0.46) 100% ); } .page-head--photo .page-head-inner { padding: var(--section-y) var(--gutter); } .page-head--photo .page-head-card { padding: 28px 28px; } .page-head--contact .page-head-inner { padding: var(--section-y-sm) var(--gutter); } .page-head--contact .page-head-card { padding: 24px 24px; } .callout-inner--photo .callout-text { padding: 22px 24px; } .callout-inner { grid-template-columns: 1fr; padding: 40px 32px; } .callout-actions { justify-content: flex-start; } .contact { grid-template-columns: 1fr; gap: 40px; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-inner .brand-block { grid-column: 1 / -1; } .vet-bio { grid-template-columns: 1fr; gap: 18px; } .vet-bio-avatar { width: 120px; height: 120px; } } @media (max-width: 600px) { :root { --header-space: 108px; } .nav { gap: 12px; } .hero { --hero-min-h: 0px; --hero-fluid-h: 0vw; --hero-max-h: 9999px; --hero-photo-pos-y: 45%; --hero-inner-top: 14px; --hero-inner-bottom: 44px; --hero-headline-y: 0px; --hero-subtext-y: 0px; --hero-subtext-maxw: 100%; --hero-subtext-self: stretch; display: flex; flex-direction: column; /* Solid sage so the photo's fade end and the panel are exact matches. Any darkening for depth lives on .hero-inner so it can't bleed into the seam zone where the photo finishes. */ background: var(--sage-deep); border-bottom-color: #222f23; } /* Mobile: photo becomes a banner that stacks above the sage text panel. */ .hero-photo { position: relative; inset: auto; width: 100%; height: clamp(240px, 68vw, 340px); flex-shrink: 0; } /* Long, soft fade that starts well up the photo and resolves to the exact panel colour, so there is no visible seam between the two. */ .hero-photo::after { background: linear-gradient( 180deg, transparent 0%, transparent 20%, rgba(63, 88, 65, 0.18) 42%, rgba(63, 88, 65, 0.48) 60%, rgba(63, 88, 65, 0.80) 78%, var(--sage-deep) 100% ); } /* Pull the inner block up so the topline sits over the photo's gradient zone, with the headline landing in the solid sage section below. The bg here is transparent for the overlap zone, then quietly darkens toward the bottom for a hint of depth - well below the photo seam. */ .hero-inner { margin-top: -72px; position: relative; z-index: 2; background: linear-gradient( 180deg, transparent 0%, transparent 96px, rgba(0, 0, 0, 0.06) 60%, rgba(0, 0, 0, 0.14) 100% ); } .hero-topline { color: rgba(232, 240, 226, 0.92); text-align: left; text-shadow: 0 1px 6px rgba(20, 30, 20, 0.55); } .hero h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.1; margin-bottom: 8px; color: #f0ece6; text-shadow: 0 1px 10px rgba(20, 30, 20, 0.4); } .hero h1 em { color: var(--sage-light); } .hero-subtext p { font-size: clamp(15px, 4.1vw, 17px); line-height: 1.52; color: rgba(240, 236, 230, 0.82); } .row { grid-template-columns: 1fr; } .form-card { padding: 24px; } .colophon { flex-direction: column; } /* Narrower collapsed baseline; scroll-linked scale matches ~28px / 44px wordmark + logo. */ .brand { --brand-scale-max: 1.556; --tagline-shrink-comp: 0.3; } .brand .wordmark { font-size: 18px; } .brand .brand-mark { width: 30px; height: 30px; } } @media (max-width: 520px) { /* Wordmark scales up on scroll and starts crowding the nav at narrow widths - drop the secondary About link, keep the primary CTA. */ .nav a:not(.btn) { display: none; } } @media (max-width: 460px) { :root { --header-space: 96px; } .header-inner { gap: 10px; } .brand { --brand-scale-max: 1.467; --tagline-shrink-comp: 0.24; } .brand-lockup { gap: 10px; } .brand .wordmark { font-size: 15px; } .brand .brand-mark { width: 24px; height: 24px; } .nav .btn { padding: 10px 14px; font-size: 13px; } }