/* * Fertigation Systems design tokens — APPROVED 2026-10-01/02 (01-design/brand.md, 01-design/direction.md). * The colours and the two font families are READ FROM the Elementor Site Kit (Site Settings > Global Colours / * Global Fonts): see the `body` block after :root. The :root values below are the same approved values and are the * fallback when the Kit has no value. Keep the --ff-* names: widgets and sections.css use them. */ /* ---- Fonts: self-hosted woff2 (no Google CDN). Poppins 600 headings, Figtree variable body. ---- */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ---- Colour (brand.md) ---------------------------------------------- */ --ff-color-deep: #0E3A38; /* Deep Teal: header, footer, headings, dark bands, text on lime */ --ff-color-deep-2: #0A2B29; /* darker Deep Teal for hover/pressed on dark */ --ff-color-lime: #A7D24A; /* primary button fill, highlights on dark — text on it is always Deep Teal */ --ff-color-lime-2: #96C13A; /* lime hover */ --ff-color-grass: #2F6B1A; /* green text, links, icons on light (6.5:1) */ --ff-color-forest: #3F8F5B; /* large icons/fills only — never text */ --ff-color-water: #2E6BB7; /* water/data details, secondary links (5.4:1) */ --ff-color-ink: #4D5558; /* body text (7.6:1) */ --ff-color-mist: #F2F6EF; /* alternate light sections */ --ff-color-white: #FFFFFF; --ff-color-pale: #D6EADB; /* soft text on Deep Teal (9.9:1) */ --ff-color-line: #DCE5D8; /* hairlines on light */ --ff-color-line-dark: rgba(255, 255, 255, 0.16); /* hairlines on Deep Teal */ --ff-color-text: var(--ff-color-ink); --ff-color-heading: var(--ff-color-deep); /* Aliases kept for the generic tone system in FF_Widget_Base / sections.css */ --ff-color-light: var(--ff-color-white); --ff-color-muted: var(--ff-color-mist); --ff-color-brand: var(--ff-color-deep); --ff-color-brand-dark: var(--ff-color-deep-2); --ff-color-accent: var(--ff-color-lime); --ff-color-dark: var(--ff-color-deep); --ff-color-text-soft: var(--ff-color-ink); /* ---- Type (direction.md: R1 scale, set in Poppins 600 / Figtree) ---------------- */ --ff-font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-weight-body: 400; --ff-weight-strong: 600; --ff-weight-display: 600; --ff-fs-display: clamp(40px, 5vw, 70px); /* hero H1 (R1: 70/77) */ --ff-fs-h2: clamp(30px, 3vw, 44px); /* section headlines (R1: 40/48) */ --ff-fs-h3: clamp(21px, 1.8vw, 26px); /* card / step titles, quote text: one H3 size */ --ff-fs-stat: clamp(44px, 5vw, 70px); /* big numbers: never bigger than the H1 (display) */ --ff-fs-lead: clamp(18px, 1.35vw, 20px); --ff-fs-body: 17px; --ff-fs-small: 14px; --ff-lh-display: 1.1; --ff-lh-heading: 1.2; --ff-lh-body: 1.6; --ff-tracking-display: -0.02em; --ff-tracking-eyebrow: 0.06em; /* ---- Space: 8px grid; R1/R8 rhythm = 120px section padding, 60–200px gaps ---- */ --ff-space-1: 4px; --ff-space-2: 8px; --ff-space-3: 12px; --ff-space-4: 16px; --ff-space-5: 24px; --ff-space-6: 32px; --ff-space-7: 48px; --ff-space-8: 64px; --ff-space-9: 96px; --ff-space-10: 120px; --ff-space-section: clamp(64px, 8vw, 120px); --ff-gap-wide: clamp(40px, 9vw, 180px); /* R1 split-section gap */ /* ---- Layout ---------------------------------------------------------- */ --ff-container: 1320px; --ff-gutter: clamp(20px, 4vw, 60px); --ff-measure: 62ch; --ff-header-h: 88px; /* ---- Shape ----------------------------------------------------------- */ --ff-radius-sm: 8px; --ff-radius: 16px; --ff-radius-lg: 24px; --ff-radius-pill: 50px; /* R1/R8 buttons */ --ff-shadow: 0 2px 14px rgba(14, 58, 56, 0.08); --ff-shadow-raised: 0 12px 36px rgba(14, 58, 56, 0.14); --ff-focus: 0 0 0 3px var(--ff-color-water); /* ---- Motion (direction.md, from the references' own IX2 settings) ------------- */ --ff-ease: cubic-bezier(0.25, 1, 0.5, 1); /* outQuart — R1 reveal */ --ff-ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ff-dur-fast: 200ms; /* button label roll (R1) */ --ff-dur: 300ms; /* arrow swap out / FAQ (R8) */ --ff-dur-mid: 400ms; /* arrow swap in (R8) */ --ff-dur-reveal: 1000ms; /* scroll reveal (R1) */ --ff-reveal-y: 100px; /* R1 rise distance on desktop */ --ff-stagger: 100ms; } /* ---- Elementor Site Kit link (2026-10-02) -------------------------------------------------------------------- * Elementor defines --e-global-* on the Kit's body class (`.elementor-kit-N` is on ), not on :root, and a custom * property is resolved on the element that declares it, so the Kit-driven values have to be (re)declared on `body`, * with the approved value as the fallback. Everything inside (header, footer, every section widget) then follows * a change to Global Colours / Global Fonts, and the native form widget, which already used the globals, stays in step. * Kit ids: primary = Deep Teal, secondary = Lime, text = Ink, accent = Grass, ffwater / ffmist / ffforest / ffpale / * ffwhite = the other brand colours; typography primary = headings (Poppins), text = body (Figtree). * The aliases are repeated here because an alias declared on :root would be frozen to the :root colour. Deep Teal 2, * Lime 2 and the two hairline colours are not Kit colours and stay as set above. * Keep the fallbacks identical to the :root values (docs/decisions.md 2026-10-02). */ body { --ff-color-deep: var(--e-global-color-primary, #0E3A38); --ff-color-lime: var(--e-global-color-secondary, #A7D24A); --ff-color-ink: var(--e-global-color-text, #4D5558); --ff-color-grass: var(--e-global-color-accent, #2F6B1A); --ff-color-water: var(--e-global-color-ffwater, #2E6BB7); --ff-color-mist: var(--e-global-color-ffmist, #F2F6EF); --ff-color-forest: var(--e-global-color-ffforest, #3F8F5B); --ff-color-pale: var(--e-global-color-ffpale, #D6EADB); --ff-color-white: var(--e-global-color-ffwhite, #FFFFFF); --ff-color-text: var(--ff-color-ink); --ff-color-heading: var(--ff-color-deep); --ff-color-light: var(--ff-color-white); --ff-color-muted: var(--ff-color-mist); --ff-color-brand: var(--ff-color-deep); --ff-color-accent: var(--ff-color-lime); --ff-color-dark: var(--ff-color-deep); --ff-color-text-soft: var(--ff-color-ink); --ff-focus: 0 0 0 3px var(--ff-color-water); --ff-font-display: var(--e-global-typography-primary-font-family, "Poppins"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ff-font-body: var(--e-global-typography-text-font-family, "Figtree"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } @media (max-width: 767px) { :root { --ff-reveal-y: 40px; --ff-header-h: 72px; } } @media (prefers-reduced-motion: reduce) { :root { --ff-dur-fast: 0ms; --ff-dur: 0ms; --ff-dur-mid: 0ms; --ff-dur-reveal: 0ms; --ff-reveal-y: 0px; } }