/* ========================================================================== African Farms Limited — Theme Aesthetic: agriculture & agribusiness. Warm parchment + harvest green + clay terracotta. Open and light by default — a working farm ledger, not a warehouse at night. ========================================================================== */ :root{ --bg:#f7f5ee; --surface:#ffffff; --surface-2:#efeadb; --text:#22301c; --muted:#5c6b52; --border:rgba(34,48,28,.12); --accent:#5c8a3a; --accent-2:#c17a3c; --accent-ink:#ffffff; --header-bg:rgba(247,245,238,.88); --nav-link:#22301c; --hero-overlay:linear-gradient(105deg,rgba(20,28,15,.88) 8%,rgba(20,28,15,.56) 54%,rgba(20,28,15,.22) 100%); --hero-lead:rgba(255,255,255,.9); --input-bg:#f1ede0; --input-bg-focus:#ffffff; --cta-bg:linear-gradient(120deg,#22301c,#3a5228); --footer-bg:#1c2717; --shadow-sm:0 2px 12px rgba(34,48,28,.08); --shadow:0 22px 55px -22px rgba(34,48,28,.22); --shadow-lg:0 45px 90px -32px rgba(34,48,28,.28); --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:"Manrope","Inter",system-ui,sans-serif; --header-h:84px; } h1,.h1,h2,.h2,.display{font-weight:800;letter-spacing:-.02em} h3,.h3{font-weight:700} .eyebrow{color:var(--accent)} /* hero sits on a dark-overlaid photo in both themes — keep header legible before scroll */ .site-header .brand{color:#fff} .site-header .nav-links a{color:rgba(255,255,255,.92)} .site-header .nav-links a.is-active{color:var(--accent)} .site-header .nav-toggle{border-color:rgba(255,255,255,.35)} .site-header .nav-toggle span{background:#fff} .site-header .theme-toggle{color:#fff;border-color:rgba(255,255,255,.35)} .site-header.is-scrolled .brand{color:var(--text)} .site-header.is-scrolled .nav-links a{color:var(--text)} .site-header.is-scrolled .nav-links a.is-active{color:var(--accent)} .site-header.is-scrolled .nav-toggle{border-color:var(--border)} .site-header.is-scrolled .nav-toggle span{background:var(--text)} .site-header.is-scrolled .theme-toggle{color:var(--text);border-color:var(--border)} .site-header .theme-toggle:hover{color:var(--accent);border-color:var(--accent)} /* ambient background — soft green + clay glow, like early light over a field */ body{background: radial-gradient(1200px 620px at 86% -10%,rgba(92,138,58,.10),transparent 60%), radial-gradient(950px 520px at -8% 20%,rgba(193,122,60,.09),transparent 60%), var(--bg)} .section--alt{background:var(--surface-2)} .section--dark{background:var(--footer-bg);color:#f2f5ec;--text:#f2f5ec;--muted:#a9b79c;--border:rgba(242,245,236,.10);--surface:#26331f;--surface-2:#2f3f27} .section--dark .eyebrow{color:#9ecf76} .section--dark .card{background:#26331f} /* the footer is always the dark soil band, in both themes — fixed local palette */ .site-footer{--text:#f2f5ec;--muted:#a9b79c;--border:rgba(242,245,236,.10)} .quote{font-family:var(--font-display);font-weight:600;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.4;letter-spacing:-.01em} .pill{background:var(--surface);box-shadow:var(--shadow-sm)} ::selection{background:var(--accent);color:#fff} /* ========================================================================== Dark theme — "Night Harvest": deep soil green, luminous leaf accent. Activated via . Light remains the brand default. ========================================================================== */ html[data-theme="dark"]{ --bg:#141d10; --surface:#1c2717; --surface-2:#25331d; --text:#f2f5ec; --muted:#a9b79c; --border:rgba(242,245,236,.11); --accent:#8bc35c; --accent-2:#d99456; --accent-ink:#12180d; --header-bg:rgba(18,25,14,.86); --nav-link:#f2f5ec; --input-bg:rgba(255,255,255,.05); --input-bg-focus:rgba(255,255,255,.08); --footer-bg:#0e140a; --shadow-sm:0 2px 12px rgba(4,8,2,.3); --shadow:0 24px 60px -24px rgba(4,8,2,.55); --shadow-lg:0 50px 100px -34px rgba(4,8,2,.6); } html[data-theme="dark"] body{background: radial-gradient(1100px 520px at 88% -20%,rgba(139,195,92,.10),transparent 60%), radial-gradient(760px 420px at -6% 8%,rgba(217,148,86,.08),transparent 60%), var(--bg)} html[data-theme="dark"] .section--dark{background:#0a0f07} html[data-theme="dark"] .pill{background:var(--surface);box-shadow:none} html[data-theme="dark"] ::selection{background:var(--accent);color:#12180d} /* theme toggle icons: light default shows the moon (switch to dark) */ .theme-toggle .i-sun{display:none} html[data-theme="dark"] .theme-toggle .i-moon{display:none} html[data-theme="dark"] .theme-toggle .i-sun{display:block}