/* Local static export overrides — force visibility for images that the live Squarespace runtime would normally reveal via JS lazy-loader / animation system. */ /* Heading font swap: the theme's --heading-font-font-family is the account-bound Adobe Typekit face "alternate-gothic-atf", which deauthorizes when the Squarespace sub is cancelled. Override it to the free, self-hostable Google Font Oswald (its closest condensed-gothic match), loaded via the Google Fonts in each page . This :root override wins over site.css because local-overrides.css loads after it. */ :root { --heading-font-font-family: "Oswald"; } 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: 50%; transform: translateX(-50%); min-width: 170px; padding: 8px 0; margin-top: 6px; background: #0c0c0c; 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 20px; white-space: nowrap; 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; } /* keep the mobile menu overlay above the now-stickier header when open */ body.header--menu-open .header-menu { z-index: 1001; } /* 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; } }