/* BOT Farm component system — BUILD-SPEC.md §3. Utility classes + components used across Elementor HTML widgets and theme templates alike, so both draw from one source of truth instead of duplicating inline styles per page. */ /* ---------- Reset / base ---------- */ .bf-scope, .bf-scope * { box-sizing: border-box; } .bf-scope { font-family: var(--font); color: var(--ink); background: var(--ground); overflow-wrap: break-word; } .bf-scope img { display: block; max-width: 100%; } .bf-scope a { color: var(--brand-green); text-decoration: none; } .bf-scope a:hover { color: var(--brand-green-pressed); } .bf-scope, .bf-scope *:not(input):not(textarea):not(select) { border-radius: 0 !important; box-shadow: none; } /* ---------- Layout ---------- */ .bf-container { max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 32px; } .bf-panel { background: var(--ground); border: 2px solid var(--ink); } .bf-grid { display: grid; } .bf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bf-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* "1fr" alone means "minmax(auto, 1fr)" — a track can never shrink below its content's natural (unwrapped) width. One long word/phrase in any single cell is enough to force the *entire* grid wider than the viewport, which is what was pushing pages into horizontal scroll on mobile and clipping text at both edges. Every grid on the site needs the minmax(0, …) form, including the inline "7fr 5fr"-style ones that can't be edited to add it directly — hence the universal child rule below, which works regardless of the parent's own column sizing. */ .bf-grid > * { min-width: 0; } html, body { overflow-x: hidden; } .bf-cell { border-right: 1px solid var(--rule-cell); } .bf-cell:last-child { border-right: none; } .bf-row-strong-top { border-top: 2px solid var(--ink); } .bf-row-strong-bottom { border-bottom: 2px solid var(--ink); } .bf-row-cell-top { border-top: 1px solid var(--rule-cell); } /* ---------- Typography ---------- */ .bf-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 800; margin: 0; } .bf-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -0.025em; font-weight: 800; margin: 0; } .bf-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 800; margin: 0; } .bf-h3 { font-size: var(--fs-h3); font-weight: 800; margin: 0; } .bf-h4 { font-size: var(--fs-h4); font-weight: 800; margin: 0; } .bf-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; margin: 0; } .bf-small { font-size: var(--fs-small); line-height: var(--lh-small); margin: 0; } .bf-micro { font-size: var(--fs-micro); margin: 0; } .bf-label { font-size: var(--fs-label); font-weight: 800; letter-spacing: var(--ls-label); text-transform: uppercase; margin: 0; } .bf-muted { color: var(--muted); } .bf-accent { color: var(--brand-green); } /* Real value not yet supplied by BOT Farm (BUILD-SPEC.md §7 "still needed") — deliberately loud so a placeholder can never accidentally read as a real published figure. */ .bf-tba { color: #c0392b; font-weight: 800; } .bf-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-green); margin-bottom: 18px; } /* ---------- Buttons ---------- */ .bf-btn { display: inline-flex; align-items: center; justify-content: flex-start; font-family: var(--font); font-size: 14px; font-weight: 800; padding: 14px 22px; border: 2px solid transparent; cursor: pointer; text-align: left; } /* !important: buttons appear both inside .bf-scope (page content) and outside it (header.php's "Request a quote" sits in before .bf-scope opens), and both Astra's own link-color CSS and our own ".bf-scope a" rule outrank a single ".bf-btn--*" class on specificity — without this, link-based buttons render as button-coloured text on a button-coloured background (invisible). */ .bf-btn--primary { background: var(--brand-green) !important; color: #fff !important; border-color: var(--brand-green) !important; } .bf-btn--primary:hover { background: var(--brand-green-pressed) !important; border-color: var(--brand-green-pressed) !important; color: #fff !important; } .bf-btn--secondary { background: transparent !important; color: var(--ink) !important; border-color: var(--ink) !important; } .bf-btn--secondary:hover { background: var(--brand-green) !important; border-color: var(--brand-green) !important; color: #fff !important; } .bf-btn--disabled { background: transparent !important; color: var(--muted) !important; border-color: var(--rule-cell) !important; cursor: not-allowed; } .bf-btn--sm { font-size: 12px; padding: 9px 14px; } /* ---------- Utility bar / header / footer (structure lives in header.php/footer.php) ---------- */ .bf-utility-bar { background: var(--ink); color: var(--ground); display: flex; justify-content: space-between; align-items: center; padding: 9px 32px; font-size: 12px; } .bf-utility-bar a { color: var(--brand-green-300); } .bf-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 0 32px; height: 88px; border-bottom: 2px solid var(--ink); background: var(--ground); position: sticky; top: 0; z-index: 50; } .bf-header__logo img { height: 54px; width: auto; } .bf-header__nav { display: flex; gap: 28px; font-size: 14px; font-weight: 600; margin-right: auto; margin-left: 48px; } .bf-header__nav a { color: var(--ink); } .bf-header__nav a.is-active { border-bottom: 2px solid var(--brand-green); padding-bottom: 3px; } .bf-header__actions { display: flex; gap: 12px; align-items: center; } .bf-header__cart { font-size: 13px; font-weight: 600; } .bf-header__burger { display: none; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--brand-green) !important; } .bf-footer { background: var(--ink); color: var(--ground); } .bf-footer__quote { padding: 52px 32px; display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: start; } .bf-footer__legal { border-top: 1px solid #444141; padding: 28px 32px; display: flex; justify-content: space-between; font-size: 12px; color: #7d7979; flex-wrap: wrap; gap: 8px; } .bf-footer__legal a { color: #7d7979; } .bf-footer__links { display: flex; gap: 24px; flex-wrap: wrap; } .bf-mobile-bar { display: none; } @media (max-width: 900px) { .bf-header__nav { display: none; } .bf-header__burger { display: block; } .bf-header__cart { display: none; } .bf-utility-bar { display: none; } .bf-mobile-bar { display: flex; position: sticky; bottom: 0; border-top: 2px solid var(--ink); z-index: 50; } .bf-mobile-bar__primary { flex: 1; background: var(--brand-green) !important; color: #fff !important; font-size: 13px; font-weight: 800; padding: 16px; text-align: center; } .bf-mobile-bar__whatsapp { width: 96px; background: var(--ink) !important; color: #fff !important; font-size: 13px; font-weight: 800; padding: 16px; text-align: center; } } .bf-nav-drawer { display: none; position: fixed; inset: 0; z-index: 100; background: var(--ground); } .bf-nav-drawer.is-open { display: block; } .bf-nav-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 2px solid var(--ink); } .bf-nav-drawer__list { display: flex; flex-direction: column; } .bf-nav-drawer__list a { padding: 18px 20px; border-bottom: 1px solid var(--rule-cell); font-size: 16px; font-weight: 600; color: var(--ink); } /* ---------- Poster band ---------- */ .bf-poster { background: var(--brand-green); color: #fff; } .bf-poster p { color: var(--brand-green-200); } .bf-poster .bf-eyebrow { color: var(--brand-green-300); } /* ---------- Stat row ---------- */ .bf-stat { padding: 16px 16px 22px 0; } .bf-stat__value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; } .bf-stat__label { font-size: 12px; color: var(--muted); line-height: 1.35; margin-top: 4px; } /* ---------- Product card ---------- */ .bf-product-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--surface); } /* Symmetric on purpose: an earlier version left this at 0 on the left and relied on per-card inline "padding-left:20px" overrides to compensate — but an inline longhand only overrides the one side it names, so the first card (no override) ended up with less total horizontal padding than the rest and its image rendered visibly wider/taller than its neighbours. Equal padding on every card is what actually keeps images the same size across a row. */ .bf-product-card { padding: 20px; padding-bottom: 24px; } .bf-product-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; } .bf-product-card__badge { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--brand-green); } .bf-product-card__badge--wait { color: var(--muted); } .bf-product-card__meta { font-size: 13px; color: var(--muted); margin: 4px 0 10px; line-height: 1.45; } .bf-product-card__price-row { border-top: 1px solid var(--rule-soft); padding-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; } /* ---------- Price tier block ---------- */ .bf-tiers { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 16px 0; } .bf-tiers__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .bf-tiers__cell { padding: 0 14px; border-right: 1px solid var(--rule-soft); } .bf-tiers__cell:first-child { padding-left: 0; } .bf-tiers__cell:last-child { border-right: none; } .bf-tiers__cell--best .bf-tiers__range { color: var(--brand-green); font-weight: 800; } .bf-tiers__range { font-size: 12px; color: var(--muted); } .bf-tiers__price { font-size: 24px; font-weight: 800; } /* ---------- Spec list ---------- */ .bf-spec-list { border-top: 1px solid var(--rule-cell); } .bf-spec-list__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; } .bf-spec-list__row:last-child { border-bottom: none; } .bf-spec-list__key { color: var(--muted); } .bf-spec-list__val { font-weight: 600; text-align: right; } /* ---------- Course card ---------- */ .bf-course-card { padding: 32px; } .bf-course-card--featured { background: var(--surface); } .bf-course-card__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .bf-course-card__tag { font-size: 11px; font-weight: 800; color: var(--brand-green); } .bf-course-card__meta { border-top: 1px solid var(--rule-soft); padding-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.9; } .bf-course-card__foot { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid var(--ink); margin-top: 14px; padding-top: 14px; } .bf-course-card__fee { font-size: 22px; font-weight: 800; } /* ---------- Enquiry / generic form ---------- */ .bf-form-field { border: 1px solid var(--rule-cell); background: #fff; padding: 12px 14px; font-size: 14px; font-family: var(--font); width: 100%; color: var(--ink); } .bf-form-field::placeholder { color: #9b9797; } .bf-form-field:focus, .bf-scope a:focus, .bf-btn:focus { outline: 2px solid var(--brand-green); outline-offset: 2px; } .bf-form-field--dark { background: #2d2b2b; border: 1px solid #605d5d; color: var(--ground); } .bf-segmented { display: flex; border: 2px solid var(--ink); font-size: 12px; font-weight: 800; flex-wrap: wrap; } .bf-segmented__opt { flex: 1; padding: 11px; text-align: center; border-left: 2px solid var(--ink); cursor: pointer; background: transparent; color: var(--ink); min-width: 110px; } .bf-segmented__opt:first-child { border-left: none; } .bf-segmented__opt.is-active { background: var(--brand-green); color: #fff; } /* ---------- Imagery ---------- */ .bf-grayscale { filter: grayscale(1) contrast(1.08); } /* ---------- Utility ---------- */ .bf-flush { text-align: left; } .bf-full-bleed { width: 100%; } @media (max-width: 900px) { .bf-container { padding: 0 16px; } .bf-grid-4, .bf-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bf-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bf-footer__quote { grid-template-columns: 1fr; } /* Every grid cell across the site was authored for its DESKTOP row position — e.g. "padding:26px 24px 30px 0" so the first cell in a 4-column row sits flush against the container's own edge, with the gap coming from the cell to its right instead of its own left padding. Once a row collapses to 2 or 1 columns on mobile, cells that were never "first" end up in that flush-left position anyway, so their text sits jammed against the screen edge with no margin at all — reported repeatedly (Propagation's stat row, Training, Laboratory's compliance dates) because it's really one systemic issue, not several unrelated ones. Rather than chase down and special-case every one of these inline paddings individually (already proved error-prone), force a sane minimum horizontal margin on every grid item, full stop — this covers every current instance and any future one without needing to be re-taught the same fix. */ .bf-grid > * { padding-left: 16px !important; padding-right: 16px !important; } /* .bf-cell's divider (border-right, :last-child clears it) is a table-style vertical rule that only makes sense against the DESKTOP column count it was authored for. Once a row reflows to fewer columns on mobile, that single right-hand line either falls in the middle of a now-wrapped row (dividing nothing) or is simply absent where a row break now needs a rule instead — reported as "table edges not rendering" on the Home "What we supply" grid and the Plants catalogue. A vertical-only divider can't survive an unknown number of reflow widths, so replace it with a full border on every cell — works regardless of how many columns a row ends up with. */ .bf-cell { border: 1px solid var(--rule-cell) !important; } /* Same reflow problem, different pattern: four places (Contact, Training, single-product, the Plants filter rail) split a section into two columns with the left/first column carrying "border-right:2px solid var(--ink)" as the divider. Once the [style*="...260px 1fr"] etc. fix above stacks these to one column on mobile, that right-hand divider is left stranded on the edge of a now full-width block instead of separating two side-by- side ones — a vertical line where a horizontal one belongs. */ .bf-scope [style*="border-right:2px solid var(--ink)"] { border-right: none !important; border-bottom: 2px solid var(--ink) !important; padding-bottom: 24px !important; margin-bottom: 24px; } /* Headings across every page set their own inline pixel font-size (e.g. "56px" on Training's hero, "60px" on Laboratory's statement) so they could hit each design mockup's exact number — but that means none of them ever shrink for mobile on their own; tokens.css's responsive --fs-* variables only help the few headings that *don't* have an inline override. Forcing the tag itself is the one change that fixes every page at once instead of hunting down each inline value. */ .bf-scope h1, .bf-scope .bf-h1, .bf-scope .bf-display { font-size: 32px !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; } .bf-scope h2, .bf-scope .bf-h2 { font-size: 24px !important; line-height: 1.18 !important; } .bf-scope h3, .bf-scope .bf-h3 { font-size: 20px !important; } .bf-scope h4, .bf-scope .bf-h4 { font-size: 17px !important; } /* Same story for two-column layouts: every one of these was authored as a literal "grid-template-columns:7fr 5fr" (etc.) inline style to hit the desktop mockup's exact proportions, which an external media query can't touch without !important and an attribute match on that exact string — there's no shared class to hook. */ .bf-scope [style*="grid-template-columns:7fr 5fr"], .bf-scope [style*="grid-template-columns:5fr 7fr"], .bf-scope [style*="grid-template-columns:6fr 6fr"], .bf-scope [style*="grid-template-columns:1fr 1fr"], .bf-scope [style*="grid-template-columns:260px 1fr"] { grid-template-columns: 1fr !important; } /* Tabular rows (Training schedule, Laboratory team table): full 1-column stacking loses which value is date/places/fee, so pair them 2-up instead — grid auto-flow wraps item 1+2 onto row one, 3+4 onto row two, which happens to pair Date with Programme and Places with Fee sensibly. */ .bf-scope [style*="grid-template-columns:1.4fr 2fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 4px; } .bf-scope [style*="grid-template-columns:1.3fr 1.6fr 1.3fr"] { grid-template-columns: 1fr !important; row-gap: 4px; } }