/* ============================================================ [COMPANY NAME] — Agricultural Biotechnology Design System — shared across all pages Direction: "the seed packet meets the lab notebook." Fraunces (engraved, organic serif) carries the nature side — IBM Plex Sans/Mono (a technical, documentation-grade family) carries the science side. Field tags, dashed rules and lot-code labels borrow directly from agri-input packaging: everything on this site is labelled the way a bag of biofertiliser is labelled. ============================================================ */ /* Google Fonts moved to a in index.html's — an @import here was render-blocking and only discoverable after this file downloaded. */ /* ---------- Design Tokens ---------- */ :root { /* Color ramps — warm pine, clay and wheat instead of stock SaaS-green + gold. Everything sits on a warm paper base. */ --forest-900: #14200f; --forest-800: #1c2e15; --forest-700: #2a4520; --forest-600: #3c5f2c; --forest-500: #4f7a3a; --forest-400: #6f9955; --forest-300: #9bbd82; --forest-200: #c6dcb2; --forest-100: #e6efdb; --earth-900: #2b1608; --earth-800: #3f210d; --earth-700: #5c3113; --earth-600: #7f451a; --earth-500: #a85a21; --earth-400: #c47a3f; --earth-300: #d99f6b; --earth-200: #ecc79c; --earth-100: #f7e4cc; --sage-700: #56604f; --sage-600: #6c7863; --sage-500: #8a9880; --sage-400: #a8b69d; --sage-300: #c7d2bd; --sage-200: #e0e7d7; --sage-100: #f1f5ec; --gold-600: #a3781f; --gold-500: #c99a2e; --gold-400: #dfb75c; --gold-300: #ecd08b; --gold-200: #f5e4b8; --cream: #f5efe0; --offwhite: #faf7ef; --paper: #fffdf8; --ink-900: #1c1912; --ink-700: #3d3626; --ink-500: #6b6250; --ink-400: #948a76; --ink-300: #bdb5a2; --success: #4f7a3a; --warning: #c99a2e; --error: #a3421f; /* Typography — display / body / mono (labels, data, codes) */ --font-display: "Open Sans", sans-serif; --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --fs-hero: clamp(2.6rem, 6vw, 5.2rem); --fs-h1: clamp(2.2rem, 4.5vw, 3.6rem); --fs-h2: clamp(1.7rem, 3vw, 2.6rem); --fs-h3: clamp(1.25rem, 2vw, 1.6rem); --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.78rem; /* Spacing (8px system) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 2.5rem; --sp-6: 3rem; --sp-7: 4rem; --sp-8: 5rem; --sp-9: 6rem; --sp-10: 8rem; /* Radii — deliberately not full pills everywhere; a specimen-label squareness reads more "spec sheet" than "app" */ --r-sm: 0.4rem; --r-md: 0.7rem; --r-lg: 1.1rem; --r-xl: 1.5rem; --r-2xl: 2rem; --r-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(20, 15, 8, 0.07), 0 1px 2px rgba(20, 15, 8, 0.05); --shadow-md: 0 6px 24px rgba(20, 15, 8, 0.09), 0 2px 8px rgba(20, 15, 8, 0.05); --shadow-lg: 0 18px 48px rgba(20, 15, 8, 0.14), 0 6px 16px rgba(20, 15, 8, 0.07); --shadow-xl: 0 32px 80px rgba(20, 15, 8, 0.2); /* Layout */ --container: 1280px; --container-wide: 1440px; --nav-h: 80px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.6s; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; color: var(--ink-700); background: var(--offwhite); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul, ol { list-style: none; } input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--earth-500); outline-offset: 3px; border-radius: 4px; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--ink-900); letter-spacing: -0.01em; } h1 { font-size: var(--fs-h1); font-weight: 500; } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { color: var(--ink-500); } /* Field tag — the site's recurring signature: a dashed, mono-set label lifted from agri-input packaging (think the little specimen tag stitched to a seed bag). Used for eyebrows, categories and codes throughout. */ .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest-700)!important; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem 0.4rem 0.65rem; border: 1px dashed var(--forest-300); border-radius: var(--r-pill); background: rgba(255, 253, 248, 0.6); } .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--earth-500); flex-shrink: 0; } .eyebrow--light { color: var(--forest-100); border-color: rgba(230, 239, 219, 0.35); background: rgba(255, 255, 255, 0.06); } .eyebrow--light::before { background: var(--gold-400); } .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-500); } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.5rem; } .container--wide { max-width: var(--container-wide); } .section { padding: var(--sp-9) 0; padding-top:60px; padding-bottom:60px; position: relative; } .section--tight { padding: var(--sp-7) 0; } .section--dark { background: var(--forest-900); color: var(--forest-100); } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; } .section--dark p { color: var(--forest-200); } .section--cream { background: var(--cream); } .section--paper { background: var(--paper); } .section--forest { background: linear-gradient(160deg, var(--forest-800), var(--forest-700)); color: var(--forest-100); } .section--forest h1, .section--forest h2, .section--forest h3 { color: #fff; } .section--forest p { color: var(--forest-200); } .section-head { max-width: 720px; margin-bottom: var(--sp-6); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } .section-head h2 { margin-top: var(--sp-2); } .section-head p { margin-top: var(--sp-3); font-size: var(--fs-lead); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.95rem 1.75rem; border-radius: var(--r-md); font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; transition: all 0.35s var(--ease); position: relative; white-space: nowrap; } .btn--primary { background: var(--forest-600); color: #fff; box-shadow: 0 8px 24px rgba(60, 95, 44, 0.3); } .btn--primary:hover { background: var(--forest-700); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(60, 95, 44, 0.4); } .btn--light { background: var(--paper); color: var(--forest-700); box-shadow: var(--shadow-md); } .btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .btn--ghost { background: transparent; color: var(--forest-700); border: 1.5px solid var(--forest-200); } .btn--ghost:hover { background: var(--forest-600); color: #fff; border-color: var(--forest-600); } .btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); } .btn--ghost-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.5); } .btn--gold { background: var(--earth-500); color: #fff; box-shadow: 0 8px 24px rgba(168, 90, 33, 0.32); } .btn--gold:hover { background: var(--earth-600); transform: translateY(-2px); } .btn--lg { padding: 1.1rem 2.2rem; font-size: 1rem; } .btn--block { width: 100%; } .btn .arrow { transition: transform 0.35s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ---------- Navbar ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 1000; display: flex; align-items: center; transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.4s var(--ease); } .nav--scrolled { background: rgba(255, 253, 248, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(20,15,8,0.06), 0 8px 32px rgba(20,15,8,0.06); height: 68px; } .nav--dark { /*background: rgba(20, 32, 15, 0.4);*/ background: #fff; } .nav--dark.nav--scrolled { background: rgba(20, 32, 15, 0.95); backdrop-filter: blur(20px); } .nav__inner { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .nav__logo { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.02em; color: #3c5f2c; transition: color 0.4s var(--ease); } .nav--scrolled .nav__logo { color: var(--forest-800); } .nav--dark.nav--scrolled .nav__logo { color: #fff; } .nav__logo-mark { width: 38px; height: 38px; flex-shrink: 0; } .nav__logo-text { display: flex; flex-direction: column; } .nav__logo-text small { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.7; } .nav__links { display: flex; align-items: center; gap: 0.35rem; } .nav__link { padding: 0.6rem 1rem; /*font-size: 0.92rem;*/ font-weight: 700; color: rgb(60, 95, 44); border-radius: var(--r-sm); transition: color 0.3s, background 0.3s; position: relative; } .nav--scrolled .nav__link { color: var(--ink-700); } .nav--dark.nav--scrolled .nav__link { color: var(--forest-100); } .nav__link:hover { color: #fff; } .nav--scrolled .nav__link:hover { color: var(--forest-600); } .nav--dark.nav--scrolled .nav__link:hover { color: #fff; } .nav__link--active { color: #fff; } .nav--scrolled .nav__link--active { color: var(--forest-600); } .nav__link--active::after { content: ''; position: absolute; bottom: 0; left: 1rem; right: 1rem; height: 2px; background: var(--earth-500); border-radius: 1px; } .nav__cta { display: flex; align-items: center; gap: 1rem; } .nav__hamburger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border-radius: var(--r-sm); z-index: 1001; } .nav__hamburger span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: all 0.35s var(--ease); } .nav--scrolled .nav__hamburger span { background: var(--forest-800); } .nav--dark.nav--scrolled .nav__hamburger span { background: #fff; } .nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__hamburger.is-open span:nth-child(2) { opacity: 0; } .nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; top: 0; right: 0; width: 100%; max-width: 400px; height: 100vh; background: var(--forest-900); z-index: 999; padding: 6rem 2.5rem 2.5rem; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.5s var(--ease); overflow-y: auto; } .mobile-menu.is-open { transform: translateX(0); } .mobile-menu__link { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: #fff; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; transition: color 0.3s, padding-left 0.3s; } .mobile-menu__link:hover { color: var(--gold-400); padding-left: 0.5rem; } .mobile-menu__link .arrow { color: var(--forest-400); transition: transform 0.3s; } .mobile-menu__link:hover .arrow { transform: translateX(6px); color: var(--gold-400); } .mobile-menu .btn { margin-top: 2rem; } .mobile-menu__overlay { position: fixed; inset: 0; background: rgba(20,32,15,0.5); backdrop-filter: blur(4px); z-index: 998; opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); } .mobile-menu__overlay.is-open { opacity: 1; pointer-events: auto; } /* ---------- Footer ---------- */ .footer { background: var(--forest-900); color: var(--forest-200); padding: var(--sp-9) 0 var(--sp-5); position: relative; overflow: hidden; } .footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: var(--sp-7); border-bottom: 1px dashed rgba(255,255,255,0.14); } .footer__brand-logo { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--sp-3); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; } .footer__statement { color: var(--forest-300); font-size: 0.95rem; max-width: 340px; line-height: 1.6; } .footer__social { display: flex; gap: 0.75rem; margin-top: var(--sp-4); } .footer__social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: var(--forest-200); transition: all 0.3s var(--ease); } .footer__social a:hover { background: var(--forest-600); border-color: var(--forest-600); color: #fff; transform: translateY(-3px); } .footer__col h4 { color: #fff; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-3); } /*.footer__col ul li { margin-bottom: 0.7rem; }*/ .footer__col ul a { color: var(--forest-300); font-size: 0.92rem; transition: color 0.25s; } .footer__col ul a:hover { color: var(--gold-400); } .footer__newsletter { margin-top: var(--sp-3); } .footer__newsletter form { display: flex; gap: 0.5rem; } .footer__newsletter input { flex: 1; padding: 0.85rem 1.1rem; border-radius: var(--r-md); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 0.9rem; outline: none; transition: border-color 0.3s; } .footer__newsletter input::placeholder { color: var(--forest-400); } .footer__newsletter input:focus { border-color: var(--gold-400); } .footer__newsletter button { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-md); background: var(--forest-600); color: #fff; display: flex; align-items: center; justify-content: center; transition: background 0.3s, transform 0.3s; } .footer__newsletter button:hover { background: var(--forest-500); transform: translateY(-2px); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: var(--sp-5); font-family: var(--font-mono); font-size: 0.8rem; color: var(--forest-400); } .footer__bottom-links { display: flex; gap: 2rem; } .footer__bottom-links a { transition: color 0.25s; } .footer__bottom-links a:hover { color: var(--gold-400); } /* ---------- Cards ---------- */ .card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); overflow: hidden; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } /* Lot code — small mono "spec sheet" chip used in place of generic 01/02/03 numbering, wherever content is a set of parallel categories rather than a true sequence. */ .lot-code { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: var(--forest-500); display: inline-block; } /* ---------- Reveal animations ---------- */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal--left { transform: translateX(-40px); } .reveal--right { transform: translateX(40px); } .reveal--left.is-visible, .reveal--right.is-visible { transform: translateX(0); } .reveal--scale { transform: scale(0.95); } .reveal--scale.is-visible { transform: scale(1); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } .reveal-delay-5 { transition-delay: 0.5s; } /* ---------- Utility ---------- */ .text-center { text-align: center; } .mx-auto { margin-inline: auto; } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .grid { display: grid; gap: var(--sp-4); } .flex { display: flex; } .items-center { align-items: center; } .justify-center { justify-content: center; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .rounded { border-radius: var(--r-lg); } .relative { position: relative; } .hidden { display: none; } /* ---------- Decorative ---------- */ .organic-blob { position: absolute; border-radius: 50% 40% 60% 50% / 50% 60% 40% 50%; filter: blur(60px); opacity: 0.45; pointer-events: none; z-index: 0; } /* Graph-paper texture — a lab-notebook grid, used behind dark science-forward sections instead of a flat colour fill. */ .grid-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 40%, transparent 90%); } /* Seal — a rotating specimen-stamp badge, the site's one signature flourish: a circular certification mark like the ones printed on seed and fertiliser bags. */ .seal { display: inline-flex; flex-shrink: 0; color: currentColor; } .seal__ring { animation: sealSpin 26s linear infinite; transform-origin: 50% 50%; } @media (prefers-reduced-motion: reduce) { .seal__ring { animation: none; } } @keyframes sealSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ---------- Scroll indicator ---------- */ .scroll-indicator { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.7); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; z-index: 5; } .scroll-indicator__line { width: 1px; height: 50px; background: rgba(255,255,255,0.2); position: relative; overflow: hidden; } .scroll-indicator__line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--gold-400); animation: scrollDown 2s var(--ease) infinite; } @keyframes scrollDown { 0% { top: -40%; } 100% { top: 100%; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 860px) { .nav__links, .nav__cta .btn { display: none; } .nav__hamburger { display: flex; } .section { padding: var(--sp-7) 0; } } @media (max-width: 640px) { .footer__top { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; text-align: center; } .footer__bottom-links { justify-content: center; } .container { padding: 0 1.25rem; } .nav__inner { padding: 0 1.25rem; } .section { padding: var(--sp-6) 0; } } /* ============================================================ ULTRA PREMIUM GLOSSY v3 Nature × Biotechnology × Luxury Glass ============================================================ */ :root{ --ultra-bg:#f8f8f2; --ultra-green:#12351e; --ultra-green-2:#1e5a30; --ultra-green-3:#65a45b; --ultra-mint:#cfe7bd; --ultra-gold:#e7c36a; --ultra-gold-2:#b88624; --ultra-white:rgba(255,255,255,.90); --ultra-line:rgba(46,89,48,.12); --ultra-shadow:0 30px 90px rgba(17,55,28,.14); --ultra-ease:cubic-bezier(.16,1,.3,1); } /* Base */ body{ background: radial-gradient(circle at 10% 0%,rgba(105,160,85,.10),transparent 30rem), radial-gradient(circle at 90% 15%,rgba(231,195,106,.07),transparent 25rem), linear-gradient(180deg,#fcfcf8 0%,#f4f5ee 100%); } .section{ overflow:hidden; } .section:not(.section--dark):not(.section--forest){ background: radial-gradient(circle at 100% 0%,rgba(120,170,94,.06),transparent 25rem), transparent; } /* Add a subtle luxury grain without an image */ .hero, .section--dark, .cta-banner{ background-image: radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px), radial-gradient(rgba(0,0,0,.025) 1px,transparent 1px); background-size:19px 19px,31px 31px; background-position:0 0,7px 11px; } /* ---------- HERO ---------- */ .hero{ min-height:100svh!important; isolation:isolate; background-color:#06170b!important; } .hero__bg img{ opacity:.72!important; transform:scale(1.07)!important; filter:saturate(1.18) contrast(1.08); animation:ultraHero 18s ease-in-out infinite alternate; } @keyframes ultraHero{ 0%{transform:scale(1.07) translate3d(0,0,0)} 100%{transform:scale(1.15) translate3d(-1%, -1%,0)} } .hero__bg::after{ background: radial-gradient(circle at 78% 34%,rgba(115,184,90,.27),transparent 25rem), radial-gradient(circle at 55% 85%,rgba(231,195,106,.10),transparent 22rem), linear-gradient(105deg, rgba(3,17,8,.96) 0%, rgba(5,36,16,.82) 42%, rgba(5,27,13,.34) 100%)!important; } .hero__content{ padding-top:105px!important; } .hero__title em{ background:linear-gradient( 115deg, #f7df9a 0%, #d9aa45 28%, #fff1bc 54%, #d8ad50 76%, #f0d486 100% ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 10px 25px rgba(231,195,106,.13)); } .hero__sub{ color:rgba(237,248,228,.86)!important; max-width:610px!important; } .hero__actions .btn{ min-height:56px; padding:14px 24px!important; border-radius:16px!important; } .hero__actions .btn--primary{ background: linear-gradient(110deg,rgba(255,255,255,.20),transparent 24%), linear-gradient(135deg,#69a75c,#245d32)!important; border:1px solid rgba(255,255,255,.25)!important; box-shadow: 0 18px 50px rgba(24,86,41,.38), inset 0 1px 0 rgba(255,255,255,.32)!important; } .hero__actions .btn--primary:hover{ transform:translateY(-5px) scale(1.025)!important; } .hero__actions .btn--ghost-light{ background:rgba(255,255,255,.075)!important; border-color:rgba(255,255,255,.25)!important; backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%); } .hero__actions .btn--ghost-light:hover{ background:rgba(255,255,255,.15)!important; transform:translateY(-5px); } .hero__meta{ width:600px; margin-top:44px!important; padding:10px!important; gap:0!important; text-align:center; /*border-radius:24px!important;*/ /*border:1px solid rgba(255,255,255,.17);*/ /*background:linear-gradient(*/ /* 135deg,*/ /* rgba(255,255,255,.13),*/ /* rgba(255,255,255,.035)*/ /*)!important;*/ /*backdrop-filter:blur(24px) saturate(145%);*/ /*-webkit-backdrop-filter:blur(24px) saturate(145%);*/ /*box-shadow:*/ /* 0 30px 80px rgba(0,0,0,.22),*/ /* inset 0 1px 0 rgba(255,255,255,.14);*/ } .hero__meta-item{ padding:12px 22px!important; flex:1; } .hero__meta-item strong{ font-size:1.9rem!important; color:#fff!important; background:linear-gradient(135deg,#fff,#cfe9bd); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero__meta-item span{ color:rgba(207,232,194,.72)!important; } .hero__meta-divider{ background:rgba(255,255,255,.16)!important; } /* ---------- GLASS EYEBROWS ---------- */ .eyebrow{ background:rgba(255,255,255,.66)!important; border:1px solid rgba(69,119,62,.18)!important; box-shadow: 0 8px 24px rgba(40,81,44,.06), inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(12px); } .eyebrow--light{ background:rgba(255,255,255,.07)!important; border-color:rgba(255,255,255,.20)!important; } /* ---------- STATS ---------- */ .stats{ position:relative; z-index:10; margin-top:-55px; padding:1px!important; gap:1px!important; border-radius:27px!important; background:linear-gradient( 135deg, rgba(255,255,255,.95), rgba(111,158,91,.24) )!important; border:1px solid rgba(255,255,255,.85)!important; box-shadow: 0 35px 95px rgba(25,65,35,.17), 0 4px 14px rgba(25,65,35,.06)!important; backdrop-filter:blur(25px); } .stats__item{ position:relative; min-height:130px; padding:28px 18px!important; background:rgba(255,253,248,.84)!important; overflow:hidden; transition:.45s var(--ultra-ease)!important; } .stats__item::before{ content:""; position:absolute; width:180px; height:180px; right:-90px; top:-100px; border-radius:50%; background:radial-gradient(circle,rgba(101,164,91,.14),transparent 70%); } .stats__item:hover{ transform:translateY(-7px); background:rgba(255,255,255,.98)!important; z-index:3; } .stats__num{ font-size:clamp(2.25rem,4vw,3.45rem)!important; background:linear-gradient(135deg,#19472a,#72a85c); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* ---------- CHALLENGE ---------- */ .challenge__item{ position:relative; padding:20px!important; border-radius:20px!important; border:1px solid rgba(63,107,58,.12)!important; background: radial-gradient(circle at 100% 0%,rgba(231,195,106,.10),transparent 11rem), linear-gradient(145deg,rgba(255,255,255,.99),rgba(243,248,237,.82))!important; box-shadow: 0 14px 38px rgba(26,65,35,.06), inset 0 1px 0 rgba(255,255,255,.95)!important; } .challenge__item:hover{ transform:translateX(11px) translateY(-3px)!important; border-color:rgba(72,132,67,.25)!important; box-shadow:0 25px 55px rgba(26,65,35,.13)!important; } .challenge__item-num{ width:58px!important; height:50px!important; border-radius:15px!important; background:linear-gradient(145deg,#f0f8eb,#d9ecd0)!important; box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(44,93,47,.10); } /* ---------- SOIL VISUAL ---------- */ .soil-viz{ border-radius:30px!important; border:1px solid rgba(255,255,255,.55); box-shadow: 0 40px 100px rgba(21,55,29,.22), inset 0 1px 0 rgba(255,255,255,.3)!important; } .soil-viz::after{ content:""; position:absolute; inset:0; background: linear-gradient(125deg,rgba(255,255,255,.28),transparent 26%), radial-gradient(circle at 75% 20%,rgba(255,255,255,.13),transparent 16rem), linear-gradient(to bottom,transparent 45%,rgba(2,17,8,.25)); pointer-events:none; } .soil-layer{ padding:11px 14px!important; border-radius:14px!important; background:rgba(5,28,12,.50)!important; border:1px solid rgba(255,255,255,.18)!important; backdrop-filter:blur(16px) saturate(140%); box-shadow:0 10px 28px rgba(0,0,0,.15); } /* ---------- SOLUTIONS ---------- */ .solutions-grid{ gap:24px!important; } .solution-card{ min-height:340px; padding:31px 27px!important; border-radius:25px!important; background: radial-gradient(circle at 90% 0%,rgba(231,195,106,.13),transparent 12rem), linear-gradient(145deg,#fff,#eff6ea)!important; border:1px solid rgba(63,110,58,.13)!important; box-shadow: 0 20px 55px rgba(28,65,36,.07), inset 0 1px 0 rgba(255,255,255,.96)!important; transition: transform .5s var(--ultra-ease), box-shadow .5s var(--ultra-ease), border-color .5s var(--ultra-ease)!important; } .solution-card:hover{ transform:translateY(-15px) scale(1.018)!important; border-color:rgba(72,131,66,.25)!important; box-shadow: 0 35px 85px rgba(27,66,35,.17), inset 0 1px 0 #fff!important; } .solution-card__icon{ width:72px!important; height:72px!important; border-radius:20px!important; background:linear-gradient(145deg,#f4faef,#dbeed3)!important; box-shadow: inset 0 1px 0 #fff, 0 14px 30px rgba(45,94,46,.11); } .solution-card:hover .solution-card__icon{ background:linear-gradient(145deg,#70aa60,#245e33)!important; color:#fff!important; transform:rotate(-3deg) scale(1.04); } /* ---------- PRODUCT CARDS ---------- */ .product-rail{ gap:26px!important; padding:12px 7px 32px!important; } .product-card{ flex-basis:345px!important; border-radius:25px!important; border:1px solid rgba(63,107,58,.12)!important; background:rgba(255,255,255,.93)!important; box-shadow:0 18px 52px rgba(27,62,34,.08)!important; } .product-card:hover{ transform:translateY(-15px) scale(1.015)!important; box-shadow:0 35px 85px rgba(27,62,34,.18)!important; } .product-card__media{ aspect-ratio:1/1!important; background:linear-gradient(145deg,#edf5e8,#dbead5)!important; } .product-card__media::before{ content:""; position:absolute; z-index:2; inset:0; background: linear-gradient(135deg,rgba(255,255,255,.24),transparent 30%), radial-gradient(circle at 80% 15%,rgba(255,255,255,.13),transparent 9rem); pointer-events:none; } .product-card__media::after{ content:""; position:absolute; z-index:3; top:-40%; left:-120%; width:65%; height:180%; transform:rotate(25deg); background:linear-gradient( 90deg, transparent, rgba(255,255,255,.35), transparent ); transition:left 1s var(--ultra-ease); pointer-events:none; } .product-card:hover .product-card__media::after{ left:145%; } .product-card__cat{ z-index:4; top:16px!important; left:16px!important; padding:8px 14px!important; background:rgba(255,255,255,.78)!important; border:1px solid rgba(255,255,255,.90)!important; box-shadow:0 9px 25px rgba(0,0,0,.12); backdrop-filter:blur(16px); } /* ---------- SCIENCE LAB ---------- */ .section--dark{ background: radial-gradient(circle at 10% 15%,rgba(77,145,77,.20),transparent 30rem), radial-gradient(circle at 88% 75%,rgba(231,195,106,.09),transparent 26rem), linear-gradient(145deg,#04160a,#0b2915 48%,#04160a)!important; padding-top:60px; padding-bottom:60px; } .science-grid{ gap:24px!important; } .science-card{ min-height:300px; padding:31px 27px!important; border-radius:26px!important; background: linear-gradient(145deg,rgba(255,255,255,.105),rgba(255,255,255,.025))!important; border:1px solid rgba(255,255,255,.13)!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 28px 65px rgba(0,0,0,.19); backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); } .science-card:hover{ transform:translateY(-14px) scale(1.018)!important; background: linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.035))!important; border-color:rgba(231,195,106,.50)!important; box-shadow: 0 38px 90px rgba(0,0,0,.31), inset 0 1px 0 rgba(255,255,255,.15); } .science-card__molecule{ color:#edcb70!important; filter: drop-shadow(0 0 9px rgba(231,195,106,.34)) drop-shadow(0 0 25px rgba(96,161,89,.15)); } /* ---------- JOURNEY ---------- */ .journey::before{ border-top:2px dashed rgba(70,123,65,.28)!important; } .journey__dot{ width:88px!important; height:88px!important; background:linear-gradient(145deg,#fff,#eaf3e5)!important; border:2px solid rgba(66,119,62,.19)!important; box-shadow: 0 18px 40px rgba(33,70,37,.11), inset 0 1px 0 #fff!important; } .journey__dot::after{ width:25px!important; height:25px!important; background:linear-gradient(135deg,#edc45f,#b97c1b)!important; box-shadow:0 7px 18px rgba(168,90,33,.26); } .journey__step:hover .journey__dot{ transform:scale(1.15)!important; background:linear-gradient(145deg,#68a75b,#245d33)!important; color:#fff; border-color:#68a75b!important; box-shadow:0 25px 50px rgba(40,92,53,.28)!important; } /* ---------- FARMER STORIES ---------- */ .farmer-stories{ gap:24px!important; } .farmer-card{ border-radius:25px!important; box-shadow:0 30px 75px rgba(21,54,29,.19)!important; border:1px solid rgba(255,255,255,.24); } .farmer-card img{ transition:transform .9s var(--ultra-ease),filter .9s var(--ultra-ease)!important; } .farmer-card:hover img{ transform:scale(1.09)!important; filter:saturate(1.08); } .farmer-card__overlay{ padding:28px!important; background: linear-gradient(to top, rgba(2,17,8,.97), rgba(4,24,11,.70) 45%, rgba(4,24,11,.05) 80%, transparent)!important; } .farmer-card__tag{ top:18px!important; right:18px!important; padding:8px 14px!important; background:rgba(255,255,255,.12)!important; border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(16px); } /* ---------- ABOUT ---------- */ .about-split{ gap:75px!important; } .about-split__media{ border-radius:30px!important; box-shadow:0 40px 100px rgba(25,57,31,.19)!important; } .about-split__badge{ border-radius:18px!important; background:rgba(255,253,248,.80)!important; border:1px solid rgba(255,255,255,.95); box-shadow:0 22px 50px rgba(25,54,30,.18)!important; backdrop-filter:blur(20px); } /* ---------- CTA ---------- */ .cta-banner{ min-height:570px!important; border-radius:32px!important; border:1px solid rgba(255,255,255,.32); box-shadow: 0 40px 110px rgba(22,53,29,.25), inset 0 1px 0 rgba(255,255,255,.20)!important; } .cta-banner__bg::after{ background: radial-gradient(circle at 50% 25%,rgba(108,172,91,.25),transparent 29rem), linear-gradient(135deg,rgba(3,22,10,.92),rgba(60,34,7,.68))!important; } .cta-banner__content h2{ font-size:clamp(2.7rem,5.5vw,4.8rem)!important; letter-spacing:-.055em!important; } /* ---------- FOOTER ---------- */ .footer{ background: radial-gradient(circle at 12% 0%,rgba(76,141,70,.18),transparent 26rem), radial-gradient(circle at 90% 100%,rgba(231,195,106,.06),transparent 24rem), #04160a!important; } .footer__social a{ background:rgba(255,255,255,.045)!important; border-color:rgba(255,255,255,.12)!important; backdrop-filter:blur(14px); } .footer__social a:hover{ background:linear-gradient(135deg,#66a458,#245d33)!important; transform:translateY(-5px) scale(1.06)!important; box-shadow:0 12px 28px rgba(41,95,48,.25); } .footer__newsletter input{ background:rgba(255,255,255,.055)!important; border-color:rgba(255,255,255,.13)!important; backdrop-filter:blur(14px); } .footer__newsletter button{ background:linear-gradient(135deg,#66a458,#245d33)!important; } /* ---------- Universal card shine ---------- */ .solution-card, .science-card, .product-card, .farmer-card, .stats, .cta-banner{ isolation:isolate; } .solution-card::after, .science-card::after{ content:""; position:absolute; z-index:20; top:-160%; left:-120%; width:60%; height:420%; transform:rotate(25deg); background:linear-gradient( 90deg, transparent, rgba(255,255,255,.12), transparent ); transition:left 1s var(--ultra-ease); pointer-events:none; } .solution-card:hover::after, .science-card:hover::after{ left:150%; } /* ---------- Mobile ---------- */ @media(max-width:1100px){ .stats{ grid-template-columns:repeat(3,1fr)!important; } } @media(max-width:860px){ .hero__title{ font-size:clamp(3rem,9vw,5.5rem)!important; } .about-split{ gap:45px!important; } } @media(max-width:640px){ .hero{ min-height:900px!important; } .hero__content{ padding-top:95px!important; } .hero__title{ font-size:clamp(2.8rem,14vw,4.5rem)!important; max-width:100%!important; margin-top: 30px; } .hero__actions{ flex-direction:column; align-items:stretch; } .hero__actions .btn{ width:100%; } .hero__meta{ display:grid!important; grid-template-columns:repeat(2,1fr)!important; padding:8px!important; } .hero__meta-item{ padding:12px 7px!important; } .hero__meta-item strong{ font-size:1.35rem!important; } .hero__meta-divider{ display:none; } .stats{ margin-top:-32px!important; grid-template-columns:repeat(2,1fr)!important; border-radius:21px!important; } .stats__item{ min-height:115px; padding:23px 10px!important; } .stats__item:nth-child(1){border-radius:20px 0 0 0!important} .stats__item:nth-child(2){border-radius:0 20px 0 0!important} .stats__item:nth-child(4){border-radius:0 0 0 20px!important} .stats__item:nth-child(5){border-radius:0 0 20px 0!important} .solution-card{ min-height:300px; } .product-card{ flex-basis:290px!important; } .science-card{ min-height:255px; } .journey__dot{ width:66px!important; height:66px!important; } .cta-banner{ min-height:480px!important; border-radius:24px!important; } } @media(prefers-reduced-motion:reduce){ .hero__bg img{ animation:none!important; } .solution-card::after, .science-card::after, .product-card__media::after{ display:none!important; } } /* ============================================================ BASE.CSS — PERFORMANCE PATCH Layout/design intentionally unchanged. Focus: scroll smoothness, hover smoothness, lower repaint cost. ============================================================ */ /* 1. Remove expensive blur compositing from scrolling surfaces */ .nav--scrolled, .nav--dark.nav--scrolled, .mobile-menu__overlay, .hero__actions .btn--ghost-light, .eyebrow, .stats, .soil-layer, .product-card__cat, .science-card, .farmer-card__tag, .about-split__badge, .footer__social a, .footer__newsletter input { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Preserve the glass appearance without backdrop blur */ .nav--scrolled { background: rgba(255,253,248,.97) !important; } .nav--dark.nav--scrolled { background: rgba(20,32,15,.97) !important; } .mobile-menu__overlay { background: rgba(20,32,15,.68) !important; } .hero__actions .btn--ghost-light { background: rgba(255,255,255,.11) !important; } .eyebrow { background: rgba(255,253,248,.94) !important; } .stats { background: rgba(255,253,248,.96) !important; } .soil-layer { background: rgba(5,28,12,.88) !important; } .product-card__cat { background: rgba(255,255,255,.94) !important; } .science-card { background: linear-gradient( 145deg, rgba(255,255,255,.105), rgba(255,255,255,.025) ) !important; } .farmer-card__tag { background: rgba(20,45,25,.88) !important; } .about-split__badge { background: rgba(255,253,248,.96) !important; } .footer__social a { background: rgba(255,255,255,.07) !important; } .footer__newsletter input { background: rgba(255,255,255,.075) !important; } /* 2. Static decorative blur is expensive while scrolling. Keep the organic shape, remove the blur filter. */ .organic-blob { filter: none !important; opacity: .16 !important; } /* 3. Hero image: keep the exact look, but avoid continuous filter work */ .hero__bg img { filter: none !important; } /* Keep the slow hero movement, but use a compositor-friendly transform */ .hero__bg img { will-change: transform; } /* 4. Replace animated shine sweeps with a static highlight. The sweep causes repeated large-area repainting. */ .product-card__media::after, .solution-card::after, .science-card::after { display: none !important; } /* 5. Make hover animations transform-only. box-shadow/background/border animation causes expensive repainting. */ .card, .solution-card, .product-card, .science-card, .farmer-card, .challenge__item { transition: transform .28s var(--ultra-ease) !important; } /* Preserve the existing hover direction/feel, slightly reduce the amount of movement to prevent visual jank. */ .card:hover { transform: translate3d(0,-6px,0); } .solution-card:hover { transform: translate3d(0,-10px,0) scale(1.012) !important; } .product-card:hover { transform: translate3d(0,-10px,0) scale(1.01) !important; } .science-card:hover { transform: translate3d(0,-10px,0) scale(1.012) !important; } .farmer-card:hover { transform: translate3d(0,-10px,0) scale(1.008) !important; } .challenge__item:hover { transform: translate3d(7px,-2px,0) !important; } /* 6. Don't animate image filters. Transform is GPU-friendly; filter + transform together is costly. */ .farmer-card img, .product-card__media img { transition: transform .55s var(--ultra-ease) !important; will-change: transform; } .farmer-card:hover img { transform: scale(1.06) !important; filter: none !important; } /* 7. Buttons: animate only transform, not shadow/background */ .btn { transition: transform .25s var(--ease) !important; } .btn--primary:hover, .btn--light:hover, .btn--gold:hover, .hero__actions .btn--primary:hover, .hero__actions .btn--ghost-light:hover { transform: translate3d(0,-3px,0) !important; } .btn .arrow { transition: transform .22s var(--ease) !important; } /* 8. Navbar: don't animate expensive background + shadow every frame */ .nav { transition: height .25s var(--ease), color .2s ease !important; } /* 9. Footer/social interactions */ .footer__social a { transition: transform .22s var(--ease) !important; } .footer__social a:hover { transform: translate3d(0,-4px,0) scale(1.04) !important; } /* 10. Solution icon: transform only */ .solution-card__icon { transition: transform .22s var(--ease), background-color .22s ease, color .22s ease !important; } .solution-card:hover .solution-card__icon { transform: rotate(-2deg) scale(1.03); } /* 11. Disable unnecessary continuous animation on small screens */ @media (max-width: 860px) { .hero__bg img { animation: none !important; transform: scale(1.07) !important; } .seal__ring { animation: none !important; } .scroll-indicator__line::after { animation: none !important; } } /* 12. Mobile browsers: remove hover transforms completely */ @media (hover: none), (max-width: 640px) { .card:hover, .solution-card:hover, .product-card:hover, .science-card:hover, .farmer-card:hover, .challenge__item:hover { transform: none !important; } .farmer-card:hover img, .product-card:hover .product-card__media img { transform: none !important; } } /* 13. Respect reduced-motion users */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation: none !important; transition: none !important; } } /* 14. IMPORTANT: Don't globally add will-change to every card. It creates too many compositor layers and can make scrolling WORSE. Only actively animated images get will-change above. */