/* ============================================================ CSS VARIABLES & GLOBAL STYLES Edit colours, fonts, and base styles here. This file is linked in index.html . ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #ffffff; --bg2: #f7f6f3; --bg3: #eef4e5; --border: #e8e4dc; --green: #4e8c1e; /* ← main brand colour */ --green-lt: #eef4e5; --green-md: #d4e8b8; --text: #1c1c1a; --muted: #6b6860; --subtle: #a8a49c; --sans: 'Poppins', sans-serif; --serif: 'Poppins', sans-serif; } html { scroll-behavior: smooth; font-size: 106%; } body { font-family: var(--sans); font-weight: 300; color: var(--text); background: var(--bg); overflow-x: hidden; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--bg2); } ::-webkit-scrollbar-thumb { background: #a8d878; border-radius: 3px; } /* ── SHARED SECTION HELPERS ── */ .section { padding: 5.5rem 2.5rem; max-width: 1100px; margin: 0 auto; } .full-section { padding: 5.5rem 2.5rem; } .sec-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: .75rem; } .sec-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--green); border-radius: 1px; } .sec-title { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 600; color: var(--text); line-height: 1.2; } .sec-title em { font-style: italic; color: var(--green); } /* ── BUTTONS (shared) ── */ .btn-green { font-size: .78rem; font-weight: 500; color: #fff; background: var(--green); border: none; padding: .7rem 1.6rem; border-radius: 24px; cursor: pointer; text-decoration: none; transition: background .2s; display: inline-block; } .btn-green:hover { background: #3d7016; } .btn-outline { font-size: .78rem; font-weight: 400; color: var(--green); background: transparent; border: 1.5px solid var(--green-md); padding: .7rem 1.6rem; border-radius: 24px; cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s; display: inline-block; } .btn-outline:hover { border-color: var(--green); background: var(--green-lt); } /* ── ANIMATIONS ── */ @keyframes fadeInUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } } @keyframes fadeInLeft { from { opacity:0; transform:translateX(-30px); } to { opacity:1; transform:translateX(0); } } @keyframes fadeInRight { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:translateX(0); } } @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @keyframes pulseRing { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(1.6);opacity:0} } @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } @keyframes rotateSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} } @keyframes scaleIn { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} } @keyframes blink-cursor{ 0%,100%{border-color:var(--green)} 50%{border-color:transparent} } /* ── SCROLL REVEAL ── */ .reveal { opacity:0; transform:translateY(24px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); } .reveal.visible{ opacity:1; transform:translateY(0); } .reveal-left { opacity:0; transform:translateX(-28px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); } .reveal-left.visible { opacity:1; transform:translateX(0); } .reveal-right { opacity:0; transform:translateX(28px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); } .reveal-right.visible{ opacity:1; transform:translateX(0); } /* ── MOBILE (shared) ── */ @media (max-width: 900px) { .section, .full-section { padding: 3.5rem 1.25rem; } .sec-title { font-size: clamp(1.5rem, 6vw, 2.2rem); } }