/* Your Landscape Coach — one stylesheet, no build step. Tokens measured from the approved v3 mockup; see handoff/SPEC.md. Restructured per client revision markups (2026-08-06 → 2026-08-22). */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: #F8F5EE; color: #1B211C; font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; } html { scroll-behavior: smooth; scroll-padding-top: 64px; } /* clip (not hidden) so the sticky nav still sticks; hidden is the fallback for old browsers */ main { background: #F8F5EE; overflow-x: hidden; overflow-x: clip; } a { color: #16341F; text-decoration-color: rgba(22,52,31,.35); text-underline-offset: 3px; } a:hover { color: #2F8360; } :focus-visible { outline: 2px solid #2F8360; outline-offset: 3px; } img { max-width: 100%; height: auto; } .wrap { max-width: 760px; margin: 0 auto; } h1 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(38px, 7.4vw, 62px); line-height: 1.06; letter-spacing: -.02em; color: #16341F; margin: 0; max-width: 18em; } h2 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(28px, 5.6vw, 38px); line-height: 1.14; letter-spacing: -.015em; color: #16341F; margin: 0 0 16px; } .body-copy { font-size: 19px; line-height: 1.6; color: #2C362E; margin: 0 0 14px; max-width: 36em; } .body-copy:last-child { margin-bottom: 0; } /* De-emphasized passage */ .body-copy.aside { font-size: 16.5px; font-style: italic; line-height: 1.6; color: #4A554B; max-width: 38em; } /* Hide every specimen at once for a print/plain variant: add class="no-specimens" to . */ .no-specimens .specimen { display: none; } /* ---------- Top bar ---------- */ .topbar-row { padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; } .topbar-name, .topbar-tag { margin: 0; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; text-transform: uppercase; } .topbar-name { font-weight: 600; letter-spacing: .12em; color: #16341F; } .topbar-tag { letter-spacing: .1em; color: #65705F; } /* ---------- Sticky section nav ---------- */ .sitenav { position: sticky; top: 0; z-index: 50; background: rgba(248,245,238,.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid rgba(22,52,31,.16); border-bottom: 1px solid rgba(22,52,31,.16); } .sitenav-row { display: flex; gap: 0 30px; padding: 0 22px; } .sitenav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; font-size: 15px; font-weight: 600; color: #16341F; text-decoration: none; transition: color .15s ease; } .sitenav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2F8360; transform: scaleX(0); transition: transform .2s ease; } .sitenav a:hover, .sitenav a[aria-current] { color: #2F8360; } .sitenav a[aria-current]::after { transform: scaleX(1); } @media (max-width: 480px) { .sitenav-row { justify-content: space-between; gap: 0; } } /* ---------- Hero ---------- */ .hero { padding: 52px 22px 0; position: relative; } .hero-row { display: flex; flex-wrap: wrap; gap: 16px 34px; align-items: flex-start; } .hero-text { flex: 1 1 380px; min-width: 0; } /* Half the heading size, unbold, tight to the heading */ .hero-subhead { font-family: 'Source Serif 4', Georgia, serif; font-weight: 400; font-size: clamp(19px, 3.7vw, 31px); line-height: 1.2; letter-spacing: -.01em; color: #16341F; margin: 14px 0 0; max-width: 24em; } .hero-sub { font-size: 19px; line-height: 1.55; color: #3A463C; margin: 14px 0 0; max-width: 32em; } .hero-contact { font-size: 17px; font-weight: 600; color: #16341F; margin: 26px 0 0; max-width: 32em; } .hero-contact a { font-weight: 700; overflow-wrap: anywhere; } .contact-gap { display: inline-block; width: 18px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 3px; font-size: 17px; font-weight: 600; text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease; } .btn-primary { padding: 0 24px; background: #16341F; color: #F8F5EE; } .btn-primary:hover { background: #2F8360; color: #F8F5EE; } .btn-secondary { padding: 0 20px; border: 1px solid rgba(22,52,31,.3); color: #16341F; } .btn-secondary:hover { border-color: #2F8360; color: #2F8360; } .hero-tagline { font-size: 17px; font-weight: 600; color: #2F8360; margin: 16px 0 0; max-width: 32em; } .hero-side { flex: 0 1 186px; width: 186px; max-width: 100%; margin: 6px 0 0 auto; display: grid; gap: 16px; } .logo-img { display: block; width: 100%; height: auto; } .headshot-fig { margin: 0; } .headshot-img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 3px; } .headshot-fig figcaption { margin-top: 8px; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: #65705F; } @media (max-width: 480px) { .hero-side { margin-right: 0; grid-template-columns: 1fr 1fr; align-items: start; width: 100%; flex-basis: 100%; } } /* ---------- Spectrum rule + services ---------- */ .services { padding: 40px 22px 0; } .spectrum { display: flex; height: 3px; width: 100%; opacity: .7; } .spectrum span { flex: 1; } .spectrum span:nth-child(1) { background: #9E5A61; } .spectrum span:nth-child(2) { background: #A5764B; } .spectrum span:nth-child(3) { background: #A5904F; } .spectrum span:nth-child(4) { background: #4F8871; } .spectrum span:nth-child(5) { background: #4A7C84; } .spectrum span:nth-child(6) { background: #606F96; } .spectrum span:nth-child(7) { background: #755A85; } .services h2 { margin: 26px 0 12px; } .services-lede { font-size: 19px; line-height: 1.6; color: #2C362E; font-weight: 600; margin: 0 0 16px; max-width: 36em; } .services-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .services-list li { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; color: #16341F; } .swatch-sm { width: 14px; height: 14px; flex: none; } /* ---------- Photo bands ---------- */ .figure-band { padding: 34px 22px 0; } .figure-band-lower { padding-top: 58px; } .photo { position: relative; background: #E7E2D4; border-radius: 3px; overflow: hidden; } .photo img { display: block; width: 100%; height: auto; } .fig-caption { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .08em; color: #65705F; margin: 10px 0 0; } .fig-caption-long { font-family: 'Figtree', system-ui, sans-serif; font-size: 15px; line-height: 1.6; letter-spacing: 0; color: #65705F; margin: 12px 0 0; max-width: 42em; } /* ---------- Sections ---------- */ .section { padding: 58px 22px 0; position: relative; } .section .wrap { position: relative; } /* ---------- Testimonials (full-bleed dark bands) ---------- */ .testimonial-band { background: #16341F; padding: 58px 22px 62px; margin-top: 70px; } .pull-quote { margin: 0 0 28px; } .pull-quote p { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(27px, 5.2vw, 38px); line-height: 1.18; letter-spacing: -.015em; color: #F8F5EE; margin: 0; max-width: 20em; } .testimonial-card { margin: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2); border-radius: 3px; padding: 24px 24px 18px; max-width: 40em; } .testimonial-card blockquote { margin: 0; } .testimonial-card blockquote p { font-size: 17px; line-height: 1.65; color: #DCE3D9; margin: 0; } .testimonial-card figcaption { margin-top: 18px; border-top: 1px solid rgba(255,255,255,.28); padding-top: 12px; } .attribution { display: flex; align-items: center; gap: 10px; margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 16px; font-style: italic; color: #9DB79C; } .attrib-square { width: 12px; height: 12px; flex: none; } .herb-latin { margin: 0; font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; font-style: italic; color: #16341F; } .herb-cat { margin: 2px 0 0; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #65705F; } /* ---------- Landscape therapy specimen ---------- */ .therapy-specimen { width: clamp(110px, 22vw, 168px); margin: 22px 0 0 auto; } .specimen-img { width: 100%; aspect-ratio: 1; } .specimen-img img { display: block; width: 100%; height: 100%; object-fit: contain; } .therapy-specimen-img { transform: rotate(12deg); filter: drop-shadow(8px 12px 12px rgba(22,52,31,.24)); } .herb-label { margin-top: 8px; border-top: 1px solid rgba(22,52,31,.34); padding-top: 6px; } /* ---------- Pricing & packages ---------- */ .pricing .sliding-scale { margin-top: 16px; } .referral-box { display: inline-block; font-size: 17px; font-weight: 600; color: #2F8360; border: 1px solid #2F8360; border-radius: 3px; padding: 12px 18px; margin: 8px 0 0; } .sliding-scale { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-style: italic; color: #16341F; margin: 18px 0 0; } /* ---------- About ---------- */ .about { padding-top: 62px; } .about-grid { display: grid; gap: 26px; } .photo-portrait { width: 100%; max-width: 300px; aspect-ratio: 4/5; } .photo-portrait img { height: 100%; object-fit: cover; } .bio-eyebrow { font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; font-weight: 600; color: #2F8360; margin: 0 0 2px; } .about h2 { margin-bottom: 8px; } .brand-line { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12.5px; letter-spacing: .08em; color: #2F8360; margin: 0 0 20px; } .credentials { list-style: none; padding: 0; margin: 18px 0 0; max-width: 36em; display: grid; gap: 9px; } .credentials li { position: relative; padding-left: 20px; font-size: 17px; line-height: 1.5; color: #2C362E; } .credentials li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: #2F8360; } .about-specimen { position: absolute; top: 6px; right: -30px; width: clamp(112px, 25vw, 196px); z-index: 3; } .about-specimen-img { transform: rotate(-9deg); filter: drop-shadow(9px 13px 13px rgba(22,52,31,.25)); } @media (max-width: 480px) { .about-specimen { right: -10px; } .photo-portrait { max-width: calc(100% - 134px); } } /* ---------- FAQ ---------- */ .faq { padding-top: 62px; } .faq-list { display: grid; gap: 1px; background: rgba(22,52,31,.16); border: 1px solid rgba(22,52,31,.16); } .faq-list details { background: #F8F5EE; padding: 2px 20px; } .faq-list summary { list-style: none; cursor: pointer; display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 20px 0; min-height: 56px; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: #16341F; margin: 0; } .faq-mark { flex: none; font-size: 22px; line-height: 1; transition: transform .18s ease; } details[open] .faq-mark { transform: rotate(45deg); } .faq-list details > p { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: #2C362E; max-width: 38em; } /* ---------- Footer ---------- */ footer { margin-top: 78px; background: #16341F; color: #B9C8B7; } .footer-grid { padding: 46px 22px 42px; display: grid; gap: 28px; } .footer-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 25px; font-weight: 600; letter-spacing: -.01em; color: #F8F5EE; margin: 0 0 4px; } .footer-name2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: #F8F5EE; margin: 0 0 8px; } .footer-brandline { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .08em; color: #9DB79C; margin: 0; } .footer-block { display: grid; gap: 6px; } .footer-block p { font-size: 16px; margin: 0; } .footer-phone { font-family: 'Source Serif 4', Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -.01em; color: #F8F5EE; text-decoration: none; } .footer-phone:hover { color: #9DB79C; } .footer-email { color: #F8F5EE; text-decoration-color: rgba(248,245,238,.4); overflow-wrap: anywhere; } .footer-email:hover { color: #9DB79C; } .footer-logo { width: 128px; height: auto; justify-self: start; } .footer-copy { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .06em; color: #7E8F7D; margin: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; } /* ---------- Motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }