/* Local static export overrides — force visibility for images that the live Squarespace runtime would normally reveal via JS lazy-loader / animation system. */
/* Font swap: the theme's heading + site-navigation + header-button fonts were all
the account-bound Adobe Typekit face "alternate-gothic-atf", which deauthorizes
when the Squarespace sub is cancelled. Override every one of them to the free,
self-hostable Google Font Oswald (its closest condensed-gothic match), loaded
via the Google Fonts in each page . site.css sets these to the old
face; this :root override wins because local-overrides.css loads after it.
(Nav + header-button vars are SEPARATE from --heading-font-font-family — they
must be overridden too, or the nav falls back to a browser default font.) */
:root {
--heading-font-font-family: "Poppins";
--site-navigation-font-font-family: "Oswald";
--header-button-font-font-family: "Oswald";
}
/* Sticky header opaque (JP 2026-06-15): the nav bar is solid black; the
announcement bar is the brand pink. The outer .header is painted black to back
the whole region so no translucent inner layer shows the page through. */
.header,
.header-background,
.header-background.theme-bg--primary {
background-color: #000 !important;
background: #000 !important;
}
/* In case the theme dims a layer via opacity rather than background alpha. */
.header-background,
.header-background.theme-bg--primary { opacity: 1 !important; }
/* Announcement bar = black bg, white text (JP revert from the pink trial). */
.header-announcement-bar-wrapper,
.sqs-announcement-bar-dropzone,
.sqs-announcement-bar {
background-color: #000 !important;
background: #000 !important;
}
.header-announcement-bar-wrapper,
.header-announcement-bar-wrapper * {
color: #fff !important;
}
img[data-load="false"],
img[data-image],
img[data-loader="sqs"] {
opacity: 1 !important;
}
.eventlist-column-thumbnail img,
[data-animation-role="image"] img {
opacity: 1 !important;
}
[data-animation-role="image"]:not([data-animation-override]) {
opacity: 1 !important;
visibility: visible !important;
clip-path: none !important;
}
.sqs-image-content {
opacity: 1 !important;
transform: none !important;
}
/* Gallery reel (the section below "Join the club"): live JS positions figures
absolutely and rotates them; without JS they stack/oversize. Render as a
clean responsive square grid instead — 4-up on desktop, 2-up on mobile —
so the images are a sensible, viewable size rather than half-screen tall. */
.gallery-reel { height: auto !important; }
.gallery-reel-list {
position: relative !important;
height: auto !important;
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
overflow: visible !important;
}
.gallery-reel-item {
position: relative !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
aspect-ratio: 1 / 1;
}
.gallery-reel-item-wrapper {
position: relative !important;
z-index: 0 !important;
width: 100%;
height: 100%;
}
.gallery-reel-item-src {
display: block !important;
opacity: 1 !important;
position: relative !important;
width: 100%;
height: 100%;
}
.gallery-reel-item-src img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.gallery-reel-controls { display: none !important; }
@media (max-width: 767px) {
.gallery-reel-list { grid-template-columns: repeat(2, 1fr); }
}
article.entry,
.entry {
opacity: 1 !important;
}
/* Blog post body typography consistency.
Post copy lives inside a website.components.html component block whose
.sqs-html-content does not reliably inherit the theme font variables in the
static export, so it can render in a browser-default fallback font that looks
inconsistent with the rest of the site. Force the theme fonts here — body =
Poppins, headings = Oswald — with literal fallbacks so the rule
is correct whether or not the CSS variable is in scope at this node. */
.blog-item-content .sqs-html-content,
.blog-item-content .sqs-html-content p,
.blog-item-content .sqs-html-content li,
.blog-item-content .sqs-html-content a,
.blog-item-content .sqs-html-content blockquote,
.blog-item-content .sqs-html-content strong,
.blog-item-content .sqs-html-content em {
font-family: var(--body-font-font-family, "Poppins"), "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.blog-item-content .sqs-html-content h1,
.blog-item-content .sqs-html-content h2,
.blog-item-content .sqs-html-content h3,
.blog-item-content .sqs-html-content h4,
.blog-item-content .sqs-html-content h5,
.blog-item-content .sqs-html-content h6 {
font-family: var(--heading-font-font-family, "Oswald"), "Poppins", "Helvetica Neue", Arial, sans-serif !important;
}
/* Header "More" dropdown — de-bloats the desktop nav by grouping Contact,
Careers and FAQs. Self-contained hover/focus dropdown (no Squarespace JS
dependency). Trigger inherits the surrounding nav link styling; the panel
uses the site's dark palette. Desktop only — the mobile hamburger menu keeps
the items inline. */
.ew-more-item { position: relative; }
.ew-more-trigger { cursor: pointer; }
.ew-more-menu {
display: none;
position: absolute;
top: 100%;
left: -1em; /* left-justified under the trigger, like the Menu folder */
min-width: 200px;
/* No margin gap between trigger and panel — the panel sits flush under "More"
with internal top padding for spacing, so moving the mouse from the trigger
into the submenu never leaves the :hover area (mirrors the Menu dropdown). */
padding: 14px 1em 8px;
background: var(--solidHeaderBackgroundColor, rgba(0, 0, 0, 0.85)); /* translucent, matches Menu */
text-align: left;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border-radius: 2px;
z-index: 99999;
}
.ew-more-item:hover .ew-more-menu,
.ew-more-item:focus-within .ew-more-menu { display: block; }
/* Trigger + items inherit the theme nav link colour + font automatically,
since both are `.header-nav-item a` (header is white-on-dark here). We only
add layout + the dropdown panel. Explicit colour fallback keeps items legible
on the dark panel if the nav colour var is ever light-on-light. */
.ew-more-menu a {
display: block;
padding: 9px 0;
white-space: nowrap;
text-align: left;
color: var(--solidHeaderNavigationColor, #fff);
text-decoration: none;
}
.ew-more-menu a:hover { opacity: 0.7; }
/* Gluten-free-commitment lab report — collapse to the first 3 rows with a
pure-CSS "See all" toggle (no JS). The checkbox precedes both the extra rows
and the button, so the general-sibling (~) selectors apply. */
.gfc-more-toggle { position: absolute; left: -9999px; opacity: 0; }
.gfc-report-extra { display: none; }
.gfc-more-toggle:checked ~ .gfc-report-extra { display: block; }
.gfc-more-btn {
display: inline-block;
margin: 16px 0 4px;
padding: 9px 22px;
cursor: pointer;
border: 1px dashed rgba(227, 168, 154, 0.5);
color: #e3a89a;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
user-select: none;
}
.gfc-more-btn:hover { background: rgba(227, 168, 154, 0.1); }
.gfc-more-btn::after { content: "See all 29 results"; }
.gfc-more-toggle:checked ~ .gfc-more-btn::after { content: "Show less"; }
/* GF page — "See our actual reviews on" platform links */
.gfc-reviews-cta { margin: 38px 0 14px; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: #b8aea4; }
.gfc-review-links { display: flex; flex-wrap: wrap; gap: 12px; }
.gfc-review-links a {
display: inline-block; padding: 10px 22px;
border: 1px solid rgba(227, 168, 154, 0.5); border-radius: 2px;
color: #e3a89a; text-decoration: none;
font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
transition: background 0.2s, color 0.2s;
}
.gfc-review-links a:hover { background: #e3a89a; color: #1a1a1a; }
/* GF page — visitor comment / feedback form */
.gfc-comment-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin-top: 24px; }
.gfc-comment-form input, .gfc-comment-form textarea {
width: 100%; padding: 12px 14px;
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff; font-family: inherit; font-size: 0.95rem; border-radius: 2px;
}
.gfc-comment-form input::placeholder, .gfc-comment-form textarea::placeholder { color: #8d857c; }
.gfc-comment-form textarea { resize: vertical; }
.gfc-comment-form button {
align-self: flex-start; padding: 12px 28px; cursor: pointer;
background: #e3a89a; color: #1a1a1a; border: none; border-radius: 2px;
font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}
.gfc-comment-form button:hover { background: #fff; }
.gfc-comment-note { margin-top: 14px; font-size: 0.72rem; color: #8d857c; }
/* Disqus thread on the GF page — transparent container so it blends with the
black section instead of a white box. The comment box's OWN colours live in
the Disqus iframe; set them in Disqus admin → Appearance → Color scheme = Dark. */
.gfc-disqus { margin-top: 28px; background: transparent; padding: 0; }
#disqus_thread { color-scheme: dark; }
/* GF page — "share this page" CTA (top / middle / bottom) */
.gfc-share-section { padding-top: 28px; padding-bottom: 28px; }
.gfc-share { border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); padding: 22px 0; }
.gfc-share-text { font-style: italic; color: #c8bfb6; max-width: 640px; margin: 0 0 16px; }
.gfc-share-links { display: flex; flex-wrap: wrap; gap: 10px; }
.gfc-share-btn {
display: inline-block; padding: 9px 18px; cursor: pointer;
background: transparent; border: 1px solid rgba(227,168,154,0.5); border-radius: 2px;
color: #e3a89a; text-decoration: none; font-family: inherit;
font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
transition: background .2s, color .2s;
}
.gfc-share-btn:hover { background: #e3a89a; color: #1a1a1a; }
/* GF page — tighten the large inter-section gaps. Every section carries
clamp(60px,10vw,140px) vertical padding; reduce it globally so sections sit
closer (like "The certification journey" etc.), with the share CTAs and their
immediate neighbours kept extra-tight. */
.gfc-page section.page-section {
padding-top: clamp(38px, 5vw, 64px) !important;
padding-bottom: clamp(38px, 5vw, 64px) !important;
}
.gfc-page section.page-section.gfc-share-section {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
.gfc-page section.page-section.gfc-share-section + section.page-section {
padding-top: 26px !important;
}
.gfc-page section.page-section:has(+ .gfc-share-section) {
padding-bottom: 26px !important;
}
/* Floating translucent back-to-top chevron (bottom-right). Translucent-white
circle so it lifts off the dark background. */
.ew-to-top {
position: fixed; right: 22px; bottom: 28px; z-index: 9998;
width: 56px; height: 56px; border-radius: 50%;
background: rgba(255,255,255,0.2);
-webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
border: 1px solid rgba(255,255,255,0.5); color: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.28);
cursor: pointer; display: none; align-items: center; justify-content: center;
opacity: 0; transition: opacity .25s, background .2s;
}
.ew-to-top.show { display: flex; opacity: 1; }
.ew-to-top:hover { background: rgba(255,255,255,0.35); }
.ew-to-top svg { width: 24px; height: 24px; }
/* Back-to-top chevron: clear the full-width Reserve Now bar on mobile (≤767px). */
@media (max-width: 767px) { .ew-to-top { bottom: 84px; } }
/* Hide the floating Reserve Now button when the footer's Reserve CTA is in view. */
.floating-reserve-btn.ew-hidden { opacity: 0 !important; pointer-events: none !important; }
/* sr-only (visually hidden but accessible/SEO) */
.ew-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
/* Sticky header sitewide — desktop + mobile (JP 2026-06-15). Theme ships the
header position:absolute with the fixed-header tweak OFF; force it sticky so
the nav stays visible on scroll. .header-background (theme-bg--primary) keeps
it opaque, so content stays readable underneath. */
.header {
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
}
/* Mobile menu overlay reveal (paired with EW-NAV in ew-enhancements.js).
The theme reveals .header-menu on body.header--menu-open, but force it
explicitly so it never depends on the (uninitialised) SQSP JS or class
resolution — and keep it above the sticky header. */
body.header--menu-open .header-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
z-index: 1001 !important;
}
body.header--menu-open .header-menu .header-menu-nav-list,
body.header--menu-open .header-menu .header-menu-cta,
body.header--menu-open .header-menu .header-menu-actions {
transform: translateY(0) !important;
}
/* Mobile sticky-header fix: the theme's `overflow-x:clip` on Body/html
(custom.css) breaks position:sticky on mobile browsers (Safari). The wide
#background-image* elements that clip guarded are display:none on mobile, so
restoring visible overflow here is safe and lets the sticky header work. */
@media (max-width: 767px) {
html, body { overflow-x: visible !important; }
}
/* Sticky-header cleanup (JP 2026-06-15): header is sticky + a floating Reserve
button already exists, so drop the redundant in-header Reserve CTA. (Header
background left at the theme's translucent default — opaque black looked off.) */
.header-actions-action--cta { display: none !important; }
/* Safari only (macOS + iOS): the floating Reserve button renders too tall and
the lower portion looks oversized. -webkit-hyphens:none matches Safari only
(Chrome/Firefox don't), so this trims the button height ~in half there. */
@supports (-webkit-hyphens: none) {
.floating-reserve-btn { padding-top: 10px !important; padding-bottom: 10px !important; }
}
@media (max-width: 767px) {
/* Mobile "Menu" accordion (paired with ew-enhancements.js). The SQSP overlay nav is a
SLIDE view: every .header-menu-nav-folder is display:none + position:absolute + top:0 +
min-height/max-height:100% + transform:translatex(100%) + content flex-grow:1.
HEADLESS-VERIFIED (rendered DOM, pages.dev 390x844): neutralizing only [data-folder="/menu"]
made IT in-flow (235.9px) — but What's On/Gallery live in the SEPARATE [data-folder="root"]
branch, which still computed position:absolute/height:682px (a full-screen slide-view) and
OVERLAID the in-flow /menu. Fix: make the ROOT folder in-flow TOO, so the whole menu is ONE
normal-flow stack and the /menu accordion pushes the siblings DOWN. Keep it scrollable
(max-height:100vh + overflow-y:auto) so a long menu doesn't run off-screen. */
.header-menu-nav-folder--active,
.header-menu-nav-folder[data-folder="root"] {
display: block !important;
position: static !important;
top: auto !important;
left: auto !important;
min-height: 0 !important;
max-height: 100vh !important;
height: auto !important;
transform: none !important;
overflow-y: auto !important;
}
.header-menu-nav-folder[data-folder="/menu"] {
display: block !important;
position: static !important;
top: auto !important;
left: auto !important;
width: 100% !important;
min-height: 0 !important; /* CRITICAL: the theme's min-height:100% defeats height:0 */
max-height: 0 !important; /* collapsed; the accordion animates this open */
transform: none !important;
overflow: hidden !important;
transition: max-height 0.28s ease !important;
}
.header-menu-nav-folder[data-folder="/menu"] .header-menu-nav-folder-content {
flex-grow: 0 !important; /* else the content stretches to fill height even in flow */
}
.header-menu-nav-folder[data-folder="/menu"].ew-folder-open {
max-height: 80vh !important; /* 3 items fit well under 80vh */
overflow: visible !important; /* no inner scroller — the root folder is the single
scroll container (Regime-B M1: avoid nested scroll) */
}
/* The "Back" control is slide-view-only — hide it in the accordion. */
.header-menu-nav-folder[data-folder="/menu"] .header-menu-controls {
display: none !important;
}
/* EXACTLY ONE control glyph (never two, never zero). HEADLESS-VERIFIED: the theme's second
caret is NOT a pseudo-element (so a `::after{content:none}` missed it) — it's a real inline
SVG in `.header-dropdown-icon` (href=#openArrowHead), hidden pre-open / shown on
.ew-folder-trigger-open. Hide that SVG; OWN a single rotating ">" caret on the trigger. */
a[data-folder-id="/menu"] .header-dropdown-icon { display: none !important; }
a[data-folder-id="/menu"] .header-nav-folder-title-text::after {
content: "\203A"; /* › — a clean ">" caret, the single expand control */
display: inline-block;
margin-left: 0.35em; /* breathing room so the › doesn't touch the "MENU" text */
transition: transform 0.15s ease;
}
a[data-folder-id="/menu"].ew-folder-trigger-open .header-nav-folder-title-text::after {
transform: rotate(90deg);
}
/* Submenu (Food/Wines/Drinks) link text — ~33px; shrink for mobile (JP). The items are bare
inside .header-menu-nav-item (NO .header-menu-nav-item-content wrapper — Regime-B C1),
so target the anchor directly. */
.header-menu-nav-folder[data-folder="/menu"] .header-menu-nav-item a {
font-size: 1.4rem !important;
}
/* Homepage welcome/Opening-Hours fluid section: the welcome text overflows its
allotted grid rows on mobile and overlaps Opening Hours. Let the section flow
as a normal vertical stack on mobile so the blocks separate with real spacing
(desktop grid is unchanged). */
.fluid-engine.fe-69bbe0909b81f89acc858e88 {
display: flex !important;
flex-direction: column !important;
}
.fluid-engine.fe-69bbe0909b81f89acc858e88 > .fe-block {
position: relative !important;
width: 100% !important;
grid-area: auto !important;
margin: 0 0 1.5rem !important;
}
}
/* ============================================================
Bottom-of-page polish (verified live 2026-06-18)
============================================================ */
/* SITE-WIDE: the Squarespace footer section carries section-height--medium +
vertical-alignment--bottom, which generate ~338px of top padding on
.content-wrapper and leave a large empty band above the EDDY+WOLFF footer
logo. Tighten it so the footer sits closer to the preceding section. */
footer .page-section.section-height--medium.vertical-alignment--bottom > .content-wrapper {
padding-top: 96px !important;
}
/* GF Commitment page only (these classes exist only on that page).
1) Merge the "Recognised by" badges block and the FINAL "Know someone…"
share block into one solid-black section. The adjacent-sibling scope
leaves the UPPER share section (grey texture) untouched. */
.gfc-badges + .gfc-share-section {
background-color: #0a0a0a !important;
background-image: none !important;
}
/* 2) Give "A standing invitation" the grey body texture instead of its dark
photo overlay, so it reads as a visually distinct section below the
black block. (Transparent reveals the same body texture the share
section sits on, matching that look exactly.) */
.gfc-cta {
background-color: transparent !important;
background-image: none !important;
}