/* ========================================================================== Ferrands Homepage — "moderate echo" of the hero's look and feel Namespace: .ffl- plus targeted Elementor element IDs on page 18. The hero establishes four motifs; this layer carries them down the page: 1. the two brand fields #C2014E pink / #0293E5 cyan 2. the rounded plate thick #141414 border, large radius, light interior gradient 3. confetti sprinkles along the top edge of each brand field 4. the extruded pill deep fill + hard bottom lip Body copy deliberately stays clean Nunito at high contrast. The hero's 3D puffy lettering is a logo treatment, not a typeface; repeating it in running text would cost legibility for nothing. Two site-wide rules in ferrands-global-style.php shape what is possible here: `align-items: center !important` and `text-align: center !important`. This file works with them rather than fighting them, so everything is centre-aligned by design. The sprinkle SVGs are base64, not URL-encoded. A URL-encoded payload was silently rejected by the CSS parser: background-size and background-repeat from the same shorthand applied while the url() layer alone dropped to `none`. Base64 removes the escaping ambiguity entirely. ========================================================================== */ .ffl-home { --ffl-pink: #C2014E; --ffl-cyan: #0293E5; --ffl-ink: #141414; --ffl-cream: #FFF8F2; --ffl-muted: #5C5248; --ffl-plate-radius: 28px; --ffl-plate-border: 3px; } /* ---- the rounded-plate motif, shared by every card on the page ---- */ .ffl-home .ffl-plate, .ffl-home .elementor-element-3032b3b, .ffl-home .elementor-element-3bb8fdb, .ffl-home .elementor-element-e06752d, .ffl-home .elementor-element-ff25c59, .ffl-home .elementor-element-d5f12bf > .e-con { border: var(--ffl-plate-border) solid var(--ffl-ink); border-radius: var(--ffl-plate-radius); box-shadow: 0 8px 0 0 rgba(20, 20, 20, 0.06), 0 16px 26px rgba(4, 14, 26, 0.08); } /* ---- full bleed ---- Elementor caps these containers at the content width, which made every coloured block read as an inset card beside a full-width hero. Same technique the hero itself uses. */ .ffl-home .elementor-element-cc825fc, .ffl-home .elementor-element-c5ba229, .ffl-home .elementor-element-858a023, .ffl-home .elementor-element-01c471c, .ffl-home .elementor-element-e0fa4f6, .ffl-home .elementor-element-e065ef3 { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } .ffl-home .elementor-element-cc825fc > .e-con-inner, .ffl-home .elementor-element-c5ba229 > .e-con-inner, .ffl-home .elementor-element-858a023 > .e-con-inner, .ffl-home .elementor-element-01c471c > .e-con-inner, .ffl-home .elementor-element-e0fa4f6 > .e-con-inner, .ffl-home .elementor-element-e065ef3 > .e-con-inner { max-width: 1140px; margin-inline: auto; width: 100%; } /* ---- contain the bleed ---- 100vw counts the vertical scrollbar, so edge-to-edge blocks overflow the document by its width. Clip on the Elementor page wrapper rather than : this site has an unrelated programmatic-scroll bug, and body overflow rules are exactly what would tangle with it. `clip` rather than `hidden` so no new scroll container is created. */ .ffl-home .elementor-18 { overflow-x: clip; } /* ---- two homepage rows carry a hard-coded pixel width ---- .elementor-element-d5f12bf (the beliefs row) and -2d33d00 (the flavour row) are set to `width: 1180px`, so below a ~1180px viewport they overflow the document instead of shrinking. Swapping the fixed width for a max-width keeps the same measure on desktop and lets them reflow on smaller screens. NOTE: the footer template (elementor-815) has the same bug at a larger size -- .elementor-element-7494e84 and -21f1509 are `width: 1300px`, which is what puts the document at 1310px wide on a 1000px viewport. That is NOT fixed here: the footer is on the preserve list and is site-wide, so it needs a deliberate site-wide change rather than a homepage-scoped patch. */ .ffl-home .elementor-element-d5f12bf, .ffl-home .elementor-element-2d33d00 { width: auto !important; max-width: 1180px !important; } /* ======================= SECTION 2 — trust band ======================= */ .ffl-home .elementor-element-cc825fc { background: var(--ffl-cream) !important; padding: 56px 20px 64px !important; } .ffl-home .elementor-element-3032b3b, .ffl-home .elementor-element-3bb8fdb, .ffl-home .elementor-element-e06752d, .ffl-home .elementor-element-ff25c59 { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 58%, #FDF1F6 100%); padding: 30px 20px 26px !important; transition: transform 0.26s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.26s; } @media (hover: hover) and (pointer: fine) { .ffl-home .elementor-element-3032b3b:hover, .ffl-home .elementor-element-3bb8fdb:hover, .ffl-home .elementor-element-e06752d:hover, .ffl-home .elementor-element-ff25c59:hover { transform: translateY(-6px); box-shadow: 0 14px 0 0 rgba(20, 20, 20, 0.07), 0 26px 36px rgba(4, 14, 26, 0.13); } } /* icon discs alternate the two brand fields instead of all-magenta */ .ffl-home .elementor-element-cc825fc .elementor-icon { border-radius: 999px !important; border: 3px solid var(--ffl-ink) !important; box-shadow: 0 5px 0 0 rgba(20, 20, 20, 0.16); color: #FFFFFF !important; } .ffl-home .elementor-element-3032b3b .elementor-icon, .ffl-home .elementor-element-e06752d .elementor-icon { background: var(--ffl-cyan) !important; } .ffl-home .elementor-element-3bb8fdb .elementor-icon, .ffl-home .elementor-element-ff25c59 .elementor-icon { background: var(--ffl-pink) !important; } /* ===================== SECTION 3 — "Available at" ===================== */ .ffl-home .elementor-element-c5ba229 { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MjAnIGhlaWdodD0nMzQnIHZpZXdCb3g9JzAgMCA0MjAgMzQnPjxnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSc1Jz48bGluZSB4MT0nMTgnIHkxPScyMicgeDI9JzMwJyB5Mj0nMTAnIHN0cm9rZT0nI0ZGRkZGRicvPjxsaW5lIHgxPSc2MicgeTE9JzknIHgyPSc3MicgeTI9JzIxJyBzdHJva2U9JyNDMjAxNEUnLz48bGluZSB4MT0nMTA4JyB5MT0nMjAnIHgyPScxMjEnIHkyPScxMicgc3Ryb2tlPScjRkZGOEYyJy8+PGxpbmUgeDE9JzE1MicgeTE9JzExJyB4Mj0nMTYwJyB5Mj0nMjQnIHN0cm9rZT0nIzE0MTQxNCcvPjxsaW5lIHgxPScxOTgnIHkxPScyMycgeDI9JzIxMicgeTI9JzEzJyBzdHJva2U9JyNGRkZGRkYnLz48bGluZSB4MT0nMjQ2JyB5MT0nMTAnIHgyPScyNTUnIHkyPScyMycgc3Ryb2tlPScjRkZGOEYyJy8+PGxpbmUgeDE9JzI5MicgeTE9JzIxJyB4Mj0nMzA1JyB5Mj0nMTEnIHN0cm9rZT0nI0MyMDE0RScvPjxsaW5lIHgxPSczMzgnIHkxPScxMicgeDI9JzM0NycgeTI9JzI1JyBzdHJva2U9JyNGRkZGRkYnLz48bGluZSB4MT0nMzgyJyB5MT0nMjMnIHgyPSczOTYnIHkyPScxMicgc3Ryb2tlPScjMTQxNDE0Jy8+PC9nPjwvc3ZnPg==") top center / 420px 34px repeat-x, var(--ffl-cyan) !important; padding: 50px 20px 44px !important; } .ffl-home .elementor-element-c5ba229 .elementor-heading-title, .ffl-home .elementor-element-c5ba229 .elementor-widget-text-editor { color: #FFFFFF !important; } .ffl-home .elementor-element-c5ba229 .elementor-widget-text-editor { font-weight: 700; font-size: 17px; line-height: 1.7; } /* =================== SECTION 4 — "What We Believe" ==================== */ .ffl-home .elementor-element-858a023 { background: #FFFFFF !important; padding: 66px 20px 70px !important; } .ffl-home .elementor-element-d5f12bf > .e-con { background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 62%, #E9F4FC 100%); padding: 26px 18px 24px !important; } /* reserve the heading block so a two-line title like "Ferrands Quality" cannot shove its body copy out of line with its neighbours */ .ffl-home .elementor-element-d5f12bf > .e-con .elementor-heading-title { font-size: 20px !important; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; } .ffl-home .elementor-element-d5f12bf .elementor-widget-text-editor { color: var(--ffl-muted) !important; font-size: 15px; line-height: 1.6; } /* =================== SECTION 5 — "Fan Favourites" ==================== */ .ffl-home .elementor-element-01c471c { background: linear-gradient(180deg, #FDF1F6 0%, #FCE8F1 100%) !important; padding: 64px 20px 72px !important; } .ffl-home .elementor-element-2d33d00 .e-loop-item, .ffl-home .elementor-element-2d33d00 > .e-con-inner > .e-con { border: var(--ffl-plate-border) solid var(--ffl-ink); border-radius: var(--ffl-plate-radius); background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 62%, #E9F4FC 100%); box-shadow: 0 8px 0 0 rgba(20, 20, 20, 0.07), 0 18px 30px rgba(4, 14, 26, 0.10); overflow: hidden; } /* ==================== SECTION 6 — the numbers band ==================== */ .ffl-home .elementor-element-e0fa4f6 { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0MjAnIGhlaWdodD0nMzQnIHZpZXdCb3g9JzAgMCA0MjAgMzQnPjxnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLXdpZHRoPSc1Jz48bGluZSB4MT0nMTgnIHkxPScyMicgeDI9JzMwJyB5Mj0nMTAnIHN0cm9rZT0nI0ZGRkZGRicvPjxsaW5lIHgxPSc2MicgeTE9JzknIHgyPSc3MicgeTI9JzIxJyBzdHJva2U9JyMwMjkzRTUnLz48bGluZSB4MT0nMTA4JyB5MT0nMjAnIHgyPScxMjEnIHkyPScxMicgc3Ryb2tlPScjRkZGOEYyJy8+PGxpbmUgeDE9JzE1MicgeTE9JzExJyB4Mj0nMTYwJyB5Mj0nMjQnIHN0cm9rZT0nIzE0MTQxNCcvPjxsaW5lIHgxPScxOTgnIHkxPScyMycgeDI9JzIxMicgeTI9JzEzJyBzdHJva2U9JyNGRkZGRkYnLz48bGluZSB4MT0nMjQ2JyB5MT0nMTAnIHgyPScyNTUnIHkyPScyMycgc3Ryb2tlPScjRkZGOEYyJy8+PGxpbmUgeDE9JzI5MicgeTE9JzIxJyB4Mj0nMzA1JyB5Mj0nMTEnIHN0cm9rZT0nIzAyOTNFNScvPjxsaW5lIHgxPSczMzgnIHkxPScxMicgeDI9JzM0NycgeTI9JzI1JyBzdHJva2U9JyNGRkZGRkYnLz48bGluZSB4MT0nMzgyJyB5MT0nMjMnIHgyPSczOTYnIHkyPScxMicgc3Ryb2tlPScjMTQxNDE0Jy8+PC9nPjwvc3ZnPg==") top center / 420px 34px repeat-x, var(--ffl-pink) !important; padding: 50px 20px 64px !important; } .ffl-home .elementor-element-e0fa4f6 .elementor-heading-title { color: var(--ffl-cream) !important; } /* the big figure, echoing the hero lettering's weight without faking its 3D */ .ffl-home .elementor-element-d1bd4b4 .elementor-heading-title, .ffl-home .elementor-element-94451e3 .elementor-heading-title, .ffl-home .elementor-element-236d75d .elementor-heading-title, .ffl-home .elementor-element-98faa41 .elementor-heading-title { font-weight: 900 !important; letter-spacing: -0.02em; text-shadow: 0 3px 0 rgba(20, 20, 20, 0.22); } .ffl-home .elementor-element-af6bbac .elementor-heading-title, .ffl-home .elementor-element-b8948d6 .elementor-heading-title, .ffl-home .elementor-element-a566938 .elementor-heading-title, .ffl-home .elementor-element-13f5a52 .elementor-heading-title { opacity: 0.92; font-weight: 700 !important; } /* ================== SECTION 7 — wholesale call to action ============== */ .ffl-home .elementor-element-e065ef3 { background: var(--ffl-ink) !important; padding: 60px 20px 66px !important; } .ffl-home .elementor-element-e065ef3 .elementor-heading-title { color: var(--ffl-cream) !important; } .ffl-home .elementor-element-e065ef3 .elementor-widget-text-editor { color: rgba(255, 248, 242, 0.82) !important; } /* the hero's extruded pill, reused for both page buttons */ .ffl-home .elementor-element-6508263 .elementor-button, .ffl-home .elementor-element-5de0b69 .elementor-button { border-radius: 999px !important; border: 2px solid var(--ffl-ink) !important; background: var(--ffl-cyan) !important; color: #FFFFFF !important; font-weight: 800 !important; padding: 16px 30px !important; min-height: 48px; box-shadow: 0 6px 0 0 #015E93, 0 14px 18px rgba(0, 38, 66, 0.28); transition: transform 0.16s, box-shadow 0.16s; } .ffl-home .elementor-element-6508263 .elementor-button:hover, .ffl-home .elementor-element-5de0b69 .elementor-button:hover { transform: translateY(2px); box-shadow: 0 4px 0 0 #015E93, 0 10px 14px rgba(0, 38, 66, 0.26); } .ffl-home .elementor-element-6508263 .elementor-button:focus-visible, .ffl-home .elementor-element-5de0b69 .elementor-button:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; } /* ---- phones ---- */ @media (max-width: 767px) { .ffl-home { --ffl-plate-radius: 22px; --ffl-plate-border: 2px; } .ffl-home .elementor-element-cc825fc, .ffl-home .elementor-element-858a023, .ffl-home .elementor-element-01c471c, .ffl-home .elementor-element-e065ef3 { padding-top: 40px !important; padding-bottom: 44px !important; } .ffl-home .elementor-element-c5ba229, .ffl-home .elementor-element-e0fa4f6 { padding-top: 44px !important; padding-bottom: 40px !important; } .ffl-home .elementor-element-6508263 .elementor-button, .ffl-home .elementor-element-5de0b69 .elementor-button { width: min(340px, 100%); } } @media (prefers-reduced-motion: reduce) { .ffl-home .elementor-element-3032b3b, .ffl-home .elementor-element-3bb8fdb, .ffl-home .elementor-element-e06752d, .ffl-home .elementor-element-ff25c59, .ffl-home .elementor-element-6508263 .elementor-button, .ffl-home .elementor-element-5de0b69 .elementor-button { transition: none !important; } }