/** * Header system — Discount Pet Food * * Four slim bands, each with one job: * utility #00351F contact + trust, desktop only * main #004B31 logo, search, cart * nav #FFFFFF mega menu (sticky anchor) * notice #FFD101 collection-only warning * * Hierarchy comes from the white nav band, not a white masthead: the supplied * logo is a knockout (70% near-white pixels) and disappears on light grounds, * so the masthead has to stay dark. Putting the white band below it still * breaks up the three stacked greens, and it flows straight into the white * mega-menu panels. * * Browser support: no :has(), no container queries, no backdrop-filter. * position: sticky degrades to static. :focus-visible is paired with :focus * for older Safari. */ :root { --dpf-green: #004b31; --dpf-green-mid: #467a4d; --dpf-yellow: #ffd101; /* Cart CTA. Mirrors the colour set on the cart toggle in Elementor, so the toggle and the mini-cart's Checkout button read as the same action. */ --dpf-orange: #eb7100; --dpf-orange-dark: #d06400; --dpf-ink: #16251e; --dpf-muted: #5e6f66; --dpf-line: #dfe7e2; --dpf-shell: 1400px; /* Must match the horizontal padding set on the boxed bands in Elementor (utility + main). The nav bar and mega panel reproduce it themselves so their band can stay full-width and let the panel bleed edge to edge. */ --dpf-pad: 32px; --dpf-speed: 0.18s; } /* --------------------------------------------------------------- shell */ .jupiterx-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 500; } /* A real shadow only once it is actually overlapping content. */ .dpf-stuck .jupiterx-header { box-shadow: 0 6px 24px -10px rgba(0, 40, 24, 0.45); } /* Horizontal padding is set in Elementor on the containers themselves (utility + main, 32px), not here: Elementor writes per-element rules at higher specificity and loads after this file, so a rule here is silently dropped. The nav bar and panels take their inset from --dpf-gutter below, which is matched to that 32px. */ .dpf-utility > .e-con-inner, .dpf-main > .e-con-inner, .dpf-navband > .e-con-inner, .dpf-notice > .e-con-inner { max-width: var(--dpf-shell); } /* ------------------------------------------------------------- utility */ .dpf-utility { font-size: 13px; line-height: 1.3; } .dpf-utility .elementor-icon-list-text { letter-spacing: 0.01em; } /* Collapse the utility band away the moment the page scrolls: it is reference information, not navigation. */ @media (min-width: 1025px) { .dpf-utility { overflow: hidden; max-height: 60px; transition: max-height var(--dpf-speed) ease, opacity var(--dpf-speed) ease; } .dpf-stuck .dpf-utility { max-height: 0; opacity: 0; } /* Desktop only: the phone/tablet bar is icon-led with its labels visually hidden, so type size and underlines are meaningless there. */ .jupiterx-header .dpf-utility .elementor-icon-list-text { font-size: 14px; line-height: 1.3; } /* Underline the label on hover, not the icon beside it. */ .jupiterx-header .dpf-utility .elementor-icon-list-item > a:hover .elementor-icon-list-text, .jupiterx-header .dpf-utility .elementor-icon-list-item > a:focus-visible .elementor-icon-list-text { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } } /* ---------------------------------------------------------------- main */ .dpf-main { transition: padding var(--dpf-speed) ease; } .dpf-main .elementor-widget-image img { transition: max-width var(--dpf-speed) ease; } @media (min-width: 1025px) { .dpf-stuck .dpf-main { --padding-top: 10px; --padding-bottom: 10px; } .dpf-stuck .dpf-main .elementor-widget-image img { max-width: 150px !important; } } /* --- search ------------------------------------------------------------ */ .dpf-search .jupiterx-widget, .dpf-search .jupiterx-widget-content, .dpf-search .widget_product_search { margin: 0; padding: 0; } .dpf-search form.woocommerce-product-search { position: relative; display: flex; align-items: stretch; margin: 0; width: 100%; } .dpf-search input[type="search"].search-field { flex: 1 1 auto; width: 100%; height: 48px; margin: 0; padding: 0 52px 0 18px; border: 2px solid var(--dpf-line); border-radius: 999px; background: #f7faf8; color: var(--dpf-ink); /* The generic fallback matters: `Montserrat` on its own drops to the browser default serif whenever the webfont fails to load. */ font-family: "Montserrat", Sans-serif; font-size: 15px; line-height: 48px; /* iOS zooms any field under 16px on focus; 15px + this keeps it steady. */ -webkit-appearance: none; appearance: none; transition: border-color var(--dpf-speed) ease, background-color var(--dpf-speed) ease; } .dpf-search input[type="search"].search-field::-webkit-search-cancel-button { -webkit-appearance: none; } .dpf-search input[type="search"].search-field::placeholder { color: var(--dpf-muted); font-family: "Montserrat", Sans-serif; opacity: 1; } .dpf-search input[type="search"].search-field:focus { outline: 0; border-color: var(--dpf-green-mid); background: #fff; box-shadow: 0 0 0 4px rgba(70, 122, 77, 0.16); } .dpf-search form.woocommerce-product-search button[type="submit"] { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--dpf-green); color: #fff; font-size: 15px; cursor: pointer; transition: background-color var(--dpf-speed) ease; } .dpf-search form.woocommerce-product-search button[type="submit"]:hover, .dpf-search form.woocommerce-product-search button[type="submit"]:focus { background: var(--dpf-green-mid); } /* --- cart -------------------------------------------------------------- */ .dpf-cart .elementor-menu-cart__toggle .elementor-button { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font-weight: 700; transition: background-color var(--dpf-speed) ease, transform var(--dpf-speed) ease; } .dpf-cart .elementor-menu-cart__toggle .elementor-button:active { transform: translateY(1px); } .dpf-cart .elementor-button-icon-qty { background: var(--dpf-yellow); color: var(--dpf-ink); font-weight: 700; } /* ------------------------------------------------------------------- usps */ /* * The four trust points (family run, Google rating, click & collect, bulk * pricing) sit in a carousel: four across on desktop, two on tablet, and a * wrapped row of plain labels on mobile. * * This band was invisible on every screen because the container carried * hidden-desktop, hidden-tablet AND hidden-mobile at once. Restored by * clearing all three in the Elementor template, not here — responsive * visibility is a widget setting and CSS cannot reach it cleanly. * * WHY IT IS NO LONGER YELLOW: it used to be #FFD101, directly above the * collection-only notice, which is also #FFD101. The two merged into one * undifferentiated slab, and the warning — the one message on this site that * genuinely has to be read — was camouflaged by the trust points above it. * Yellow now means "notice" and nothing else. The tint here is the same one * used for the mini-cart subtotal and the bulk-pricing band, so the trust * points read as calm supporting information, which is their job. * The background and padding are set in the Elementor template, since it * writes those per element at a specificity this file cannot reach. */ /* * NO JUMP WHILE SWIPER BOOTS. * * The markup ships as four full-width slides in a flex row with both arrows * showing. Until Swiper's JS runs that paints as ONE stretched trust point with * the other three overflowing off-screen and two chevrons beside them; when it * initialises, slides snap to 25% and the arrows disappear. Measured, not * assumed: with JS disabled every slide is 1440px wide. * * So CSS states the finished layout up front and Swiper inherits it: * * - slide widths are set only while `.swiper` lacks `swiper-initialized`, so * the handoff needs no !important and no specificity fight. Once Swiper is * up it writes inline widths and these rules stop matching. * - arrows start hidden and are revealed only once Swiper has initialised AND * has decided they are needed. They are injected into the layout, never out * of it, so nothing reflows around them. */ .dpf-usp .swiper:not(.swiper-initialized) .swiper-slide { flex: 0 0 25%; width: 25%; } /* Two across below the 1025px desktop breakpoint, matching the widget's own tablet setting. Under 768px the carousel is hidden and the chips take over. */ @media (max-width: 1024px) { .dpf-usp .swiper:not(.swiper-initialized) .swiper-slide { flex-basis: 50%; width: 50%; } } /* * Hidden until proven useful. * * This needs (0,4,0), not the obvious (0,3,0): Elementor's * .elementor-element .swiper ~ .elementor-swiper-button { display: inline-flex } * is three classes too and loads after this file, so a three-class rule ties * and loses on order — which showed up as the arrows reappearing at every * breakpoint. Repeating the class is what buys the extra point. */ .dpf-usp .swiper ~ .elementor-swiper-button.elementor-swiper-button, .dpf-usp .swiper .elementor-swiper-button.elementor-swiper-button { display: none; } /* * (0,5,0), beating Elementor's `.elementor-element .swiper ~ .elementor-swiper-button`. * The arrows are siblings of `.swiper`, not children, so the sibling combinator * is the one that reaches them. */ .dpf-usp .swiper.swiper-initialized ~ .elementor-swiper-button:not(.swiper-button-disabled), .dpf-usp .swiper.swiper-initialized .elementor-swiper-button:not(.swiper-button-disabled) { display: flex; } /* Nothing in the band is interactive apart from those arrows, so the slides should not look draggable or show a text cursor. */ .dpf-usp .swiper-slide, .dpf-usp .elementor-icon-list-item { cursor: default; } /* Sits below the notice, and the band is white. The yellow above separates it at the top; the hairline below is what keeps it from dissolving into the page content beneath. */ .dpf-usp { border-bottom: 1px solid var(--dpf-line); } /* * The band runs edge to edge; its CONTENTS line up with every other band in the * header. That constraint is set on the container in Elementor (boxed, 1400px, * 32px gutter), deliberately NOT as padding on the carousel here: Swiper * measures its own box to size the slides, and padding it after init threw the * track 408px off screen on tablet. */ /* The rating is a link, so its text sits inside an ; both shapes are listed so the row lays out the same either way. No gap: the icon is positioned out of flow below, so there is nothing for it to space. */ .dpf-usp .elementor-icon-list-item, .dpf-usp .elementor-icon-list-item > a { display: inline-flex; align-items: center; } .dpf-usp .elementor-icon-list-icon { flex: none; } /* (0,3,1): Elementor's own `.elementor-widget-icon-list .elementor-icon-list-icon i` is (0,2,1) and loads later, so the obvious two-class version ties and the icons fall back to the kit's accent colour — a pale blue that belongs to nothing else on this site. */ /* * Centring the glyph, not its box. * * The boxes already sat dead centre in the disc, but Font Awesome draws * each glyph through a ::before whose ink sits on a baseline, and the ink is * not centred the same way in every icon — a narrow pound sign and a wide * box-open read as off-centre even with identical boxes. Giving the the * full 32px of the disc and centring its line box puts the drawn glyph in the * middle regardless of which icon it is. */ .dpf-usp .elementor-widget-icon-list .elementor-icon-list-icon i, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-icon svg { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 15px; line-height: 1; color: var(--dpf-yellow); fill: var(--dpf-yellow); } /* * (0,4,0), and both structures. * * Elementor's global rule is * .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text * at (0,3,0), loading after this file. Three of the four points lost to it * while the fourth did not, which looked like a random inconsistency until the * markup explained it: "Rated 4.7/5 on Google" is a link to the Google * reviews, so its text span sits inside an and that direct-child selector * never matched it. Hence both selectors below. */ .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item .elementor-icon-list-text, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item > a { color: var(--dpf-green); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; text-decoration: none; } /* The rating is the one thing here worth clicking — it goes to the reviews themselves, which is the whole value of quoting a rating. Say so. */ .dpf-usp .elementor-icon-list-item a { cursor: pointer; } .dpf-usp .elementor-icon-list-item a:hover .elementor-icon-list-text, .dpf-usp .elementor-icon-list-item a:focus-visible .elementor-icon-list-text { color: var(--dpf-green-mid); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .dpf-usp .elementor-icon-list-item a:focus, .dpf-usp .elementor-icon-list-item a:focus-visible { outline: 3px solid var(--dpf-green-mid); outline-offset: 4px; border-radius: 4px; } .dpf-usp .elementor-icon-list-item a:focus:not(:focus-visible) { outline: 0; } /* ---- supporting line ---- */ /* * Each trust point carries a second line that says what it actually means. * The slide stacks them: icon + headline on one row, the supporting line * centred beneath. The slide container's own gap is 0, so the spacing is set * on the line itself. */ /* * All four slides on the same rhythm. * * Elementor sets --row-gap:0 on the FIRST slide's container only; the other * three never had it set and fall back to the .e-con default of 20px. That is * why the first supporting line sat 20px higher than the rest. Zeroing it here * for every slide means the spacing is owned by one margin on the line itself. */ /* * The slide must be the icon's containing block. Elementor gives widgets * position:relative, so without this the disc anchors to the icon-list widget * (the heading row alone) and sits 10px high of the two-line block. */ .dpf-usp .elementor-widget-icon-list, .dpf-usp .elementor-widget-icon-list .elementor-widget-container, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-items, /* The
  • is the one that matters and the one that needed (0,3,0): Elementor sets .elementor-widget-icon-list .elementor-icon-list-item{position:relative} at the same strength and loads later, so the two-class version tied and the disc kept anchoring to the heading row. */ .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item > a { position: static; } .dpf-usp .swiper-slide > .e-con { position: relative; --row-gap: 0px; --column-gap: 0px; /* Both widgets share one left edge so the supporting line can sit directly under the heading rather than centring itself independently. These slides are `e-con-full`, so there is no .e-con-inner to align against. */ align-items: flex-start; } /* * The icon hangs to the left and the two lines of text stack beside it: * * [icon] Family Run Business * Over 30 years in the trade * * Both lines carry the same 44px indent (see below), so the supporting line * lands on exactly the same left edge as the heading above it. */ .dpf-usp .dpf-usp-sub { width: 100%; } .dpf-usp .dpf-usp-sub p { margin: 3px 0 0; /* Matches the heading's indent: 32px disc + 12px gap. */ padding-left: 44px; color: var(--dpf-muted); /* The generic fallback matters: `Montserrat` on its own drops to the browser default serif whenever the webfont fails to load. */ font-family: "Montserrat", Sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.35; text-align: left; } /* * Elementor's 45px "space between" setting adds `margin-inline: calc(-45px/2)` * to the list and its items. With one item per list that spacing does nothing * except drag the row 22px left of the widget's own edge, which would throw the * alignment out. Zeroed so the icon starts where the slide starts. */ .dpf-usp .elementor-widget-icon-list .elementor-icon-list-items { justify-content: flex-start; margin-inline: 0; } /* * The icon is lifted out of the flow and centred against the WHOLE block. * * It lives inside the list item alongside the heading, while the supporting * line is a separate widget below, so in normal flow it can only ever centre * against the heading — which left it sitting high once a second line * appeared. Positioning it against the slide centres it on both lines at once, * and the two text lines then carry a matching indent instead of relying on * the list's gap. * * Yellow on green rather than a green glyph on the grey: the accent earns its * place here, and the pairing clears contrast comfortably in a way yellow on * light grey never would. */ .dpf-usp .elementor-widget-icon-list .elementor-icon-list-icon { position: absolute; left: 0; /* top/bottom 0 with auto block margins, not top:50% + translate: the percentage was resolving against a different containing block and left the disc 10px high. This centres it inside the slide's padding box, which is exactly the two text lines. */ top: 0; bottom: 0; margin-block: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--dpf-green); } /* 44px = the 32px icon disc + a 12px gap. The heading needs it explicitly now that the icon no longer occupies space in the row. */ .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item > a > .elementor-icon-list-text { padding-inline-start: 44px; } .dpf-usp .elementor-widget-icon-list, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-items, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item, .dpf-usp .elementor-widget-icon-list .elementor-icon-list-text { text-align: left; } .dpf-usp .elementor-widget-icon-list .elementor-icon-list-item { margin-inline: 0; } /* ---- mobile ---- */ /* * Below 768px the carousel is hidden and this line takes its place. It used to * carry one of the four points; it now carries all four as small chips that * wrap, which costs one extra line of height at 390px and nothing at all on a * wider phone. */ .dpf-usp .dpf-usp__m { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; font-family: "Montserrat", Sans-serif; line-height: 1.2; } .dpf-usp .dpf-usp__m span { padding: 5px 11px; border: 1px solid var(--dpf-line); border-radius: 999px; background: #fff; color: var(--dpf-green); font-size: 12px; font-weight: 600; white-space: nowrap; } /* ---------------------------------------------------------------- notice */ .dpf-notice { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .dpf-notice p { margin: 0; font-size: clamp(11px, 2.4vw, 13px); } /* --------------------------------------------------- mobile control bar */ .dpf-hdr-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dpf-speed) ease; } .dpf-hdr-btn:hover { background: rgba(255, 255, 255, 0.14); } .dpf-hdr-btn svg { width: 22px; height: 22px; } .dpf-hdr-btn:focus, .dpf-hdr-btn:focus-visible { outline: 3px solid var(--dpf-green-mid); outline-offset: -3px; } .dpf-hdr-btn:focus:not(:focus-visible) { outline: 0; } /* Each bar must pivot about its own midpoint. `transform-origin: center` resolves against the viewBox (12,12) for SVG children, so both bars swung around the icon's centre and landed ~4px right of it — a lopsided cross. Explicit origins in viewBox units put the pivot on each bar. */ .dpf-hdr-btn--menu svg path { transition: transform var(--dpf-speed) ease, opacity var(--dpf-speed) ease; } .dpf-hdr-btn--menu .dpf-hdr-btn__top { transform-origin: 12px 6px; } .dpf-hdr-btn--menu .dpf-hdr-btn__mid { transform-origin: 12px 12px; } .dpf-hdr-btn--menu .dpf-hdr-btn__bot { transform-origin: 12px 18px; } .dpf-hdr-btn--menu[aria-expanded="true"] .dpf-hdr-btn__mid { opacity: 0; } .dpf-hdr-btn--menu[aria-expanded="true"] .dpf-hdr-btn__top { transform: translateY(6px) rotate(45deg); } .dpf-hdr-btn--menu[aria-expanded="true"] .dpf-hdr-btn__bot { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1024px) { /* These were gated on a class JS added after load, so the browser painted the expanded header first and then shrank it — the layout shift. Making the collapsed state the default removes the reflow entirely;