/* ========================================================================== Nature and Nurture Farm Theme layered over Pico CSS v2. Palette sampled from designs.pdf. ========================================================================== */ :root { /* Brand palette */ --nf-cream: #f4f8ec; --nf-white: #ffffff; --nf-green-dark: #2c5226; --nf-green-mid: #5c8a3a; --nf-green-lite: #7fb04f; --nf-yellow: #f4c430; --nf-ink: #33402f; --nf-ink-soft: #4a5a45; --nf-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --nf-sans: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; --nf-shell: 1240px; --nf-gutter: clamp(1.25rem, 5vw, 4rem); --nf-section-y: clamp(3.5rem, 8vw, 6.5rem); --nf-radius: 10px; --nf-shadow: 0 2px 4px rgba(44, 82, 38, 0.06), 0 10px 26px rgba(44, 82, 38, 0.1); /* Pico overrides */ --pico-font-family: var(--nf-sans); --pico-line-height: 1.6; --pico-border-radius: var(--nf-radius); --pico-primary: var(--nf-green-dark); --pico-primary-hover: #1f3c1a; --pico-primary-focus: rgba(92, 138, 58, 0.35); --pico-spacing: 1rem; } /* Single light brand theme (see data-theme="light" on ). */ :root { color-scheme: light; } body { background: var(--nf-cream); color: var(--nf-ink); font-family: var(--nf-sans); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--nf-serif); font-weight: 700; color: var(--nf-green-dark); line-height: 1.12; letter-spacing: -0.01em; margin-block: 0 0.6em; text-wrap: balance; } h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 5rem); } h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); } h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); } p { margin-block: 0 1em; } p:last-child { margin-bottom: 0; } /* Pico mutes a paragraph that directly follows a heading, which drops body copy well below an accessible contrast ratio. State the colour explicitly. */ main p, main li { color: var(--nf-ink-soft); } a { color: var(--nf-green-mid); text-underline-offset: 0.18em; } a:hover { color: var(--nf-green-dark); } :focus-visible { outline: 3px solid var(--nf-green-mid); outline-offset: 3px; border-radius: 4px; } img { display: block; max-width: 100%; height: auto; } /* --------------------------------------------------------------- Layout -- */ .shell { width: 100%; /* max-width: var(--nf-shell); */ margin-inline: auto; padding-inline: var(--nf-gutter); } .shell--narrow { max-width: 42rem; } .section { padding-block: var(--nf-section-y); } .section--flush { padding-block: 0; } /* Pico gives every
a bottom margin. Between two cream sections you can't see it, but below a full-bleed one it shows as a cream stripe. Each section here sets its own vertical rhythm via padding. */ section { margin-bottom: 0; } /* Cancels Pico's `body > footer, body > header, body > main { padding-block }`. The hero needs to sit flush under the header; the header, footer and each section set their own vertical space. Matches Pico's selector so it wins on source order rather than a specificity bump. */ body > header, body > main, body > footer { padding-block: 0; } .section--dark { background: var(--nf-green-dark); color: #e6efdf; } /* Scoped to the section's own headings — card headings sit on white and must stay dark green. */ .section--dark > .shell > h2 { color: var(--nf-white); } .section--dark .lead { color: #cfdfc4; } .centred { text-align: center; } .lead { font-size: 1.0625em; color: var(--nf-ink-soft); max-width: 46rem; margin-block: -0.25em 2.5rem; } /* ------------------------------------------------------------- Skip link -- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--nf-yellow); color: var(--nf-green-dark); font-weight: 700; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--nf-radius) 0; } .skip-link:focus { left: 0; } /* ----------------------------------------------------------- Site header -- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(244, 248, 236, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(44, 82, 38, 0.12); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; } .site-header__brand { font-family: var(--nf-serif); font-weight: 700; font-size: 1.125rem; color: var(--nf-green-dark); text-decoration: none; } .site-header__brand span { font-style: italic; font-weight: 600; } /* ---------------------------------------------------------------- Badges -- */ .badge { display: inline-block; background: var(--nf-yellow); color: var(--nf-green-dark); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.7em 1.6em; border-radius: 999px; margin-bottom: 1.75rem; } .eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nf-green-mid); margin-bottom: 0.9rem; } .eyebrow--yellow { color: var(--nf-yellow); } /* --------------------------------------------------------------- Buttons -- */ .btn { display: inline-block; background: var(--nf-yellow); color: var(--nf-green-dark); font-family: var(--nf-sans); font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; text-align: center; padding: 1.05em 2.2em; border: 2px solid var(--nf-yellow); border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .btn:hover, .btn:focus-visible { background: #e3b117; border-color: #e3b117; color: var(--nf-green-dark); transform: translateY(-1px); } .btn--sm { padding: 0.7em 1.4em; font-size: 0.9375rem; } .btn--lg { font-size: 1.0625rem; padding: 1.15em 2.6em; } /* ------------------------------------------------------------------ Hero -- */ .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border-left: 12px solid var(--nf-green-dark); background: var(--nf-cream); } .hero__text { display: flex; align-items: center; padding: clamp(3rem, 7vw, 6rem) var(--nf-gutter); } .hero__text-inner { max-width: 34rem; margin-left: auto; width: 100%; } .hero__lead { font-size: 1.0625em; color: var(--nf-ink-soft); max-width: 32rem; margin-top: 1.75rem; } .hero__strap { font-family: var(--nf-serif); font-style: italic; font-weight: 700; color: var(--nf-green-mid); font-size: 1.0625rem; margin-top: clamp(2rem, 6vw, 4.5rem); } .hero__media { position: relative; min-height: clamp(18rem, 42vw, 40rem); } .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* --------------------------------------------------- Split text / media -- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--full { gap: 0; max-width: none; padding-inline: 0; } .split--media-first .split__media { order: -1; } .split__text { max-width: 36rem; } .split__text--padded { padding: clamp(3rem, 7vw, 6rem) var(--nf-gutter); justify-self: center; max-width: calc(var(--nf-shell) / 2); width: 100%; } .split__media img { width: 100%; border-radius: 4px; aspect-ratio: 1 / 1; object-fit: cover; } .split__media--bleed { position: relative; min-height: clamp(16rem, 40vw, 38rem); } .split__media--bleed img { position: absolute; inset: 0; height: 100%; border-radius: 0; aspect-ratio: auto; } /* ----------------------------------------------------------------- Quote -- */ .quote { background: var(--nf-green-dark); color: var(--nf-yellow); font-family: var(--nf-serif); font-style: italic; font-weight: 700; font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem); line-height: 1.35; border: 0; border-radius: var(--nf-radius); padding: 1.5rem 1.85rem; margin: 2.5rem 0 0; } /* ----------------------------------------------------------------- Cards -- */ .cards { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); padding: 0; margin: 0; } /* Pico sets list-style on the
  • , so clearing it on the