/* * Global site chrome overrides (header + footer Elementor templates). * Loaded on every page (the header/footer are global Theme Builder * templates, so a widget-render enqueue never fires for them). * * Element IDs below belong to the NG Header (.elementor-16) and NG Footer * (.elementor-location-footer) templates. If those templates are rebuilt * (rather than imported) on staging, re-confirm the IDs. */ /* ── R2-20: dark home background (the real scroll-glitch fix) ────────── */ /* The home page is white. The dark theme paints individual sections, so any gap between them (and the strip the sticky search bar slides out of during the FB8 auto-hide) lets the white body show through and reads as a white flash/gap. Darkening the sticky wrapper alone (restaurant-lookup.css) did not cover it, because the bar translates away and reveals the body behind it. Paint the home body the dark surface so there is no white to show. Verified on the live staging DOM at the mobile viewport. */ body.home { background-color: var(--ng-color-surface, #1A1714) !important; } /* ── #5: empty mobile-only header container creating dead space ──────── */ /* f8cbf0d is hidden on desktop/tablet already and renders empty on mobile. */ .elementor-element-f8cbf0d { display: none !important; } /* ── Header slim-down (tablet + desktop) ────────────────────────────── The header rendered ~269px tall. Cap the logo to 250px wide (height follows the aspect, ~113px) and trim the nav-row container (35ca916) top spacing. Scoped to >=768px; the mobile header is a separate compact layout and is left untouched. */ @media (min-width: 768px) { .elementor-16 .elementor-element-2700252 img { max-width: 250px !important; height: auto !important; } .elementor-16 .elementor-element.elementor-element-35ca916 { padding-top: 4px !important; margin-top: 26px !important; } /* R3: the header container carried 20px top+bottom padding, so the logo+nav group sat above the optical centre. Trim the bottom to 8px so the nav reads as centred (JP). */ .elementor-16 .elementor-element.elementor-element-026cee3 { padding-bottom: 8px !important; } } /* ── Footer subscribe band: collapse the empty container ─────────────── [ng_subscribe_band] self-suppresses on the front page, stories, story single and restaurant single (those carry their own in-content newsletter), but the shortcode widget still leaves its container's 10+10px padding as a 20px dead strip in the footer. When the shortcode renders nothing, drop the container; on every other page the band renders and the rule does not match. */ .elementor-location-footer .elementor-element-fbsubc24:has(.elementor-shortcode:empty) { display: none !important; } /* ── #3: footer typography + rhythm to match Figma ──────────────────── */ /* "Our Partners" - R2-08: white + slightly bigger (was 14px #808080), matching the legal links' size while the legal links go grey + smaller (R2-09). */ .elementor-location-footer .elementor-element-d9fb6aa, .elementor-location-footer .elementor-element-d9fb6aa * { font-size: 16px; line-height: 1.66; color: #FFFFFF; } /* "Our Partners" heading carried a default

bottom margin (14.4px) that over-spaced it from the logos - drop it to sit per design (JP 2026-06-17). */ .elementor-location-footer .elementor-element-d9fb6aa p { margin-bottom: 0; } /* Sponsor-logo row had margin-left:-10px, juttering it left of the footer content column (past the parent edge) - align it (JP 2026-06-17). */ .elementor-location-footer .elementor-element-2ccfd37 { margin-left: 0; } /* Copyright - Figma: Open Sans 12px #808080 (was 16px #7A7A7A) */ .elementor-location-footer .elementor-element-ec4c6ef, .elementor-location-footer .elementor-element-ec4c6ef * { font-size: 12px; line-height: 1.33; color: #808080; } /* Footer top breathing room - Figma inner block pad-top 48 (was 30) */ .elementor-location-footer .elementor-element-61bb96a { padding-top: 48px; border: 0 !important; /* drop the Elementor section border */ } /* Vertical rhythm between footer sections - Figma gap 32 (was default). */ .elementor-location-footer .elementor-element-c709b9f { gap: 32px; } /* Footer content (partners/legal/copyright) on the site's 32px gutter at every width. c709b9f was inset ~126px (its own 106px padding + the parent's 20px). 61bb96a wraps only c709b9f, so zero the parent's side padding and let c709b9f own the gutter with the same min(100% - 64px, 1376px) formula used site-wide (leaving the parent's 20px in place would stack to a 52px gutter). Tablet + desktop; mobile keeps its own Elementor padding. */ @media (min-width: 768px) { .elementor-location-footer .elementor-element-61bb96a { padding-left: 0 !important; padding-right: 0 !important; } .elementor-location-footer .elementor-element-c709b9f { width: min(100% - 64px, 1376px); max-width: none; padding-left: 0 !important; padding-right: 0 !important; } } /* ── FB20: footer social icon row (output by the [ng_footer_socials] shortcode) ── */ .nge-fsocial-row { display: flex; gap: 20px; align-items: center; justify-content: center; /* mobile: centred */ margin-top: 12px; } .nge-fsocial { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; /* WCAG 2.5.8 target size; the icon stays 22px, centred */ min-height: 24px; color: #FFFFFF; /* R2-07: white default (was #808080), yellow on hover below */ transition: color .2s ease; } .nge-fsocial:hover, .nge-fsocial:focus, .nge-fsocial:focus-visible { color: #E7B040; } .nge-fsocial__icon { width: 22px; height: 22px; display: block; fill: currentColor; } @media (min-width: 900px) { .nge-fsocial-row { justify-content: flex-start; } /* desktop: left-aligned */ } /* WCAG 2.5.8 target size: give the footer nav/legal menu links a >=24px tap height (they rendered at 20px). Scoped to the global footer template so the header + mobile menu are untouched. */ .elementor-location-footer a.elementor-item { display: inline-flex; align-items: center; min-height: 24px; } /* R2-09: legal links (Privacy Policy / Terms of Service) - grey + smaller, the reverse of "Our Partners" going white + bigger (R2-08). The nav-menu widget (a79fbd3) sets the item colour to #FFFFFF inline, so override with !important. */ .elementor-location-footer .elementor-element-a79fbd3 a.elementor-item, .elementor-location-footer .elementor-element-a79fbd3 .elementor-item { font-size: 14px; color: #808080 !important; } .elementor-location-footer .elementor-element-a79fbd3 a.elementor-item:hover, .elementor-location-footer .elementor-element-a79fbd3 a.elementor-item:focus, .elementor-location-footer .elementor-element-a79fbd3 a.elementor-item:focus-visible { color: #E7B040 !important; } /* R2-10: sponsor logos under "Our Partners". True-colour logos sit on white chips so they read on the dark footer. Equal-size chips, logo contained. */ .nge-sponsor-logos-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; justify-content: center; /* mobile: centred */ } .nge-sponsor-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 200px; height: 60px; padding: 7px 13px; background: #FFFFFF; border-radius: 8px; } .nge-sponsor-logo img { display: block; width: auto; height: auto; max-width: 174px; max-height: 44px; object-fit: contain; } /* R3: Woolworths is a wide, thin wordmark and reads smaller than TabletPOS at the same width. Give its chip + logo box more room so it renders ~25% bigger. Bump to taste. */ .nge-sponsor-logo--woolworths { width: 250px; } .nge-sponsor-logo--woolworths img { max-width: 218px; max-height: 55px; } @media (min-width: 900px) { .nge-sponsor-logos-row { justify-content: flex-start; } /* desktop: left-aligned */ }