/*
* Nature, Horses & Holistics — site stylesheet
* nhh-site.css
*
* Usage (from pages in site/):
*
*
*
*
*
*
*
* Wrap page content in …
* Hero background and assets use root-absolute /input/ paths.
*
* Sections: .wf-hero · .about-section-v1 · .services-section-v3 ·
* .gallery-section-v2 · .cta-section-v1 · .footer-section-v1
*/
/* === Design tokens === */
:root {
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-display: 'Zilla Slab', Georgia, serif;
--font-script: 'Pinyon Script', cursive;
--color-espresso: #2e1a0e;
--color-brown: #3F2913;
--color-green: #597D3C;
--color-green-dark: #36591A;
--color-green-hero: #2e5c1e;
--color-green-hero-hover: #3d7a28;
--color-sage: #ACC186;
--color-gold: #B67C2F;
--color-cream: #F2F0E6;
--color-cream-muted: #E0DEE4;
--color-hero-nav: #f0ece0;
--color-white: #ffffff;
}
html {
scroll-behavior: smooth;
overscroll-behavior: none;
}
body {
margin: 0;
overscroll-behavior: none;
}
.site-preview-root {
display: block;
}
/* Keep hero/nav appearance stable even if sections toggle page theme/color-scheme. */
.wf-assembled-hero-shell,
.wf-assembled-hero-shell *,
.site-header-shell,
.site-header-shell * {
color-scheme: normal !important;
}
/* Compact site header (inner pages — nav only, no hero) */
.site-header-shell {
width: 100%;
max-width: 100%;
overflow-x: clip;
background-color: var(--color-hero-nav, #f0ece0);
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 0 rgba(63, 41, 19, 0.08);
box-sizing: border-box;
}
.site-header-shell *,
.site-header-shell *::before,
.site-header-shell *::after {
box-sizing: border-box;
}
.site-header-shell .wf-hero__nav {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
min-width: 0;
}
.site-header-shell .wf-hero__logo {
min-width: 0;
}
@media (max-width: 1024px) {
.site-header-shell .wf-hero__logo-icon {
width: 56px;
height: 56px;
}
.site-header-shell .wf-hero__logo-name {
font-size: 1.5rem;
}
.site-header-shell .wf-hero__logo-sub {
font-size: 1.25rem;
}
}
/* Hide common model-added fixed “Press D / light–dark” hint UI; document-level key handlers still run */
.site-preview-root [aria-label*="Press D" i],
.site-preview-root [aria-label*="press d" i],
.site-preview-root [title*="Press D" i],
.site-preview-root [title*="light/dark" i],
.site-preview-root [title*="light / dark" i],
.site-preview-root [data-theme-toggle],
.site-preview-root [data-wf-theme-hint],
.site-preview-root .wf-theme-toggle-chip {
display: none !important;
}
/* === section scroll animations === */
@keyframes wf-section-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/*
* wf-anim-js is added to by a blocking script before body renders.
* Without it (no JS), nothing is hidden.
*
* Structure per section:
* [data-wf-section] ← outer shell, background, never animated
* .wf-section-body ← passthrough
* model root ← owns background colour, never animated
* > children ← hidden until in-view, then fade+lift
*/
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 0;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: wf-section-in 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@media (prefers-reduced-motion: reduce) {
html.wf-anim-js .site-preview-root [data-wf-section]:not(.wf-section--in) .wf-section-body > * > * {
opacity: 1;
}
.site-preview-root [data-wf-section].wf-section--in .wf-section-body > * > * {
animation: none;
}
}
/* === hero_final.css === */
.wf-hero {
font-family: var(--font-serif);
width: 100%;
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background-color: #f0ece0;
box-sizing: border-box;
}
.wf-hero * {
box-sizing: border-box;
}
/* NAV */
.wf-hero__nav {
width: 100%;
background-color: #f0ece0;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 12px 48px;
position: relative;
z-index: 10;
}
.wf-hero__logo {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
justify-self: start;
color: inherit;
}
.wf-hero__nav-links a[aria-current="page"] {
color: var(--color-green, #597D3C);
font-weight: 600;
}
.wf-hero__nav-links a[aria-current="page"]:hover {
color: var(--color-green, #597D3C);
}
.wf-hero__nav-links a[aria-current="page"]::after {
content: "";
display: block;
width: 100%;
height: 2px;
margin-top: 6px;
background-color: var(--color-green, #597D3C);
border-radius: 999px;
}
.wf-hero__nav-cta[aria-current="page"] {
background-color: var(--color-green, #597D3C);
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
pointer-events: none;
}
.footer-link-v1[aria-current="page"] {
color: var(--color-sage, #ACC186);
font-weight: 600;
}
.wf-hero__logo-icon {
flex-shrink: 0;
display: block;
width: 72px;
height: 72px;
object-fit: contain;
}
.wf-hero__logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
font-family: var(--font-script);
font-style: normal;
font-weight: 400;
color: #2e1a0e;
}
.wf-hero__logo-name {
font-size: 1.85rem;
letter-spacing: 0.01em;
}
.wf-hero__logo-sub {
font-size: 1.55rem;
letter-spacing: 0.02em;
}
.wf-hero__nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 36px;
align-items: center;
justify-self: center;
grid-column: 2;
}
.wf-hero__nav-links a {
font-family: var(--font-serif);
font-size: 1.125rem;
color: #3a3a2a;
text-decoration: none;
font-weight: 500;
letter-spacing: 0.02em;
transition: color 0.2s;
}
.wf-hero__nav-links a:hover {
color: #3d6b22;
}
.wf-hero__nav-cta {
background-color: #2e5c1e;
color: #ffffff;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
padding: 12px 28px;
border-radius: 6px;
letter-spacing: 0.02em;
transition: background-color 0.2s;
justify-self: end;
grid-column: 3;
}
.wf-hero__nav-cta:hover {
background-color: #3d7a28;
}
/* BODY / HERO SECTION */
.wf-hero__body {
position: relative;
width: 100%;
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wf-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px 48px;
max-width: 820px;
width: 100%;
}
.wf-hero__headline {
font-family: var(--font-display);
font-size: clamp(2.75rem, 5.5vw, 4.5rem);
font-weight: 700;
color: #2e1a0e;
letter-spacing: 0.06em;
margin: 0 0 8px 0;
line-height: 1.1;
text-transform: uppercase;
}
.wf-hero__subheadline {
font-family: var(--font-script);
font-size: clamp(1.75rem, 5vw, 2.75rem);
font-weight: 400;
color: #2e1a0e;
margin: 0 0 16px 0;
line-height: 1.2;
}
.wf-hero__tagline {
font-family: var(--font-serif);
font-size: clamp(1rem, 2.5vw, 1.25rem);
color: #2e1a0e;
margin: 0 0 28px 0;
font-weight: 500;
letter-spacing: 0.01em;
}
.wf-hero__cta {
display: inline-block;
background-color: #2e5c1e;
color: #ffffff;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.14em;
text-decoration: none;
padding: 18px 56px;
border-radius: 50px;
margin-bottom: 28px;
transition: background-color 0.2s;
text-transform: uppercase;
}
.wf-hero__cta:hover {
background-color: #3d7a28;
}
.wf-hero__leaf-divider {
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px;
}
.wf-hero__leaf-divider svg {
display: block;
max-width: min(300px, 85vw);
height: auto;
}
.wf-hero__nav-menu {
display: contents;
}
.wf-hero__menu-toggle {
display: none;
position: relative;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
margin: 0;
border: none;
border-radius: 999px;
background: transparent;
cursor: pointer;
justify-self: end;
grid-column: 2;
transition: background-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
-webkit-tap-highlight-color: transparent;
}
.wf-hero__menu-toggle:active {
transform: scale(0.94);
}
.wf-hero__menu-bar {
position: absolute;
left: 50%;
width: 22px;
height: 2px;
margin-left: -11px;
background-color: var(--color-espresso, #2e1a0e);
border-radius: 999px;
transform-origin: center;
transition:
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.28s ease,
width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
background-color 0.25s ease;
}
.wf-hero__menu-bar:nth-child(1) {
top: 14px;
}
.wf-hero__menu-bar:nth-child(2) {
top: 21px;
}
.wf-hero__menu-bar:nth-child(3) {
top: 28px;
}
.wf-hero__nav.is-open .wf-hero__menu-toggle {
background-color: rgba(46, 26, 14, 0.08);
}
.wf-hero__nav.is-open .wf-hero__menu-bar:nth-child(1) {
top: 21px;
width: 24px;
margin-left: -12px;
transform: rotate(45deg);
}
.wf-hero__nav.is-open .wf-hero__menu-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.wf-hero__nav.is-open .wf-hero__menu-bar:nth-child(3) {
top: 21px;
width: 24px;
margin-left: -12px;
transform: rotate(-45deg);
}
@media (max-width: 1024px) {
.wf-hero__nav {
padding: 12px 24px;
}
.wf-hero__nav-links {
gap: 24px;
}
.wf-hero__nav-links a {
font-size: 1rem;
}
}
@media (max-width: 900px) {
.wf-hero__nav {
grid-template-columns: 1fr auto;
padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
padding-top: max(10px, env(safe-area-inset-top));
}
.wf-hero__menu-toggle {
display: flex;
}
.wf-hero__nav-menu {
display: flex;
grid-column: 1 / -1;
flex-direction: column;
align-items: stretch;
gap: 0;
width: 100%;
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
pointer-events: none;
padding: 0;
margin-top: 0;
border-top: 1px solid transparent;
transition:
max-height 0.65s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
margin-top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease,
visibility 0s linear 0.55s;
}
.wf-hero__nav.is-open .wf-hero__nav-menu {
max-height: 28rem;
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
padding: 10px 0 14px;
margin-top: 10px;
border-top-color: rgba(46, 26, 14, 0.12);
transition:
max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.04s,
padding 0.5s cubic-bezier(0.22, 1, 0.36, 1),
margin-top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease 0.08s,
visibility 0s linear 0s;
}
.wf-hero__nav-links {
flex-direction: column;
align-items: stretch;
gap: 0;
justify-self: stretch;
grid-column: unset;
width: 100%;
}
.wf-hero__nav-links li {
width: 100%;
overflow: hidden;
}
.wf-hero__nav-links a,
.wf-hero__nav-cta {
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
color 0.2s ease,
background-color 0.25s ease;
}
.wf-hero__nav.is-open .wf-hero__nav-links li:nth-child(1) a {
opacity: 1;
transform: translateY(0);
transition-delay: 0.1s;
}
.wf-hero__nav.is-open .wf-hero__nav-links li:nth-child(2) a {
opacity: 1;
transform: translateY(0);
transition-delay: 0.16s;
}
.wf-hero__nav.is-open .wf-hero__nav-links li:nth-child(3) a {
opacity: 1;
transform: translateY(0);
transition-delay: 0.22s;
}
.wf-hero__nav.is-open .wf-hero__nav-links li:nth-child(4) a {
opacity: 1;
transform: translateY(0);
transition-delay: 0.28s;
}
.wf-hero__nav.is-open .wf-hero__nav-links li:nth-child(5) a {
opacity: 1;
transform: translateY(0);
transition-delay: 0.34s;
}
.wf-hero__nav.is-open .wf-hero__nav-cta {
opacity: 1;
transform: translateY(0);
transition-delay: 0.4s;
}
.wf-hero__nav-links a {
display: block;
padding: 14px 4px;
font-size: 1.125rem;
text-align: center;
}
.wf-hero__nav-cta {
justify-self: stretch;
grid-column: unset;
width: 100%;
margin-top: 12px;
padding: 14px 20px;
text-align: center;
border-radius: 999px;
}
}
@media (prefers-reduced-motion: reduce) {
@media (max-width: 900px) {
.wf-hero__menu-bar,
.wf-hero__menu-toggle,
.wf-hero__nav-menu,
.wf-hero__nav-links a,
.wf-hero__nav-cta {
transition: none !important;
}
.wf-hero__nav-menu {
transform: none;
}
.wf-hero__nav:not(.is-open) .wf-hero__nav-menu {
max-height: 0;
opacity: 0;
visibility: hidden;
}
.wf-hero__nav.is-open .wf-hero__nav-menu {
max-height: 28rem;
opacity: 1;
visibility: visible;
}
.wf-hero__nav.is-open .wf-hero__nav-links a,
.wf-hero__nav.is-open .wf-hero__nav-cta {
opacity: 1;
transform: none;
}
}
}
@media (max-width: 600px) {
.wf-hero__logo-icon {
width: 56px;
height: 56px;
}
.wf-hero__logo-name {
font-size: clamp(1.15rem, 4.5vw, 1.85rem);
}
.wf-hero__logo-sub {
font-size: clamp(1rem, 3.8vw, 1.55rem);
}
.wf-hero__content {
padding: 32px max(16px, env(safe-area-inset-left)) 40px max(16px, env(safe-area-inset-right));
}
.wf-hero__bg-image {
background-position: center 35%;
}
.wf-hero__headline {
font-size: clamp(1.65rem, 7.5vw, 2.75rem);
letter-spacing: 0.04em;
}
.wf-hero__cta {
width: 100%;
max-width: 320px;
padding: 16px 24px;
letter-spacing: 0.1em;
font-size: 0.95rem;
text-align: center;
}
}
@media (max-width: 400px) {
.wf-hero__logo {
gap: 8px;
min-width: 0;
}
.wf-hero__logo-icon {
width: 48px;
height: 48px;
}
.wf-hero__logo-text {
min-width: 0;
}
.wf-hero__headline {
letter-spacing: 0.025em;
}
.wf-hero__tagline {
margin-bottom: 22px;
}
}
/* Hero background image layer */
.wf-hero__bg-image {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: url("/input/herobg.jpeg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.wf-hero__overlay {
display: none;
}
.wf-hero__nav,
.wf-hero__content,
.wf-hero__text-col,
.wf-hero__tablet-preview {
position: relative;
z-index: 2;
}
/* === assembled preview layer (hero bg, sections, rhythm, responsive non-hero) === */
/* ========== Assembled preview: coordinated rest-of-site (variant CSS owns section backgrounds) ========== */
.site-preview-root {
min-height: auto;
background: #fff;
}
.wf-assembled-hero-shell {
display: block;
width: 100%;
margin: 0;
padding: 0;
min-height: 100vh;
min-height: 100dvh;
}
.site-section-wf {
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0;
border-top: none;
background: transparent;
color: inherit;
}
@media (max-width: 900px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
padding-left: max(0rem, env(safe-area-inset-left, 0px));
padding-right: max(0rem, env(safe-area-inset-right, 0px));
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) img,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) video,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) svg {
max-width: 100%;
height: auto;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) table {
display: block;
width: 100% !important;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 768px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) {
min-width: 0;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display:grid"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="display: grid"] {
grid-template-columns: 1fr !important;
}
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction:row"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) [style*="flex-direction: row"] {
flex-direction: column !important;
}
}
@media (max-width: 480px) {
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) .button,
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="btn"],
.site-section-wf--coordinated[data-wf-section]:not([data-wf-section="hero"]) a[class*="cta"] {
max-width: 100%;
box-sizing: border-box;
word-break: break-word;
}
}
/* === about_v1.css === */
.about-section-v1 {
background-color: #F2F0E6;
padding: 72px 24px;
font-family: var(--font-serif);
color: #3F2913;
}
.about-content-v1 {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 48px;
align-items: center;
}
@media (min-width: 768px) {
.about-content-v1 {
flex-direction: row;
align-items: flex-start;
}
}
.about-image-wrapper-v1 {
flex: 1;
min-width: 300px;
max-width: 500px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.about-image-v1 {
width: 100%;
height: auto;
display: block;
object-fit: cover;
object-position: center;
}
.about-text-v1 {
flex: 1.5;
text-align: center;
}
@media (min-width: 768px) {
.about-text-v1 {
text-align: left;
padding-left: 48px;
}
}
.about-heading-v1 {
font-family: var(--font-serif);
font-size: 48px;
color: #3F2913;
margin-bottom: 16px;
line-height: 1.2;
}
.about-subheading-v1 {
font-family: var(--font-serif);
font-size: 24px;
color: #597D3C;
margin-bottom: 24px;
line-height: 1.5;
}
.about-paragraph-v1 {
font-size: 16px;
line-height: 1.6;
margin-bottom: 16px;
}
.about-bullets-v1 {
list-style: none;
padding: 0;
margin-top: 32px;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 768px) {
.about-bullets-v1 {
grid-template-columns: 1fr 1fr;
}
}
.about-bullets-v1 li {
background-color: #ACC186;
padding: 12px 20px;
border-radius: 4px;
font-weight: 600;
color: #3F2913;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
.about-heading-v1 {
font-size: clamp(2rem, 4vw, 3rem);
}
.about-section-v1 {
padding: 72px max(24px, env(safe-area-inset-left)) 72px max(24px, env(safe-area-inset-right));
}
}
@media (max-width: 767px) {
.about-section-v1 {
padding: 56px max(16px, env(safe-area-inset-left)) 64px max(16px, env(safe-area-inset-right));
}
.about-heading-v1 {
font-size: clamp(1.75rem, 6vw, 2.5rem);
}
.about-subheading-v1 {
font-size: clamp(1.05rem, 3.5vw, 1.35rem);
}
.about-text-v1 {
padding-left: 0;
}
.about-image-wrapper-v1 {
min-width: 0;
width: 100%;
}
}
/* === services_v3.css === */
.services-section-v3 {
background: linear-gradient(to bottom, #F2F0E6, #E0DEE4);
padding: 72px 24px;
font-family: var(--font-serif);
color: #3F2913;
}
.services-main-v3 {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 60px;
}
@media (min-width: 992px) {
.services-main-v3 {
flex-direction: row;
align-items: flex-start;
}
}
.services-text-v3 {
flex: 1;
text-align: center;
}
@media (min-width: 992px) {
.services-text-v3 {
text-align: left;
padding-right: 40px;
}
}
.services-heading-v3 {
font-family: var(--font-serif);
font-size: 48px;
color: #3F2913;
margin-bottom: 16px;
line-height: 1.2;
}
.services-intro-v3 {
font-family: var(--font-serif);
font-size: 20px;
color: #597D3C;
line-height: 1.5;
}
.service-list-v3 {
flex: 1.5;
display: flex;
flex-direction: column;
gap: 30px;
}
.service-item-v3 {
border-bottom: 1px solid #ACC186;
padding-bottom: 20px;
position: relative;
}
.service-item-v3:last-child {
border-bottom: none;
padding-bottom: 0;
}
.service-name-v3 {
font-family: var(--font-serif);
font-size: 28px;
color: #3F2913;
margin-bottom: 8px;
line-height: 1.3;
position: relative;
padding-left: 45px;
}
.service-name-v3::before {
content: attr(data-number);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-serif);
font-size: 32px;
color: #B67C2F;
margin-right: 15px;
}
.service-item-v3:nth-child(1) .service-name-v3::before { content: '1.'; }
.service-item-v3:nth-child(2) .service-name-v3::before { content: '2.'; }
.service-item-v3:nth-child(3) .service-name-v3::before { content: '3.'; }
.service-description-v3 {
font-size: 16px;
line-height: 1.6;
color: #3F2913;
padding-left: 45px;
}
/* === gallery_v2.css === */
.gallery-section-v2 {
background-color: #F2F0E6;
padding: 72px 24px;
font-family: var(--font-serif);
color: #3F2913;
text-align: center;
}
.gallery-heading-v2 {
font-family: var(--font-serif);
font-size: 48px;
color: #3F2913;
margin-bottom: 16px;
line-height: 1.2;
}
.gallery-subtitle-v2 {
font-family: var(--font-serif);
font-size: 20px;
color: #597D3C;
margin-bottom: 60px;
line-height: 1.5;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.gallery-wrapper-v2 {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.gallery-photo-v2 {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.gallery-photo-v2 img {
width: 100%;
height: 280px; /* Fixed height for consistency */
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.gallery-photo-v2:hover img {
transform: scale(1.08);
}
.photo-caption-v2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 10px 15px;
background-color: rgba(89, 125, 60, 0.85); /* Primary dark with opacity */
color: #FFFFFF;
font-size: 15px;
font-weight: 600;
text-align: left;
transform: translateY(-100%);
transition: transform 0.4s ease;
}
.gallery-photo-v2:hover .photo-caption-v2 {
transform: translateY(0%);
}
/* === testimonials_v2.css — Featured quote + stack === */
.testimonials-section-v2 {
background-color: var(--color-cream, #F2F0E6);
padding: 72px 24px;
font-family: var(--font-serif);
color: var(--color-brown, #3F2913);
}
.testimonials-wrap-v2 {
max-width: 820px;
margin: 0 auto;
}
.testimonials-header-v2 {
text-align: center;
margin-bottom: 48px;
}
.testimonials-kicker-v2 {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-green, #597D3C);
margin-bottom: 12px;
}
.testimonials-heading-v2 {
font-family: var(--font-display);
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--color-brown, #3F2913);
margin: 0 0 16px;
line-height: 1.1;
}
.testimonials-subtitle-v2 {
font-family: var(--font-script);
font-size: clamp(1.35rem, 3.5vw, 1.85rem);
color: var(--color-green, #597D3C);
line-height: 1.45;
margin: 0;
}
.testimonial-feature-v2 {
margin: 0 0 40px;
padding: 32px 28px;
background-color: rgba(172, 193, 134, 0.22);
border-left: 4px solid var(--color-gold, #B67C2F);
border-radius: 0 8px 8px 0;
}
.testimonial-feature-quote-v2 {
font-family: var(--font-script);
font-size: clamp(1.35rem, 3.5vw, 1.85rem);
line-height: 1.45;
color: var(--color-brown, #3F2913);
margin: 0 0 20px;
}
.testimonial-feature-name-v2 {
font-weight: 600;
font-size: 1rem;
margin: 0 0 4px;
}
.testimonial-feature-role-v2 {
font-size: 0.875rem;
color: var(--color-green, #597D3C);
margin: 0;
}
.testimonials-list-v2 {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.testimonial-item-v2 {
padding: 24px 0;
border-bottom: 1px solid rgba(172, 193, 134, 0.55);
margin: 0;
}
.testimonial-item-v2:last-child {
border-bottom: none;
padding-bottom: 0;
}
.testimonial-quote-v2 {
font-size: 1rem;
line-height: 1.65;
font-style: italic;
margin: 0 0 12px;
color: var(--color-brown, #3F2913);
}
.testimonial-name-v2 {
font-weight: 600;
font-size: 0.9375rem;
margin: 0 0 2px;
}
.testimonial-role-v2 {
font-size: 0.8125rem;
color: var(--color-green, #597D3C);
margin: 0;
}
@media (max-width: 539px) {
.testimonials-section-v2 {
padding: 56px max(16px, env(safe-area-inset-left)) 64px max(16px, env(safe-area-inset-right));
}
.testimonial-feature-v2 {
padding: 24px 20px;
}
}
.contact-link {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.contact-link:hover {
color: var(--color-green, #597D3C);
}
.contact-call-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-green, #597D3C);
color: #fff;
padding: 14px 32px;
border-radius: 100px;
font-family: var(--font-serif);
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.04em;
text-decoration: none;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.contact-call-btn:hover {
background-color: var(--color-green-dark, #36591A);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* === contact_v1.css — Detail cards + call to action === */
.contact-section-v1 {
background: linear-gradient(180deg, var(--color-cream, #F2F0E6) 0%, var(--color-cream-muted, #E0DEE4) 100%);
padding: 64px 24px 72px;
font-family: var(--font-serif);
color: var(--color-brown, #3F2913);
}
.contact-inner-v1 {
max-width: 820px;
margin: 0 auto;
}
.contact-header-v1 {
text-align: center;
margin-bottom: 40px;
}
.contact-eyebrow-v1 {
font-family: var(--font-script);
font-size: clamp(1.5rem, 4vw, 2rem);
color: var(--color-green, #597D3C);
margin: 0 0 12px;
line-height: 1.2;
}
.contact-heading-v1 {
font-family: var(--font-serif);
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600;
color: var(--color-brown, #3F2913);
margin: 0 0 16px;
line-height: 1.15;
}
.contact-subtitle-v1 {
font-size: clamp(1.05rem, 2.5vw, 1.25rem);
color: var(--color-green, #597D3C);
line-height: 1.55;
margin: 0;
}
.contact-details-v1 {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin-bottom: 40px;
}
@media (min-width: 640px) {
.contact-details-v1 {
grid-template-columns: repeat(3, 1fr);
}
}
.contact-detail-card-v1 {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 8px;
padding: 24px 20px;
box-shadow: 0 4px 16px rgba(63, 41, 19, 0.08);
text-align: center;
}
.contact-detail-label-v1 {
display: block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-green, #597D3C);
margin-bottom: 8px;
}
.contact-detail-value-v1 {
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.4;
margin: 0;
}
.contact-action-v1 {
background-color: rgba(255, 255, 255, 0.92);
border-radius: 12px;
padding: 32px 28px;
box-shadow: 0 6px 24px rgba(63, 41, 19, 0.08);
text-align: center;
}
.contact-action-text-v1 {
font-size: 1rem;
line-height: 1.65;
margin: 0 0 24px;
color: var(--color-brown, #3F2913);
}
.contact-session-list-v1 {
list-style: none;
padding: 0;
margin: 24px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.contact-session-list-v1 li {
background-color: rgba(172, 193, 134, 0.22);
border: 1px solid var(--color-sage, #ACC186);
color: var(--color-brown, #3F2913);
padding: 8px 16px;
border-radius: 999px;
font-size: 0.875rem;
font-weight: 600;
}
@media (max-width: 639px) {
.contact-section-v1 {
padding: 48px max(16px, env(safe-area-inset-left)) 56px max(16px, env(safe-area-inset-right));
}
.contact-action-v1 {
padding: 24px 20px;
}
.contact-call-btn {
width: 100%;
}
.contact-session-list-v1 {
flex-direction: column;
align-items: stretch;
}
}
/* === cta_v1.css === */
.cta-section-v1 {
background-color: #E0DEE4;
padding: 72px 24px;
font-family: var(--font-serif);
color: #3F2913;
text-align: center;
}
.cta-content-v1 {
max-width: 800px;
margin: 0 auto;
}
.cta-heading-v1 {
font-family: var(--font-serif);
font-size: 48px;
color: #3F2913;
margin-bottom: 24px;
line-height: 1.2;
}
.cta-text-v1 {
font-size: 18px;
line-height: 1.6;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons-v1 {
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
margin-bottom: 40px;
}
@media (min-width: 600px) {
.cta-buttons-v1 {
flex-direction: row;
}
}
.cta-button-primary-v1 {
background-color: #597D3C;
color: #FFFFFF;
padding: 16px 32px;
border-radius: 100px;
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
font-size: 16px;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.cta-button-primary-v1:hover {
background-color: #36591A;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.cta-button-secondary-v1 {
background-color: #ACC186;
color: #3F2913;
padding: 12px 24px;
border-radius: 100px;
text-decoration: none;
font-weight: 400;
font-size: 16px;
transition: background-color 0.3s ease;
}
.cta-button-secondary-v1:hover {
background-color: #92AA6A;
}
.trust-points-v1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px 30px;
margin-top: 30px;
}
.trust-points-v1 p {
font-size: 15px;
font-weight: 600;
color: #597D3C;
position: relative;
padding-left: 25px;
}
.trust-points-v1 p::before {
content: '\2713';
position: absolute;
left: 0;
color: #B67C2F;
font-weight: bold;
}
/* === footer_v1.css === */
.footer-section-v1 {
background-color: #3F2913;
color: #F2F0E6;
font-family: var(--font-serif);
padding: 72px 24px 24px 24px;
font-size: 15px;
}
.footer-container-v1 {
max-width: 1200px;
margin: 0 auto 40px auto;
display: flex;
flex-direction: column;
gap: 40px;
text-align: center;
}
@media (min-width: 768px) {
.footer-container-v1 {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
.footer-about-v1 {
flex: 2;
}
.footer-brand-v1 {
font-family: var(--font-serif);
font-size: 28px;
color: #ACC186;
margin-bottom: 15px;
}
.footer-blurb-v1 {
line-height: 1.6;
max-width: 400px;
margin: 0 auto;
}
@media (min-width: 768px) {
.footer-blurb-v1 {
margin-left: 0;
}
}
.footer-links-v1 {
flex: 2;
display: flex;
flex-direction: column;
gap: 30px;
justify-content: center;
}
@media (min-width: 500px) {
.footer-links-v1 {
flex-direction: row;
justify-content: space-around;
}
}
@media (min-width: 768px) {
.footer-links-v1 {
justify-content: flex-start;
gap: 60px;
}
}
.footer-column-v1 h4 {
font-family: var(--font-serif);
font-size: 18px;
color: #B67C2F;
margin-bottom: 15px;
}
.footer-column-v1 ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column-v1 li {
margin-bottom: 8px;
}
.footer-link-v1 {
color: #F2F0E6;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-link-v1:hover {
color: #ACC186;
}
.footer-contact-v1 {
flex: 1.5;
}
.footer-contact-v1 h4 {
font-family: var(--font-serif);
font-size: 18px;
color: #B67C2F;
margin-bottom: 15px;
}
.footer-contact-v1 p {
margin-bottom: 8px;
line-height: 1.6;
}
.footer-contact-link-v1 {
color: #F2F0E6;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-contact-link-v1:hover {
color: #ACC186;
}
.footer-bottom-v1 {
border-top: 1px solid rgba(242, 240, 230, 0.2);
padding-top: 24px;
text-align: center;
}
.footer-copyright-v1 {
font-size: 14px;
color: rgba(242, 240, 230, 0.7);
margin: 0;
}
/* === Home page preview (shortened sections + page CTAs) === */
.section-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
border: 2px solid var(--color-green, #597D3C);
border-radius: 100px;
font-family: var(--font-serif);
font-weight: 600;
font-size: 0.9375rem;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
color: var(--color-brown, #3F2913);
background-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.section-cta:hover {
background-color: var(--color-green, #597D3C);
color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.section-cta-wrap {
width: 100%;
text-align: center;
margin-top: 8px;
}
.home-preview.about-section-v1,
.home-preview.services-section-v3,
.home-preview.gallery-section-v2,
.home-preview.cta-section-v1 {
padding-top: 48px;
padding-bottom: 48px;
}
.home-preview .about-content-v1 {
gap: 32px;
}
.home-preview .about-subheading-v1 {
margin-bottom: 16px;
}
.home-preview .about-paragraph-v1 {
margin-bottom: 0;
}
.home-preview .about-text-v1 .section-cta {
margin-top: 24px;
}
@media (min-width: 768px) {
.home-preview .about-text-v1 .section-cta {
display: inline-flex;
}
}
.home-preview .services-main-v3 {
gap: 32px;
flex-wrap: wrap;
}
.home-preview .services-intro-v3 {
font-size: 18px;
}
.home-preview .service-list-v3 {
gap: 16px;
}
.home-preview .service-item-v3 {
padding-bottom: 12px;
}
.home-preview .service-name-v3 {
margin-bottom: 0;
}
.home-preview .gallery-heading-v2 {
font-size: clamp(2rem, 4vw, 2.75rem);
}
.home-preview .gallery-subtitle-v2 {
margin-bottom: 32px;
font-size: 18px;
}
.home-preview .gallery-wrapper-v2 {
gap: 20px;
}
.home-preview .cta-heading-v1 {
font-size: clamp(2rem, 4vw, 2.75rem);
margin-bottom: 16px;
}
.home-preview .cta-text-v1 {
margin-bottom: 28px;
font-size: 17px;
}
.home-preview .cta-buttons-v1 {
margin-bottom: 0;
}
.home-preview .cta-buttons-v1 .section-cta {
padding: 14px 32px;
font-size: 1rem;
}