/* ========================================================================== FFS Foods — brand layer -------------------------------------------------------------------------- Loaded AFTER agriox.css. Everything brand-specific lives here so the template stylesheet stays untouched and upgradable. agriox.css has been pre-processed so all 286 previously-hardcoded brand hexes now resolve through the four variables below — redefining them here re-skins the entire site. Two sources, and they cover different ground: · Colour comes from the Brand Colour Integration brief (blue / gold / orange / gray). It SUPERSEDES the palette in FFS_Brand.pdf. · Type still comes from FFS_Brand.pdf — Sora display, Inter body. The brief does not touch typography and nothing here has changed it. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Palette Source of truth: the Brand Colour Integration brief. This SUPERSEDES the five-colour scheme in FFS_Brand.pdf — the navy/mid-blue/pale-tint system is gone, and so is the red accent (#C62828) that predated it. Do not reintroduce either. Primary Blue #2E3192 headers, footers, key typography Secondary Gold #F2A900 secondary actions, iconography, decorative accents Tertiary Orange #E86100 Shopee header badge only (see below) Neutral Gray #CBCFD0 subtle borders, background variations White #FFFFFF dominant background Mr Magic Green #8C9600 was added 2026-09-07, on top of the brief above rather than as part of it: the client asked to move the high-priority CTA — "Enquire Now", "Explore products", every Shopee button in the body of a page — from Tertiary Orange to "the same green as Mr Magic" (Mr Magic being the client's own retail counter brand). Sampled from a lit photo of the actual Mr Magic signage (assets/images/hero/mr-magic-cafe.jpg): the fascia reads anywhere from a bright, near-yellow highlight (~#DEE00A) under direct light to a deeper olive (~#8C9600–#9C9600) in its own ambient shade, confirmed NOT a colour-cast artefact — neutral whites elsewhere in the same photo read as neutral grey, so the camera's white balance is accurate and the material genuinely shifts that much under mixed spot lighting. #8C9600 was chosen from within that range for a reason the brief's own gold already illustrates: a swatch has to survive sitting on white AND on the blue hero as a 3:1 non-text graphic (WCAG 1.4.11) to work as a button fill at all, and the brighter, more "chartreuse" end of the sampled range (anything past roughly #B0BE00) is too close in luminance to white to clear that floor — it would not read as a button, only as a paler patch of the page. SUPERSEDED 2026-09-08: the client replaced #8C9600 outright with #73C92D — their own colour, not a further sample off the signage photo — while keeping the label white. #73C92D does NOT clear the 3:1 boundary/large- text floor #8C9600 was picked to satisfy (2.07:1, see the contrast table below); it was supplied as a fixed value with an explicit "white text" instruction, not chosen from a range with that floor in mind, and it is applied as given. The sampling paragraph above is kept for the record of how the CTA colour got to #8C9600 — #73C92D is not derived from it. Tertiary Orange is not retired: it still lives as-is on the header utility-bar Shopee badge (--ffs-shopee, section 8), a 14px pill that predates and is unrelated to the CTA-button decision above. Two things shape the mapping below: Gold on white is 2.01:1. That is under the 3:1 that WCAG 1.4.11 asks of even a meaningful *graphic*, so gold is not merely bad for text on white — it cannot carry an icon there either. Gold is at its best on the blue (5.30:1), which is where the iconography and decorative accents live: the top bar, the hero, the blue panels, the mobile drawer, the footer. Where an icon must sit on white, use a blue chip with a gold glyph. Green with a WHITE label tops out under 4:1 across the whole sampled #8C9600-family range — #8C9600 itself managed 3.24:1 at rest, clearing the 3:1 large-text floor Tertiary Orange's 3.42:1 white label also depended on, just with less margin. Neither colour ever cleared 4.5:1 normal-text with a white label. For a few hours on 2026-09-07 this shipped with a near-black label instead (--ffs-on-brand, 5.74:1/8.01:1), which is the more comfortable fix and the one this stylesheet uses everywhere else a light fill needs a label — gold, WhatsApp, the Shopee badge. The client asked for white text back the same day, and then on 2026-09-08 replaced the fill itself with #73C92D — a colour that does not clear even the 3:1 large-text floor with white (2.07:1), which #8C9600 was specifically chosen to satisfy. That is a genuine AA FAIL, applied as instructed rather than adjusted to pass; see the --ffs-cta token comment below for the full note on it. Hover still DEEPENS (white gets more legible as a fill darkens, the opposite of a near-black label) — #569621, 3.63:1 — because deepening is still the right direction even though rest state already fails; it does not make hover legal on its own. How the brand colours map onto the template's tokens: --agriox-primary Primary Blue. Dark surfaces, headings, nav. --agriox-base Primary Blue again, deliberately. This is the template's accent token and it feeds 86 `color:` declarations — it has to hold something that is safe as text on white, and of the four only the blue is (10.66:1). Gold and orange are therefore NOT wired in globally; they are applied by hand below, on grounds chosen to clear AA. --agriox-base-dark Blue darkened, for hover on blue fills. Since base and primary are now the same value, any template hover that went base→primary is a no-op; the FFS components use this instead. --agriox-secondary Gold. In agriox.css this token only reaches parts the FFS pages do not render (blog, testimonials, team, checkout), so it is safe to hand it a white-hostile colour. Treat it as decorative. --agriox-base-on-dark Gold, for accent text and icons on the blue surfaces (5.30:1). NEVER use on white. --ffs-cta #73C92D, the client's own CTA green (2026-09-08). The high-priority CTA fill — .ffs-btn--primary AND .ffs-btn--shopee share it, by the same "one CTA colour" instruction that originally put Shopee on Tertiary Orange here; it is the loudest thing on the page and stops being loud the moment it is used for anything else. Contrast, measured (WCAG 2.1, relative luminance per the sRGB formula): #FFFFFF on #2E3192 .... 10.66:1 AAA — text on the blue header/footer #2E3192 on #FFFFFF .... 10.66:1 AAA — headings, nav, links on white #0B141A on #F2A900 .... 9.26:1 AAA — label on a gold fill #2E3192 on #EDEEEF .... 9.18:1 AAA — headings on the neutral band #4A4A55 on #FFFFFF .... 8.74:1 AAA — body copy #4A4A55 on #EDEEEF .... 7.53:1 AAA — body copy on cards #2E3192 on #CBCFD0 .... 6.79:1 AA — text on a full-strength gray #F2A900 on #2E3192 .... 5.30:1 AA — gold text and icons on the blue #73C92D on #2E3192 .... 5.14:1 AA — non-text graphic: the CTA fill sitting on the blue hero (this one reading improved over #8C9600's 3.29 — the trade-off is entirely on white grounds) #A57300 on #FFFFFF .... 4.16:1 —— — gold, darkened, on light grounds #FFFFFF on #569621 .... 3.63:1 —— — CTA label, hover state — still short of normal-text AA, better than rest #A57300 on #EDEEEF .... 3.58:1 —— — gold, darkened, on the neutral band #73C92D on #FFFFFF .... 2.07:1 FAIL — two readings at once: the CTA fill as a control boundary on white, AND (same numbers) white CTA label, rest state. Below the 3:1 large-text floor the 19px/700 size rule exists to guarantee — see the --ffs-cta token comment for why this shipped anyway #F2A900 on #FFFFFF .... 2.01:1 FAIL — never text, never a meaningful icon; blue grounds only #CBCFD0 on #FFFFFF .... 1.57:1 FAIL — borders and background variations only Tertiary Orange's own contrast figures (white label 3.42:1 rest / 4.65:1 hover, both large-text-only) are unchanged and still apply wherever it still appears — the header Shopee badge and the values under --ffs-orange / --ffs-shopee below — just no longer to the CTA button. -------------------------------------------------------------------------- */ :root { /* Primary Blue. Headers, footers, key typography, dark surfaces. Feeds 171 pre-processed hexes in agriox.css; changing it re-skins the whole template, so measure before touching it. */ --agriox-primary: #2e3192; --agriox-primary-rgb: 46, 49, 146; /* Blue, deepened. NOT the brand gold, despite this being the template's "secondary" slot — the token is a background in template chrome the FFS pages do render, and the template hardcodes #ffffff on top of it. The footer bottom bar is the proof: gold here rendered a white copyright line and white social icons at 2.01:1. Gold reaches the page through --agriox-base-on-dark and --ffs-gold instead, both of which are only ever placed on grounds this stylesheet controls. */ --agriox-secondary: #242672; --agriox-secondary-rgb: 36, 38, 114; /* Page base. Declared rather than left to the UA default so nothing downstream can quietly reintroduce the template's boxed cream. White stays the dominant background. */ --ffs-page: #ffffff; /* The template's accent token. Blue, not gold — it lands on 86 text declarations and gold would take every one of them to 2.01:1. */ --agriox-base: #2e3192; --agriox-base-rgb: 46, 49, 146; /* Blue darkened ~22%. Hover/active for blue-filled surfaces; 13.16:1 on white, so it is also safe as text. */ --agriox-base-dark: #242672; /* Gold — accent text and icons on the blue surfaces (5.30:1). The on-white counterpart is --ffs-gold-dark. */ --agriox-base-on-dark: #f2a900; /* Body text — warm neutral, not pure grey. The brief does not specify a body colour; this measures 8.74:1 on white and 7.53:1 on the band. */ --agriox-color-1: #4a4a55; --agriox-color-1-rgb: 74, 74, 85; /* The four brand colours under their own names, for the component work further down. */ --ffs-blue: #2e3192; --ffs-gold: #f2a900; --ffs-orange: #e86100; --ffs-gray: #cbcfd0; /* High-priority CTA — #73C92D as of 2026-09-08, the client's own explicit replacement for the sampled #8C9600 Mr Magic Green this stylesheet landed on the day before (see the section 1 palette note for that sampling and reasoning, now superseded). #73C92D is a brighter, "flatter" green — closer to a stock/brand-kit swatch than a colour lifted from a lit photo — and the client was explicit that the label stays white. FLAG, not a blocker: white on #73C92D is 2.07:1 — below even the 3:1 WCAG large-text floor the previous green (3.24:1) and the orange before it (3.42:1) both cleared, both at the same 19px/700. This is a real AA FAIL, not a tight pass; see the palette note's contrast table. Applied as instructed regardless — this is the client's explicit colour AND label choice, not a default this file picked. If it needs to clear AA later, the fix is either a near-black label again (--ffs-on-brand, which would pass comfortably on this fill) or a darker green with white retained; it is not a CSS bug to "fix" unilaterally. --ffs-cta-hover deepens for the same reason it deepened under the old green: a white label gains contrast as the fill gets darker, so hover should move that direction even though rest state already fails — 3.63:1 on hover, still short of 4.5 but closer, and better than resting state either way. */ --ffs-cta: #73c92d; --ffs-cta-hover: #569621; /* Gold darkened until it clears 3:1 on white AND on the neutral band (4.16:1 / 3.58:1). For gold-toned borders and any gold graphic that has to sit on a light ground. Still not body text. --ffs-gold-hover is the shallower darkening used for gold FILLS. It is visibly deeper than the rest state while keeping the near-black label at 7.29:1; --ffs-gold-dark itself would take that label to 4.48:1, which is just under AA for a 16px bold button label. */ --ffs-gold-dark: #a57300; --ffs-gold-hover: #d69600; /* Typography, per FFS_Brand.pdf: Sora for display, Inter for everything functional. Both are Google Fonts. The template's third font (Shadows Into Light) stays dropped; --agriox-font-3 is aliased to the display face so any stray reference still resolves. */ --agriox-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --agriox-font-2: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --agriox-font-3: 'Sora', system-ui, sans-serif; /* Supporting tokens used by the FFS components below. --ffs-surface is the brief's "background variation": the neutral gray at 35% over white. Full-strength #CBCFD0 is too heavy for a section band behind body copy, but it is exactly right as a border, which is what --ffs-border takes it for. */ --ffs-ink: #2e3192; --ffs-surface: #edeeef; --ffs-border: #cbcfd0; --ffs-radius: 10px; --ffs-btn-gap: 16px; --ffs-shadow: 0 2px 4px rgba(46, 49, 146, .05), 0 8px 24px rgba(46, 49, 146, .08); /* Third-party brand fills. Both are light, and both were carrying white labels that measured far under AA — WhatsApp green 2.0:1, Shopee orange 3.4:1. Rather than dulling two recognisable brand colours, the label flipped to near-black (9.4:1 and 5.4:1). Same pattern Spotify uses for black-on-green. Hovers LIGHTEN these two, because dark text on a darkened fill goes the wrong way. Shopee now takes the brand's Tertiary Orange rather than Shopee's own #EE4D2D, which the brief asks for and which the two colours are close enough to survive: the badge still reads as Shopee without importing a fifth orange into the palette. The Shopee badge carries a WHITE label — originally chosen to match the CTA buttons, back when .ffs-btn--primary was white-on-orange too. The CTA has moved fills and label colours several times since (Mr Magic Green with a near-black label, then white; #73C92D with white — see the section 1 palette note for the full sequence), so this is now a coincidence rather than a design link either way. The badge itself is unaffected by any of it: it is a 14px pill, not a 19px button, so it could never lean on the large-text exemption the CTA sizing gives, and it therefore sits on a deepened shade of its own Tertiary Orange rather than whatever --ffs-cta currently holds: white measures 4.79:1 on #C24E00 and 6.21:1 on the hover. Same colour family, legal at badge size, independent of the CTA's own state. This pair is now the HEADER BADGE ONLY. The Shopee buttons in the body of the page take --ffs-cta flat (#73C92D as of 2026-09-08) — see .ffs-btn--shopee in section 4, which currently fails AA on that fill even at 19px/700 (2.07:1) and would fail worse at 14px. Do not point the badge at --ffs-cta regardless of what it holds next — that is exactly the failure mode the deepened shade exists to avoid. */ --ffs-whatsapp: #25d366; --ffs-whatsapp-hover: #2fe072; --ffs-shopee: #c24e00; --ffs-shopee-hover: #a54200; /* Label colour for every light brand fill — gold, orange, WhatsApp, Shopee. Near-black rather than pure #000 so it reads as ink, not as a hole in the fill. */ --ffs-on-brand: #0b141a; /* Review stars. A star row rendered in the brand blue reads as decoration rather than a rating, and it is the only rating a sighted user sees (the text equivalent is for screen readers) — so it needs its own colour, and WCAG 1.4.11 asks 3:1 of it as a meaningful non-text graphic. This is the brand gold darkened until it clears that on both grounds it appears on: 4.16:1 on white, 3.58:1 on the neutral band. Brand gold itself is 2.01:1 and would fail both. Same value as --ffs-gold-dark; kept under its own name so the rating can be retuned without moving every gold border. */ --ffs-star: var(--ffs-gold-dark); } /* -------------------------------------------------------------------------- 1b. Font Awesome — give bare `.fa` the solid face -------------------------------------------------------------------------- Font Awesome 5 splits what v4 called `.fa` into three families, and it sets the weight on the NEW classes only: .fas font-family: "Font Awesome 5 Free" font-weight: 900 (1001 icons) .far font-family: "Font Awesome 5 Free" font-weight: 400 ( 151 icons) .fab font-family: "Font Awesome 5 Brands" ( 457 icons) .fa font-family: "Font Awesome 5 Free" -- no weight at all Bare `.fa` is a v4 leftover: it picks the family but leaves the weight to be INHERITED from whatever the icon happens to sit inside. The two faces are 400 and 900, so per CSS font matching an inherited 400 or 500 selects the 400 face — which holds only 151 of the 1001 Free glyphs. Every solid-only icon in that position has no glyph to draw and renders as nothing at all. That is what was emptying the boxes on the homepage. `.ffs-cert__mark` sets no weight, so its icons inherited body's 400: fa-flask, fa-cogs, fa-box-open, fa-store in "What we do", and fa-shield-alt, fa-check, fa-balance-scale in "Why it matters", were all blank. 14 distinct icons sitewide. The ones that did survive (fa-check-circle, fa-clock, fa-envelope, fa-file-alt) only did so by happening to exist in the 151 — and they were drawing as outlines while their neighbours were solid. Setting the weight here fixes all 26 bare-`fa` icons at once, which is why this is a stylesheet rule and not 35 edits across the PHP. All 26 were checked against the solid face's codepoint table first; every one is present, so none of them can regress into the same blank state from this direction. `.fab` and `.far` are untouched: brands carry their own family, and the review stars deliberately use `.far` for the empty state. Neither element carries the `fa` class, so neither matches this selector. -------------------------------------------------------------------------- */ .fa { font-weight: 900; } /* -------------------------------------------------------------------------- 2. Typography scale The template ships 18px/34px body copy, which is oversized for reading on a phone and forces awkward line lengths. Reset to a fluid scale. -------------------------------------------------------------------------- */ body { font-size: 16px; line-height: 1.65; color: var(--agriox-color-1); background-color: var(--ffs-page); -webkit-font-smoothing: antialiased; } /* The template ships a boxed layout on a cream ground (#f6f4ec). No FFS page sets .boxed-wrapper, but the rule outranks the element selector above if one ever does, so it is neutralised here rather than left as a trapdoor. */ body.boxed-wrapper { background-color: var(--ffs-page); } @media (min-width: 768px) { body { font-size: 17px; line-height: 1.7; } } h1, h2, h3, h4, h5, h6, .section-title__title, .main-slider__title { font-family: var(--agriox-font-2); color: var(--ffs-ink); font-weight: 700; line-height: 1.18; letter-spacing: -0.01em; } h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.5rem); } h3 { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); } /* Sora is geometric and sits wider than the serif it replaces, so optical tracking has to tighten as the size grows — a flat -0.01em reads loose at 3.5rem and cramped at 1.25rem. Small headings go back to neutral. */ h1 { letter-spacing: -0.025em; } h2 { letter-spacing: -0.02em; } h4, h5, h6 { font-weight: 600; letter-spacing: 0; } /* Long-form copy should not run edge to edge on a wide screen. */ .ffs-prose p { max-width: 68ch; } /* Bulleted/numbered lists inside prose copy — added 2026-08-29 for the Halal and HACCP policy statements on accreditation.php, the first place this site has needed a list inside body copy rather than a run of

. Same max-width as the paragraphs above, so a policy's list items wrap at the same measure as its lead-in sentence. */ .ffs-prose ul, .ffs-prose ol { max-width: 68ch; margin: 0 0 1em; padding-left: 1.25em; } .ffs-prose li + li { margin-top: .5em; } .ffs-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 12px 20px; background: var(--agriox-primary); color: #fff; font-weight: 700; } .ffs-skip-link:focus { left: 8px; top: 8px; } /* Visible keyboard focus — the template removes outlines in several places. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--agriox-base); outline-offset: 2px; } /* The blue focus ring is invisible on the blue grounds — 1:1, since it is the same colour. Anything sitting on blue takes the gold instead, which measures 5.30:1, well past the 3:1 a focus indicator needs. */ .ffs-hero a:focus-visible, .ffs-hero button:focus-visible, .ffs-section--panel a:focus-visible, .ffs-section--panel button:focus-visible, .main-header--one__top a:focus-visible { outline-color: var(--agriox-base-on-dark); } /* -------------------------------------------------------------------------- 3. Hero — single static banner replacing the 3-slide Swiper carousel -------------------------------------------------------------------------- */ .ffs-hero { position: relative; display: flex; align-items: flex-start; min-height: 460px; padding: 80px 0; background: var(--agriox-primary); overflow: hidden; } .ffs-hero > .auto-container { width: 100%; } @media (min-width: 992px) { .ffs-hero { min-height: 620px; } } .ffs-hero__media { position: absolute; inset: 0; } .ffs-hero__media img { width: 100%; height: 100%; object-fit: cover; } .ffs-hero__media::after { content: ''; position: absolute; inset: 0; /* Directional scrim: keeps text legible without flattening the photo. */ background: linear-gradient(100deg, rgba(var(--agriox-primary-rgb), .94) 0%, rgba(var(--agriox-primary-rgb), .82) 45%, rgba(var(--agriox-primary-rgb), .45) 100%); } .ffs-hero__inner { position: relative; z-index: 2; max-width: 720px; color: #fff; text-align: left; } .ffs-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; /* Sits on the blue hero scrim — gold, not the raw accent blue. */ color: var(--agriox-base-on-dark); } .ffs-hero__title { color: #fff; margin-bottom: 20px; } .ffs-hero__text { font-size: 1.0625rem; color: rgba(255, 255, 255, .88); margin-bottom: 32px; max-width: 52ch; } /* The 32px above is the gap between the copy and the CTA row, not between sentences. Where a hero runs to two paragraphs (home, products) that same gap would split one passage into two loose blocks, so tighten everything but the last — which still has the buttons under it to clear. */ .ffs-hero__text:not(:last-of-type) { margin-bottom: 18px; } /* Layout only — display/gap come from the shared button-group rule in §4 so the hero pair is spaced identically to every other pair. */ .ffs-hero__actions { align-items: center; justify-content: flex-start; } /* The .ffs-hero__trust checklist that lived here — a tick-listed row of short claims under the hero CTAs — was removed in August 2026 at the client's request, from index.php and business-solutions.php together. Those were its only two instances, so the rules went with the markup rather than being left behind as dead weight in an already long file. Both pages keep the markup they lost in a comment at the point of removal, so restoring it means pasting that back and re-adding a flex row here. Nothing else referenced the class. */ /* White certification marks in hero banners. Used on index.php, about.php and accreditation.php; only index.php takes the --flush modifier below. Sized as a headline element rather than a footnote: 80px on a phone, 96px on a tablet, 112px from lg up. The source PNGs are 300x300 with generous internal padding, so the glyph inside reads roughly two-thirds of the box height — which is why these numbers look large next to a typical logo strip and do not render large on screen. Nothing here may take a max-height. .ffs-hero does set overflow:hidden — that is there to crop the background photograph — but it cannot clip this row, because the hero has a min-height rather than a fixed height and grows to fit its content. If a logo ever looks cropped, something has given an ancestor a fixed height; fix that rather than shrinking these values back down. */ .ffs-hero__certs { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px; margin-top: 40px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .2); } .ffs-hero__certs img { width: auto; height: 80px; max-height: none; object-fit: contain; opacity: 1; /* Lifts the white vectors off the blue scrim. The hero gradient runs from near-solid blue to 45% at the right edge, so a logo landing on the lighter end needs the shadow to keep an edge. */ filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); transition: transform .18s ease, filter .18s ease; } .ffs-hero__certs img:hover { transform: scale(1.04); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); } @media (min-width: 576px) { .ffs-hero__certs { gap: 32px 48px; } .ffs-hero__certs img { height: 96px; } } @media (min-width: 992px) { .ffs-hero__certs img { height: 112px; } } /* --flush: the certs row when nothing sits between it and the CTAs. index.php used to run CTAs → checklist → logos, with a hairline rule opening the checklist and a second one opening the logo row. The checklist and both rules were removed in August 2026, and a lone rule left under the buttons read as a stray underline rather than as a divider between two things, so this modifier drops the border and the padding that went with it. It is a modifier and not a change to the base rule because about.php and accreditation.php also use .ffs-hero__certs, and there the border still separates the logos from the body copy above them. Those two keep it. Margin note: top only. This is the last child of .ffs-hero__inner and the hero already carries 80px of bottom padding, so a bottom margin here would deepen a gap that is generous already rather than balance anything. */ .ffs-hero__certs--flush { border-top: 0; padding-top: 0; margin-top: 32px; } /* --------------------------------------------------------------------------- Single-line mobile behaviour for the certification logo row. Written August 2026 for FOUR marks (HACCP, Halal, ISO, Buatan Malaysia): justify-content:space-between plus a width:calc(...)/4 so the row filled edge to edge exactly, at every width down to the 320px floor. ISO and Buatan Malaysia were dropped from every page using this row 2026-08-29 (client instruction — see the removal notes on index.php, about.php and accreditation.php), leaving two marks: HACCP and Halal, everywhere .ffs-hero__certs appears. Nobody revisited this block when that happened, so space-between kept doing exactly what it says with two flex items — push the first to the left edge and the last to the right — which reads as the two logos abandoned at opposite corners rather than as one group. Fixed 2026-09-09. Two marks at 290px of content width (the 320px floor less the 30px .auto-container padding — .ffs-hero itself is padding:80px 0, no horizontal padding of its own to subtract) need none of the old row- filling math: the base (non-media-query) rule already sizes each mark at height:80px / width:auto, and two 80px squares plus a clean gap come to under 200px — comfortably centered with room either side at any width this site supports, no shrinking required. So the fix is two declarations, not a new sizing system: centre the row, and gap it generously instead of the old 8px (which existed only to let four boxes ration a tight row — with two, and no more row to fill, the tighter gap just reads as stingy). -------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .ffs-hero__certs { flex-wrap: nowrap; justify-content: center; gap: 20px; margin-top: 28px; padding-top: 24px; } /* Must follow the .ffs-hero__certs rule above, not precede it. Both are single-class selectors, so specificity is equal and source order decides — placed first, the padding-top just above would win back the space this modifier exists to remove. */ .ffs-hero__certs--flush { padding-top: 0; margin-top: 28px; } } /* Vitaplex B+ badge — a sticker sitting half on, half off the top-right corner of the card. The bleed is the whole point of this component and it is in direct conflict with .ffs-card's overflow:hidden, which exists so a square photograph does not square off the card's rounded corners. Both are needed, so the clip MOVES rather than being deleted: --badged hands overflow:hidden down to the media box (which is the only child that actually needs clipping) and gives it the two top corner radii the card used to impose. Net visual change to the card itself: none. Consequence to keep in mind — the badge now overhangs its grid column. The row gutter is 30px against a 12px overhang, so it clears its neighbour, but a larger negative offset or a tighter gutter would put it over the next card. The positioning context comes from .ffs-card itself, which is relative for the category pill's sake; this modifier only lifts the clip. The doubled class is deliberate and load-bearing. This block sits ~530 lines ABOVE the .ffs-card base rule, and `.ffs-card--badged` alone has exactly the same specificity as `.ffs-card` (0,0,1,0), so the later overflow:hidden won the cascade and clipped the badge no matter what this rule said. Writing it as .ffs-card.ffs-card--badged (0,0,2,0) makes it win on specificity instead of position, so it stays correct if either block moves. Do not simplify it. */ .ffs-card.ffs-card--badged { overflow: visible; } .ffs-card--badged .ffs-card__media { border-top-left-radius: var(--ffs-radius); border-top-right-radius: var(--ffs-radius); } .ffs-vitaplex-badge { position: absolute; top: -12px; right: -12px; z-index: 20; transition: transform .2s ease; } .ffs-vitaplex-badge img { height: 48px; width: auto; object-fit: contain; display: block; /* On the badge image rather than the wrapper: a drop-shadow filter traces the PNG's alpha, so the shadow follows the logo's silhouette instead of drawing a rectangle behind a transparent box. */ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); } .ffs-card--badged:hover .ffs-vitaplex-badge, .ffs-vitaplex-badge:hover { transform: scale(1.1); } /* The lift is decorative; anyone who has asked the OS to stop moving things keeps the badge and loses the animation. */ @media (prefers-reduced-motion: reduce) { .ffs-vitaplex-badge { transition: none; } .ffs-card--badged:hover .ffs-vitaplex-badge, .ffs-vitaplex-badge:hover { transform: none; } } /* The same sticker on product-detail.php, where it hangs off the main product image. The wrapper exists only to give the badge a positioning context that is NOT clipped: both media branches on that page hide their overflow (the photo one inline, the icon one via .ffs-detail-media), so a badge nested inside either would be cut off at the corner it is meant to overhang. */ .ffs-detail-media-wrap { position: relative; } .ffs-vitaplex-badge--detail { top: -12px; right: -12px; } .ffs-vitaplex-badge--detail img { height: 56px; /* Deeper than the card badge's shadow: this sits on a large pale media box rather than a small one, and the lighter shadow disappeared against it. */ filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .3)); } .ffs-detail-media-wrap:hover .ffs-vitaplex-badge--detail { transform: scale(1.06); } @media (prefers-reduced-motion: reduce) { .ffs-detail-media-wrap:hover .ffs-vitaplex-badge--detail { transform: none; } } /* Certification strip under the product media on product-detail.php. Light panel now, paired with the blue-artwork logo variants in certified-logos-blue/. The panel and the artwork are one decision, not two: the blue marks are only legible on a light ground, exactly as the white silhouettes were only legible on the old blue ground. If this ever goes dark again, the srcs have to move back to certified-logos-white/ in the same change — a blue-on-blue logo is invisible. No filter touches any logo. The three FFS marks are flat brand blue and the two Moody marks are the certifying body's full-colour artwork (UKAS crown, red Standards Malaysia oval, registration numbers); a contrast/invert filter that "unified" them would destroy the second group. They render native. */ .ffs-detail-certs { margin-top: 24px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--ffs-border); } .ffs-detail-certs__label { margin: 0 0 14px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; /* Dark ink on the light panel, tied to the brand blue rather than a neutral slate so the label belongs to the marks below it. */ color: var(--ffs-ink); } /* Single row, all marks at one box height. flex-wrap so a narrow column drops to a second line instead of forcing a scrollbar; at the col-lg-6 width the five 40px marks and their gaps come to ~330px and stay on one line. */ .ffs-detail-certs__row { display: flex; flex-flow: row wrap; align-items: center; justify-content: flex-start; gap: 18px 24px; } .ffs-detail-certs__row img { /* 52px = the requested h-10 (40px) plus 30%. Equal BOX height, not equal ink: these five canvases are all 300x300 but the mark inside fills between 62% (Moody HACCP) and 92% (Halal) of it, so the flatter marks read a little smaller. That is the source artwork, and forcing per-logo heights to equalise the ink would be fragile the moment a file is reissued. */ height: 52px; width: auto; object-fit: contain; } /* .ffs-detail-certs__item / __code — the one-off wrapper that put the Halal registration code under its logo — was removed 2026-09-07 along with the markup that used it. See the comment on the accreditation-standards row in accreditation.php. */ .ffs-detail-certs__note { margin: 16px 0 0; font-size: .8125rem; color: var(--agriox-color-1); } .ffs-detail-certs__note a { color: var(--ffs-ink); text-decoration: underline; } .ffs-detail-certs__note a:hover, .ffs-detail-certs__note a:focus { color: var(--agriox-base-dark); } @media (max-width: 575.98px) { .ffs-detail-certs__row { gap: 14px 18px; } .ffs-detail-certs__row img { height: 44px; } } /* Specification list on product-detail.php. Machinery only for now — see the comment on the block in that file for why the figures are not labelled. Deliberately quieter than the "What FFS supplies" box directly beneath it: that box is the offer and should hold the eye, this is reference the reader scans once for whether the machine fits the counter. Hence a rule and a gold marker rather than a second bordered card, which would set two competing panels side by side. */ .ffs-specs { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ffs-border); } .ffs-specs__title { font-size: 1.0625rem; margin: 0 0 12px; } .ffs-specs__list { margin: 0; padding: 0; list-style: none; font-size: .9375rem; line-height: 1.55; } .ffs-specs__list li { position: relative; padding-left: 18px; } .ffs-specs__list li + li { margin-top: 6px; } .ffs-specs__list li::before { content: ""; position: absolute; left: 0; /* Optically centred on the first line of text rather than the box: a spec that wraps to two lines keeps its marker beside line one. */ top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--ffs-gold); } /* Left column of the Regulation block on accreditation.php — the intro and the accreditation block, with that block pinned to the column's bottom edge so it finishes on the same line as the third law card in the column beside it ("Food Hygiene Regulations 2009"). How the alignment holds, because it looks more fragile than it is: Bootstrap columns are flex items under align-items:stretch, so at lg+ both columns are already the full row height. The right column's