:root { --ink: #2b3a2a; --ink-soft: #4a5a49; --cream: #faf6ee; --paper: #f4ecdc; --wash-green: #aec39a; --wash-olive: #c7c68b; --wash-amber: #e0b07a; --wash-rose: #dfa5a5; --wash-sky: #b7c9d4; --wash-lilac: #c2b1cf; --accent: #6a8a5f; --accent-deep: #3e5a37; --border: #e4dcc7; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Lato', 'Helvetica Neue', sans-serif; color: var(--ink); background: var(--cream); font-size: 17px; line-height: 1.6; } body { background-color: var(--cream); background-image: url('watercolour-bg.svg'); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; min-height: 100vh; } /* Swaying meadow — fixed at bottom of viewport */ .meadow { position: fixed; left: 0; right: 0; bottom: 0; height: 42vh; min-height: 280px; max-height: 460px; z-index: 0; pointer-events: none; transition: filter 1.6s ease; overflow: hidden; } .meadow-painting { position: absolute; inset: 0; background-image: url('meadow-watercolour.jpg'); background-size: cover; background-position: center bottom; -webkit-mask-image: linear-gradient(to top, black 35%, rgba(0,0,0,0.6) 60%, transparent 95%); mask-image: linear-gradient(to top, black 35%, rgba(0,0,0,0.6) 60%, transparent 95%); animation: meadow-breeze 18s ease-in-out infinite; } .meadow-overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.22; } .meadow-overlay object, .meadow-overlay svg { width: 100%; height: 100%; display: block; } @keyframes meadow-breeze { 0%, 100% { transform: translateX(0) skewX(-0.15deg); } 50% { transform: translateX(-8px) skewX(0.15deg); } } /* Seasonal tint — driven by a data attribute on set via scroll JS */ body[data-season="spring"] .meadow { filter: hue-rotate(-6deg) saturate(1.05) brightness(1.05); } body[data-season="summer"] .meadow { filter: hue-rotate(-18deg) saturate(1.15) brightness(1.02); } body[data-season="autumn"] .meadow { filter: hue-rotate(22deg) saturate(1.25) brightness(0.92); } body[data-season="winter"] .meadow { filter: hue-rotate(8deg) saturate(0.55) brightness(0.98); } @keyframes sway-far { 0%, 100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.6deg); } } @keyframes sway-mid { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } } @keyframes sway-near { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } } @keyframes sway-daisy { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } } .m-far { transform-origin: center bottom; animation: sway-far 9s ease-in-out infinite; } .m-mid { transform-origin: center bottom; animation: sway-mid 6.5s ease-in-out infinite; } .m-daisies { transform-origin: center bottom; animation: sway-daisy 5s ease-in-out infinite; } .m-near { transform-origin: center bottom; animation: sway-near 4.5s ease-in-out infinite; } .m-animals { transform-origin: center bottom; } body.is-scrolling .m-far, body.is-scrolling .m-mid, body.is-scrolling .m-daisies, body.is-scrolling .m-near { animation-duration: 1.8s; } @media (prefers-reduced-motion: reduce) { .m-far, .m-mid, .m-near, .m-daisies { animation: none; } } h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; color: var(--accent-deep); letter-spacing: -0.01em; } h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.1; margin: 0.4em 0; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.2; margin-top: 0; } h3 { font-size: 1.35rem; margin: 0 0 0.4em 0; color: var(--accent-deep); } p { margin: 0 0 1em 0; } .small { font-size: 0.85rem; color: var(--ink-soft); } .italic { font-style: italic; } .centered { text-align: center; } .eyebrow { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.22em; color: var(--accent); font-weight: 700; margin-bottom: 0.5em; } .site-nav { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 2.5rem; position: sticky; top: 0; background: rgba(250, 246, 238, 0.92); backdrop-filter: blur(8px); z-index: 50; border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); } .brand-mark { width: 2.3rem; height: 2.3rem; display: block; flex-shrink: 0; } .brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.01em; } .site-nav nav { display: flex; gap: 2rem; align-items: center; } .site-nav nav a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; transition: color 0.2s; } .site-nav nav a:hover { color: var(--accent-deep); } .nav-cta { background: var(--accent); color: var(--cream) !important; padding: 0.55rem 1.15rem; border-radius: 999px; font-weight: 500; } .nav-cta:hover { background: var(--accent-deep); color: var(--cream); } /* Hero */ .hero { position: relative; padding: 7rem 2.5rem 6rem; overflow: hidden; min-height: 72vh; display: flex; align-items: center; } .wash { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.45; pointer-events: none; } .wash-spring { width: 520px; height: 520px; top: -120px; right: -80px; background: radial-gradient(circle, var(--wash-green), transparent 70%); } .wash-summer { width: 440px; height: 440px; bottom: -140px; left: -60px; background: radial-gradient(circle, var(--wash-amber), transparent 70%); } .wash-sprig { width: 260px; height: 260px; top: 38%; left: 8%; background: radial-gradient(ellipse at 30% 40%, rgba(174, 195, 154, 0.55), transparent 60%), radial-gradient(ellipse at 65% 60%, rgba(194, 177, 207, 0.35), transparent 65%); opacity: 0.6; filter: blur(40px); } .wash-meadow { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, rgba(174, 195, 154, 0.55), transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(224, 176, 122, 0.45), transparent 60%), radial-gradient(ellipse at 50% 50%, rgba(194, 177, 207, 0.25), transparent 70%); filter: blur(30px); opacity: 0.85; pointer-events: none; } .hero-inner { position: relative; max-width: 780px; z-index: 2; margin: 0 auto; text-align: center; padding: 2.5rem 1.5rem; border-radius: 24px; background: radial-gradient(ellipse at center, rgba(250, 246, 238, 0.85) 0%, rgba(250, 246, 238, 0.7) 55%, rgba(250, 246, 238, 0) 100%); backdrop-filter: blur(2px); } .hero-inner h1, .hero-inner .lead { text-shadow: 0 1px 0 rgba(250, 246, 238, 0.6); } .lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 580px; margin: 1.2em auto 2em; } .hero-ctas { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 0.9rem 1.8rem; border-radius: 999px; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: all 0.2s; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; } .btn-primary { background: var(--accent); color: var(--cream); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--accent-deep); border-color: var(--accent-deep); } .btn-ghost:hover { background: rgba(62, 90, 55, 0.08); } /* Paradox band */ .paradox { padding: 0 2.5rem 4rem; max-width: 920px; margin: 0 auto; text-align: center; } .paradox-lead { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.5; color: var(--ink); font-style: italic; font-weight: 400; } .paradox-lead strong { font-style: normal; font-weight: 500; color: var(--accent-deep); } /* Principles */ .principles { padding: 5rem 2.5rem 4rem; max-width: 1200px; margin: 0 auto; } .principles h2 { margin-bottom: 3rem; } .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .principle { position: relative; padding: 2rem 1.8rem 1.8rem; background: rgba(255, 255, 255, 0.4); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .principle::after { content: ''; position: absolute; bottom: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(174, 195, 154, 0.22), transparent 70%); filter: blur(18px); pointer-events: none; } .principle:nth-child(2)::after { background: radial-gradient(circle, rgba(223, 165, 165, 0.22), transparent 70%); } .principle:nth-child(3)::after { background: radial-gradient(circle, rgba(194, 177, 207, 0.24), transparent 70%); } .principle-mark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; color: var(--accent); letter-spacing: 0.08em; margin-bottom: 0.8rem; } .principle h3 { font-size: 1.5rem; margin-bottom: 0.6em; } .principle p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; position: relative; z-index: 1; } /* Pets band */ .pets { padding: 4.5rem 2.5rem; max-width: 1100px; margin: 0 auto; } .pets-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .pets-copy h2 { margin-top: 0; } .pets-copy p { color: var(--ink-soft); } .pets-illustration { position: relative; } .pets-illustration img { width: 100%; max-width: 460px; display: block; margin: 0 auto; } @media (max-width: 860px) { .pets-inner { grid-template-columns: 1fr; gap: 1.5rem; } .pets { padding: 3rem 1.25rem; } } /* Quote band */ .quote-band { position: relative; padding: 5rem 2.5rem; overflow: hidden; text-align: center; } .quote-inner { position: relative; max-width: 760px; margin: 0 auto; z-index: 1; } .quote-mark { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 4rem; color: var(--accent); line-height: 0.5; margin: 0 0 0.5rem 0; opacity: 0.6; } .quote-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.4; color: var(--ink); margin: 0 0 1.5rem 0; } .quote-attrib { font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.08em; margin: 0; } /* Seasons strip */ .seasons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 2.5rem; max-width: 1100px; margin: 0 auto 5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .season { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; gap: 0.25rem; border-right: 1px solid var(--border); font-size: 0.9rem; } .season:last-child { border-right: none; } .season strong { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 500; color: var(--accent-deep); } .season em { font-style: italic; color: var(--ink-soft); font-size: 0.85rem; } .dot { width: 14px; height: 14px; border-radius: 50%; margin-bottom: 0.4rem; filter: blur(0.5px); } .dot.spring { background: var(--wash-green); } .dot.summer { background: var(--wash-amber); } .dot.autumn { background: var(--wash-rose); } .dot.winter { background: var(--wash-sky); } /* About */ .about { padding: 5rem 2.5rem; max-width: 1100px; margin: 0 auto; } .about-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; align-items: center; } .about-copy p { color: var(--ink-soft); } .about-copy strong { color: var(--ink); font-weight: 700; } .about-portrait { text-align: center; } .portrait-frame { width: 100%; aspect-ratio: 4 / 5; border-radius: 6px; background: radial-gradient(circle at 35% 30%, rgba(223, 165, 165, 0.55), transparent 55%), radial-gradient(circle at 70% 65%, rgba(174, 195, 154, 0.5), transparent 60%), radial-gradient(circle at 40% 80%, rgba(224, 176, 122, 0.4), transparent 55%), linear-gradient(160deg, #ede4cf, #e7dcbc); box-shadow: 0 20px 50px rgba(62, 90, 55, 0.12); border: 8px solid var(--cream); outline: 1px solid var(--border); } .about-portrait figcaption { font-style: italic; font-size: 0.85rem; color: var(--ink-soft); margin-top: 1rem; } /* Services */ .services { padding: 5rem 2.5rem; max-width: 1200px; margin: 0 auto; } .services h2 { margin-bottom: 3rem; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .service { background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); border: 1px solid var(--border); border-radius: 14px; padding: 1.8rem 1.6rem; transition: all 0.2s; position: relative; overflow: hidden; } .service::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(174, 195, 154, 0.3), transparent 70%); filter: blur(10px); } .service:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(62, 90, 55, 0.08); border-color: var(--accent); } .service p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; } /* Gallery */ .gallery { padding: 5rem 2.5rem 6rem; max-width: 1200px; margin: 0 auto; } .gallery-intro { color: var(--ink-soft); max-width: 480px; margin: 0 auto 3rem; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; } .painting { margin: 0; text-align: center; } .wc { width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; margin-bottom: 0.8rem; box-shadow: 0 12px 30px rgba(62, 90, 55, 0.08); border: 6px solid var(--cream); outline: 1px solid var(--border); } .wc-bluebells { background: radial-gradient(ellipse at 30% 70%, rgba(194, 177, 207, 0.85), transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(174, 195, 154, 0.75), transparent 60%), radial-gradient(ellipse at 50% 30%, rgba(250, 246, 238, 0.9), transparent 55%), linear-gradient(180deg, #ead8e6, #cfd8bc 55%, #9db089); } .wc-meadow { background: radial-gradient(ellipse at 20% 40%, rgba(250, 246, 238, 0.95), transparent 55%), radial-gradient(ellipse at 70% 75%, rgba(224, 176, 122, 0.9), transparent 60%), radial-gradient(ellipse at 50% 60%, rgba(199, 198, 139, 0.95), transparent 65%), linear-gradient(180deg, #eae3c1, #d8c88f 60%, #b59b57); } .wc-bracken { background: radial-gradient(ellipse at 30% 60%, rgba(224, 176, 122, 0.9), transparent 60%), radial-gradient(ellipse at 70% 40%, rgba(223, 165, 165, 0.8), transparent 60%), radial-gradient(ellipse at 50% 80%, rgba(123, 79, 56, 0.6), transparent 60%), linear-gradient(180deg, #e5c9a0, #c48f5e 60%, #7a4e31); } .wc-frost { background: radial-gradient(ellipse at 40% 30%, rgba(250, 246, 238, 0.9), transparent 60%), radial-gradient(ellipse at 70% 70%, rgba(183, 201, 212, 0.85), transparent 60%), radial-gradient(ellipse at 20% 70%, rgba(194, 177, 207, 0.6), transparent 65%), linear-gradient(180deg, #e4ebf1, #b9c7d2 60%, #8ea0ac); } .painting figcaption { font-style: italic; font-size: 0.88rem; color: var(--ink-soft); } /* CTA band */ .cta-band { position: relative; padding: 5rem 2.5rem; background: radial-gradient(ellipse at 20% 40%, rgba(174, 195, 154, 0.6), transparent 55%), radial-gradient(ellipse at 80% 60%, rgba(223, 165, 165, 0.4), transparent 55%), var(--paper); text-align: center; } .cta-inner { max-width: 620px; margin: 0 auto; } .cta-inner h2 { margin-bottom: 0.5em; } .cta-inner p { color: var(--ink-soft); margin-bottom: 2em; } /* Footer */ .site-foot { padding: 3rem 2.5rem 2rem; border-top: 1px solid var(--border); background: var(--cream); } .foot-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; max-width: 1100px; margin: 0 auto 2rem; align-items: start; } .credits { text-align: center; margin: 2rem 0 0 0; color: var(--ink-soft); font-size: 0.75rem; } /* Responsive */ @media (max-width: 860px) { .site-nav { padding: 1rem 1.25rem; flex-wrap: wrap; gap: 1rem; } .site-nav nav { gap: 1rem; flex-wrap: wrap; font-size: 0.9rem; } .hero { padding: 4rem 1.5rem; } .seasons { grid-template-columns: repeat(2, 1fr); } .season:nth-child(2) { border-right: none; } .about, .services, .gallery { padding: 3.5rem 1.5rem; } .about-grid { grid-template-columns: 1fr; gap: 2rem; } .foot-inner { grid-template-columns: 1fr; text-align: center; } .principles-grid { grid-template-columns: 1fr; gap: 1.2rem; } .paradox { padding: 0 1.25rem 3rem; } .principles { padding: 3rem 1.25rem; } }