/* ==========================================================================
Antidote Kitchen — Locations experience
Scoped stylesheet. EVERY selector is prefixed with `body.ak-loc-page`,
which is only added to the three new location pages by the
antidote-locations mu-plugin. Nothing here can reach any existing page.
========================================================================== */
/* TWO SCOPES, deliberately separate.
----------------------------------
`ak-hdr` — "the Antidote header renders on this page". Everything that
styles the header hangs off this, so the header can be
grafted onto a page the theme owns (/contact/, the North
Adelaide menu page) without dragging page-level treatment
along with it.
`ak-loc-page` — "this is one of the built location pages". Only the
page-level treatment below uses it: background, base font,
and the anti-overflow clamp. Those must NOT reach a grafted
page, whose own background, fonts and Elementor container
widths belong to the theme.
Every built location page carries BOTH classes, so nothing about them
changes. A grafted page carries only `ak-hdr`. */
body.ak-loc-page,
body.ak-hdr {
--ak-green: #2f433e; /* sampled from the Clare Valley venue wall */
--ak-green-dark: #1f2e2a;
--ak-green-deep: #16211e;
--ak-cream: #f6f1e7;
--ak-brown: #342800; /* existing Antidote brand colour */
--ak-line: rgba(246, 241, 231, 0.22);
--ak-header-h: 92px;
--ak-display: "Kalnia Medam", "Assistant", "Times New Roman", serif;
--ak-body: "Roboto", "Open Sans", -apple-system, "Segoe UI", sans-serif;
--ak-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Page-level treatment — built location pages only. */
body.ak-loc-page {
background-color: var(--ak-green-deep);
overflow-x: hidden; /* belt & braces against horizontal scroll */
font-family: var(--ak-body);
}
/* No element on these pages may ever push the page sideways. Deliberately
left on `ak-loc-page`: clamping `.e-con` / `.e-con-inner` would override
Elementor's own boxed-container width on a grafted page. */
body.ak-loc-page,
body.ak-loc-page .ak-root,
body.ak-loc-page .e-con,
body.ak-loc-page .e-con-inner {
max-width: 100%;
}
body.ak-loc-page img,
body.ak-loc-page iframe {
max-width: 100%;
}
/* --------------------------------------------------------------------------
1. Header (new — only ever rendered on these three pages)
-------------------------------------------------------------------------- */
body.ak-hdr .ak-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 999;
background-color: transparent;
transition: background-color 0.4s var(--ak-ease), backdrop-filter 0.4s var(--ak-ease),
box-shadow 0.4s var(--ak-ease);
}
body.ak-hdr.ak-scrolled .ak-header {
background-color: rgba(22, 33, 30, 0.92);
backdrop-filter: saturate(140%) blur(10px);
box-shadow: 0 1px 0 var(--ak-line);
}
body.ak-hdr .ak-header__logo img {
height: 52px;
width: auto;
object-fit: contain;
display: block;
transition: height 0.4s var(--ak-ease);
}
body.ak-hdr.ak-scrolled .ak-header__logo img {
height: 44px;
}
/* Nav links are real Elementor Button widgets styled down to text links,
so an admin can retitle / relink them visually. */
body.ak-hdr .ak-navlink .elementor-button {
background-color: transparent;
border: 0;
padding: 10px 0;
color: var(--ak-cream);
font-family: var(--ak-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
fill: currentColor;
position: relative;
transition: opacity 0.3s var(--ak-ease);
}
body.ak-hdr .ak-navlink .elementor-button::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 4px;
height: 1px;
background-color: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.4s var(--ak-ease);
}
body.ak-hdr .ak-navlink .elementor-button:hover::after,
body.ak-hdr .ak-navlink .elementor-button:focus-visible::after {
transform: scaleX(1);
}
/* Booking pill in the header */
body.ak-hdr .ak-navbtn .elementor-button {
background-color: var(--ak-cream);
color: var(--ak-green-dark);
border-radius: 999px;
padding: 13px 26px;
font-family: var(--ak-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
line-height: 1;
transition: background-color 0.35s var(--ak-ease), color 0.35s var(--ak-ease),
transform 0.35s var(--ak-ease);
}
body.ak-hdr .ak-navbtn .elementor-button:hover {
background-color: var(--ak-green);
color: var(--ak-cream);
transform: translateY(-1px);
}
/* Minimal header — /locations/ landing page only.
Yolk-style: full-width, fixed, transparent over the split, logo centred and
nothing else. The two location pages keep the full header defined above. */
body.ak-hdr .ak-header--logo .ak-header__logo img {
height: 66px;
}
/* The landing page is a single viewport and does not scroll, so the mark keeps
a constant size rather than shrinking like the location-page header does. */
body.ak-hdr.ak-scrolled .ak-header--logo .ak-header__logo img {
height: 66px;
}
body.ak-hdr .ak-header--logo .ak-header__logo .elementor-widget-image,
body.ak-hdr .ak-header--logo .ak-header__logo .elementor-image,
body.ak-hdr .ak-header--logo .ak-header__logo a {
display: block;
margin-inline: auto;
}
@media (min-width: 768px) and (max-width: 1024px) {
body.ak-hdr .ak-header--logo .ak-header__logo img,
body.ak-hdr.ak-scrolled .ak-header--logo .ak-header__logo img {
height: 56px;
}
}
@media (max-width: 767px) {
body.ak-hdr .ak-header--logo .ak-header__logo img,
body.ak-hdr.ak-scrolled .ak-header--logo .ak-header__logo img {
height: 46px;
}
}
/* --------------------------------------------------------------------------
2. Locations landing — full-screen 50 / 50 split
-------------------------------------------------------------------------- */
body.ak-hdr .ak-split {
min-height: 100vh;
min-height: 100svh; /* honours mobile browser chrome */
}
body.ak-hdr .ak-panel {
position: relative;
overflow: hidden;
min-height: 100vh;
min-height: 100svh;
isolation: isolate;
}
/* Hairline between the two panels, exactly 1px, no layout shift. */
body.ak-hdr .ak-panel + .ak-panel::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background-color: rgba(246, 241, 231, 0.16);
z-index: 3;
}
/* The photo is a genuine Elementor Image widget, cropped by object-fit so it
behaves like a background but stays swappable in the editor. */
body.ak-hdr .ak-panel__media {
position: absolute;
inset: 0;
z-index: 0;
margin: 0;
pointer-events: none;
}
body.ak-hdr .ak-panel__media > * {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
}
body.ak-hdr .ak-panel__media .elementor-widget-container,
body.ak-hdr .ak-panel__media .elementor-image,
body.ak-hdr .ak-panel__media figure {
width: 100%;
height: 100%;
margin: 0;
}
body.ak-hdr .ak-panel__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
display: block;
transform: scale(1.01);
transition: transform 1.1s var(--ak-ease), filter 0.6s var(--ak-ease);
will-change: transform;
}
/* Readability scrim */
body.ak-hdr .ak-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(16, 24, 22, 0.42) 0%,
rgba(16, 24, 22, 0.26) 42%,
rgba(16, 24, 22, 0.58) 100%
);
transition: opacity 0.6s var(--ak-ease);
}
body.ak-hdr .ak-panel__content {
position: relative;
z-index: 2;
}
/* Hover: slow cinematic push-in, scrim lifts slightly. */
@media (hover: hover) and (pointer: fine) {
body.ak-hdr .ak-panel:hover .ak-panel__media img,
body.ak-hdr .ak-panel:focus-within .ak-panel__media img {
transform: scale(1.07);
}
body.ak-hdr .ak-panel:hover::after,
body.ak-hdr .ak-panel:focus-within::after {
opacity: 0.72;
}
}
@media (prefers-reduced-motion: reduce) {
body.ak-hdr .ak-panel__media img,
body.ak-hdr .ak-panel::after,
body.ak-hdr .ak-header,
body.ak-hdr .ak-cta .elementor-button {
transition: none !important;
}
body.ak-hdr .ak-panel:hover .ak-panel__media img {
transform: scale(1.01);
}
}
body.ak-hdr .ak-panel__eyebrow {
font-family: var(--ak-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(246, 241, 231, 0.82);
}
body.ak-hdr .ak-panel__note {
font-family: var(--ak-body);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1.7;
color: rgba(246, 241, 231, 0.8);
}
/* --------------------------------------------------------------------------
3. The dark-green pill button (shared by the split panels and the CTAs)
-------------------------------------------------------------------------- */
body.ak-hdr .ak-cta .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 286px;
padding: 21px 44px;
border: 1px solid transparent;
border-radius: 999px;
background-color: var(--ak-green);
color: var(--ak-cream);
font-family: var(--ak-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
line-height: 1;
text-align: center;
box-shadow: 0 14px 34px rgba(10, 16, 14, 0.28);
transition: background-color 0.4s var(--ak-ease), color 0.4s var(--ak-ease),
transform 0.4s var(--ak-ease), box-shadow 0.4s var(--ak-ease);
}
body.ak-hdr .ak-cta .elementor-button:hover,
body.ak-hdr .ak-cta .elementor-button:focus-visible {
background-color: var(--ak-cream);
color: var(--ak-green-dark);
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(10, 16, 14, 0.34);
}
body.ak-hdr .ak-cta .elementor-button:focus-visible {
outline: 2px solid var(--ak-cream);
outline-offset: 4px;
}
/* Outline variant, used as the secondary hero action */
body.ak-hdr .ak-cta--ghost .elementor-button {
background-color: transparent;
border-color: rgba(246, 241, 231, 0.72);
color: var(--ak-cream);
box-shadow: none;
min-width: 230px;
}
body.ak-hdr .ak-cta--ghost .elementor-button:hover {
background-color: var(--ak-cream);
border-color: var(--ak-cream);
color: var(--ak-green-dark);
}
/* --------------------------------------------------------------------------
4. Location page building blocks
-------------------------------------------------------------------------- */
body.ak-hdr .ak-hero {
position: relative;
min-height: 86vh;
min-height: 86svh;
}
body.ak-hdr .ak-eyebrow {
font-family: var(--ak-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(246, 241, 231, 0.8);
}
body.ak-hdr .ak-h1 {
font-family: var(--ak-display);
font-size: clamp(2.6rem, 6.4vw, 6.1rem);
font-weight: 600;
line-height: 0.98;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ak-cream);
margin: 0;
}
body.ak-hdr .ak-h2 {
font-family: var(--ak-display);
font-size: clamp(1.75rem, 3.3vw, 2.9rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: 0.02em;
text-transform: uppercase;
margin: 0;
}
body.ak-hdr .ak-lede {
font-family: var(--ak-body);
font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
font-weight: 300;
line-height: 1.85;
letter-spacing: 0.01em;
}
body.ak-hdr .ak-lede p:last-child {
margin-bottom: 0;
}
/* Info strip -------------------------------------------------------------- */
body.ak-hdr .ak-info {
background-color: var(--ak-green);
}
body.ak-hdr .ak-info__col {
border-left: 1px solid var(--ak-line);
}
body.ak-hdr .ak-info__col:first-child {
border-left: 0;
}
body.ak-hdr .ak-info__label {
font-family: var(--ak-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(246, 241, 231, 0.62);
}
body.ak-hdr .ak-info__body,
body.ak-hdr .ak-info__body p {
font-family: var(--ak-body);
font-size: 15px;
font-weight: 300;
line-height: 1.85;
color: var(--ak-cream);
}
body.ak-hdr .ak-info__body p:last-child {
margin-bottom: 0;
}
body.ak-hdr .ak-info__body strong {
font-weight: 600;
}
body.ak-hdr .ak-info__body a {
color: var(--ak-cream);
text-decoration: none;
border-bottom: 1px solid var(--ak-line);
transition: border-color 0.3s var(--ak-ease);
}
body.ak-hdr .ak-info__body a:hover {
border-bottom-color: var(--ak-cream);
}
/* Image-led sections ------------------------------------------------------ */
body.ak-hdr .ak-figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 2px;
}
body.ak-hdr .ak-figure--tall img {
aspect-ratio: 4 / 5;
height: auto;
}
body.ak-hdr .ak-figure--wide img {
aspect-ratio: 3 / 2;
height: auto;
}
body.ak-hdr .ak-tile {
overflow: hidden;
border-radius: 2px;
}
body.ak-hdr .ak-tile img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
display: block;
transform: scale(1.005);
transition: transform 0.9s var(--ak-ease);
}
@media (hover: hover) and (pointer: fine) {
body.ak-hdr .ak-tile:hover img {
transform: scale(1.06);
}
}
/* Map -------------------------------------------------------------------- */
body.ak-hdr .ak-map iframe {
filter: grayscale(1) contrast(0.92) brightness(0.94);
transition: filter 0.5s var(--ak-ease);
display: block;
width: 100%;
border: 0;
}
body.ak-hdr .ak-map:hover iframe {
filter: grayscale(0);
}
/* Footer ----------------------------------------------------------------- */
body.ak-hdr .ak-footer {
background-color: var(--ak-green-deep);
border-top: 1px solid var(--ak-line);
}
body.ak-hdr .ak-footer__body,
body.ak-hdr .ak-footer__body p {
font-family: var(--ak-body);
font-size: 13.5px;
font-weight: 300;
line-height: 1.95;
color: rgba(246, 241, 231, 0.74);
}
body.ak-hdr .ak-footer__body p:last-child {
margin-bottom: 0;
}
body.ak-hdr .ak-footer__body a {
color: rgba(246, 241, 231, 0.74);
text-decoration: none;
transition: color 0.3s var(--ak-ease);
}
body.ak-hdr .ak-footer__body a:hover {
color: var(--ak-cream);
}
/* Floating action bar (Clare Valley) ------------------------------------- */
/* Appearance is set in Elementor to match the homepage exactly; these rules
only add the hover affordance and stop the full-width fixed bar from
swallowing clicks on the content behind it. */
body.ak-hdr .ak-fbar {
pointer-events: none;
}
body.ak-hdr .ak-fbar > * {
pointer-events: auto;
}
body.ak-hdr .ak-fbtn .elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
transition: transform 0.3s var(--ak-ease), box-shadow 0.3s var(--ak-ease);
}
@media (hover: hover) and (pointer: fine) {
body.ak-hdr .ak-fbtn .elementor-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 16, 14, 0.3);
}
}
body.ak-hdr .ak-fbtn .elementor-button:focus-visible {
outline: 2px solid var(--ak-cream);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
5. Responsive — laptop, tablet landscape, tablet portrait, mobile
Elementor handles its own tablet (<=1024) / mobile (<=767) breakpoints;
these fill in laptop + the fine-grained sizing Elementor can't express.
-------------------------------------------------------------------------- */
/* Laptop / small desktop — 1025px to 1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
body.ak-hdr {
--ak-header-h: 84px;
}
body.ak-hdr .ak-cta .elementor-button {
min-width: 252px;
padding: 19px 38px;
font-size: 12px;
letter-spacing: 0.18em;
}
body.ak-hdr .ak-header__logo img {
height: 46px;
}
}
/* Tablet landscape — 900px to 1024px: keep the 50/50 split, shrink the pill */
@media (min-width: 900px) and (max-width: 1024px) {
/* Elementor already keeps row + 50% here; only the pill needs shrinking. */
body.ak-hdr .ak-cta .elementor-button {
min-width: 210px;
padding: 17px 26px;
font-size: 11px;
letter-spacing: 0.14em;
}
body.ak-hdr .ak-panel__eyebrow {
letter-spacing: 0.24em;
font-size: 10px;
}
}
/* Tablet portrait and below — stack the two locations */
@media (max-width: 899px) {
body.ak-hdr {
--ak-header-h: 78px;
}
body.ak-hdr .ak-split {
min-height: 0;
flex-direction: column !important;
}
body.ak-hdr .ak-panel {
min-height: 52vh;
min-height: 52svh;
width: 100% !important;
flex-basis: auto !important;
}
body.ak-hdr .ak-panel:first-child .ak-panel__content {
padding-top: 112px; /* clears the centred logo on the landing page */
}
body.ak-hdr .ak-panel + .ak-panel::before {
width: auto;
height: 1px;
right: 0;
bottom: auto;
}
body.ak-hdr .ak-info__col {
border-left: 0;
border-top: 1px solid var(--ak-line);
}
body.ak-hdr .ak-info__col:first-child {
border-top: 0;
}
}
/* Mobile — large, thumb-friendly panels and buttons */
@media (max-width: 767px) {
body.ak-hdr {
--ak-header-h: 70px;
}
body.ak-hdr .ak-header__logo img {
height: 40px;
}
body.ak-hdr.ak-scrolled .ak-header__logo img {
height: 36px;
}
body.ak-hdr .ak-panel {
min-height: 50vh;
min-height: 50svh;
}
/* First panel clears the fixed header so nothing is hidden behind it. */
body.ak-hdr .ak-panel:first-child .ak-panel__content {
padding-top: 96px; /* clears the centred logo on the landing page */
}
body.ak-hdr .ak-cta .elementor-button {
width: 100%;
max-width: 340px;
min-width: 0;
min-height: 58px; /* comfortable touch target */
padding: 19px 26px;
font-size: 12.5px;
letter-spacing: 0.16em;
}
body.ak-hdr .ak-cta--ghost .elementor-button {
min-width: 0;
}
body.ak-hdr .ak-navlink .elementor-button {
font-size: 11px;
letter-spacing: 0.12em;
padding: 7px 0;
}
body.ak-hdr .ak-navbtn .elementor-button {
font-size: 11px;
padding: 11px 18px;
letter-spacing: 0.1em;
}
body.ak-hdr .ak-panel__eyebrow {
font-size: 10px;
letter-spacing: 0.26em;
}
body.ak-hdr .ak-hero {
min-height: 78vh;
min-height: 78svh;
}
body.ak-hdr .ak-figure--tall img {
aspect-ratio: 3 / 4;
}
}
/* Very narrow phones */
@media (max-width: 380px) {
body.ak-hdr .ak-cta .elementor-button {
font-size: 11.5px;
letter-spacing: 0.12em;
padding: 18px 16px;
}
body.ak-hdr .ak-panel__note {
font-size: 12px;
}
}
/* --------------------------------------------------------------------------
6. Elementor editor niceties — keep absolutely-positioned media usable
-------------------------------------------------------------------------- */
body.ak-hdr.elementor-editor-active .ak-panel__media {
pointer-events: auto;
}
/* --------------------------------------------------------------------------
7. North Adelaide — fully responsive header (tablet + mobile)
Scoped to `body.ak-loc-north-adelaide`, the per-page class added by the
mu-plugin, so the Clare Valley page and the /locations/ landing page keep
the header they have today. Nothing here touches any pre-existing page.
Below 1024px the five nav items no longer fit on one line: the Elementor
container was stacking to a column and wrapping, which made the bar three
rows tall and pushed the logo past the left edge. Instead the bar becomes a
single row — logo left, hamburger right — and the nav becomes a drop-down
drawer flush under it. The drawer is positioned against the header itself
(top:100%) rather than a fixed offset, so it stays seamless no matter what
the header actually measures.
-------------------------------------------------------------------------- */
/* The toggle only ever exists below the breakpoint. */
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle {
display: none;
}
@media (max-width: 1024px) {
body.ak-hdr.ak-loc-north-adelaide {
--ak-header-h: 74px;
}
/* ---- The bar itself: one row, never taller than its content. ---- */
body.ak-hdr.ak-loc-north-adelaide .ak-header {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 14px 20px !important;
padding-left: max(20px, env(safe-area-inset-left)) !important;
padding-right: max(20px, env(safe-area-inset-right)) !important;
}
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open .ak-header {
background-color: rgba(22, 33, 30, 0.98);
backdrop-filter: saturate(140%) blur(10px);
box-shadow: 0 1px 0 var(--ak-line);
}
/* Logo keeps a constant height so the bar never changes size under the
open drawer. */
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo {
flex: 0 1 auto !important;
min-width: 0;
justify-content: flex-start !important;
padding: 0 !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo img,
body.ak-hdr.ak-loc-north-adelaide.ak-scrolled .ak-header__logo img {
height: 46px;
max-width: 100%;
}
/* ---- Hamburger ---- */
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 46px;
height: 46px; /* comfortable touch target */
margin: 0;
padding: 0;
border: 1px solid var(--ak-line);
border-radius: 999px;
background: transparent;
color: var(--ak-cream);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.3s var(--ak-ease), border-color 0.3s var(--ak-ease);
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle:focus-visible {
outline: 2px solid var(--ak-cream);
outline-offset: 2px;
}
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open .ak-navtoggle {
background-color: rgba(246, 241, 231, 0.1);
border-color: rgba(246, 241, 231, 0.4);
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle__bars {
display: block;
position: relative;
width: 20px;
height: 14px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle__bars span {
position: absolute;
left: 0;
width: 100%;
height: 1.5px;
border-radius: 2px;
background-color: currentColor;
transition: transform 0.32s var(--ak-ease), opacity 0.2s var(--ak-ease),
top 0.32s var(--ak-ease);
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle__bars span:nth-child(1) { top: 0; }
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle__bars span:nth-child(2) { top: 6.25px; }
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle__bars span:nth-child(3) { top: 12.5px; }
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open .ak-navtoggle__bars span:nth-child(1) {
top: 6.25px;
transform: rotate(45deg);
}
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open .ak-navtoggle__bars span:nth-child(2) {
opacity: 0;
}
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open .ak-navtoggle__bars span:nth-child(3) {
top: 6.25px;
transform: rotate(-45deg);
}
/* ---- Scrim behind the drawer, above the page, below the bar ---- */
body.ak-hdr.ak-loc-north-adelaide .ak-header::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
background-color: rgba(11, 18, 16, 0.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s var(--ak-ease), visibility 0.35s var(--ak-ease);
}
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open .ak-header::after {
opacity: 1;
visibility: visible;
}
/* ---- The drawer ---- */
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav {
position: absolute;
top: 100%; /* flush under the bar, whatever it measures */
left: 0;
right: 0;
width: auto !important;
max-width: 100%;
flex-direction: column !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 0 !important;
margin: 0;
padding: 8px max(20px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
background-color: rgba(22, 33, 30, 0.98);
backdrop-filter: saturate(140%) blur(10px);
border-top: 1px solid var(--ak-line);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
max-height: calc(100vh - var(--ak-header-h));
max-height: calc(100svh - var(--ak-header-h));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.32s var(--ak-ease), transform 0.32s var(--ak-ease),
visibility 0.32s var(--ak-ease);
}
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open .ak-header__nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Elementor renders container children either directly or inside
.e-con-inner depending on the content-width setting — cover both. */
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav > .e-con-inner {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav .elementor-element {
width: 100% !important;
max-width: 100% !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav .elementor-button-wrapper {
width: 100%;
}
/* Nav links read as a stacked list, each its own row with a hairline. */
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav .ak-navlink .elementor-button {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: 56px; /* comfortable touch target */
padding: 16px 2px;
font-size: 13px;
letter-spacing: 0.18em;
border-bottom: 1px solid var(--ak-line);
border-radius: 0;
}
/* The underline-on-hover flourish is a desktop affordance; on touch it
just sits under the row rule. */
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav .ak-navlink .elementor-button::after {
content: none;
}
/* Booking pill sits below the list as the one filled action. */
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav .ak-navbtn {
margin-top: 18px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav .ak-navbtn .elementor-button {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 56px;
padding: 18px 26px;
font-size: 12.5px;
letter-spacing: 0.16em;
}
/* Page must not scroll behind the open drawer. */
body.ak-hdr.ak-loc-north-adelaide.ak-nav-open {
overflow: hidden;
}
}
/* Phones */
@media (max-width: 767px) {
body.ak-hdr.ak-loc-north-adelaide {
--ak-header-h: 64px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header {
padding: 12px 16px !important;
padding-left: max(16px, env(safe-area-inset-left)) !important;
padding-right: max(16px, env(safe-area-inset-right)) !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo img,
body.ak-hdr.ak-loc-north-adelaide.ak-scrolled .ak-header__logo img {
height: 40px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle {
width: 44px;
height: 44px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav {
padding-left: max(16px, env(safe-area-inset-left)) !important;
padding-right: max(16px, env(safe-area-inset-right)) !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav .ak-navlink .elementor-button {
font-size: 12.5px;
letter-spacing: 0.16em;
}
}
/* Very narrow phones — the logo is the only thing that has to give. */
@media (max-width: 380px) {
body.ak-hdr.ak-loc-north-adelaide {
--ak-header-h: 58px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo img,
body.ak-hdr.ak-loc-north-adelaide.ak-scrolled .ak-header__logo img {
height: 34px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header {
padding: 12px 14px !important;
}
}
/* Respect the OS motion preference for the new drawer too. */
@media (prefers-reduced-motion: reduce) {
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav,
body.ak-hdr.ak-loc-north-adelaide .ak-header::after,
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle__bars span {
transition: none !important;
}
}
/* --------------------------------------------------------------------------
8. North Adelaide — centred venue links in the header
Three groups: logo left, the two venues in the centre, Menu / Contact /
Book a Table on the right. The two side groups share the leftover space
equally (flex: 1 1 0) and the centre group does not grow, which is what
puts the venues on the page centre line rather than merely midway between
their neighbours.
Scoped to `ak-loc-north-adelaide`, so the /locations/ landing page — which
uses the logo-only header and has no `.ak-header__locs` — is untouched.
-------------------------------------------------------------------------- */
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo {
flex: 1 1 0% !important;
justify-content: flex-start !important;
min-width: 0;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav {
flex: 1 1 0% !important;
min-width: 0;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
flex: 0 0 auto !important;
min-width: 0;
}
/* The venue links read a touch stronger than Menu / Contact — they are the
primary move in this bar. */
body.ak-hdr.ak-loc-north-adelaide .ak-loclink .elementor-button {
font-size: 12.5px;
font-weight: 600;
white-space: nowrap;
}
/* Below the breakpoint the venues drop to their own centred row underneath
the logo, so they stay reachable without opening the drawer. Explicit
`order` is needed because the hamburger is appended last in the DOM. */
@media (max-width: 1024px) {
/* Only the pages that actually render the centred venue row are that
tall. The contact page shares this body class but has no
`.ak-header__locs`, so it keeps the single-row height above. */
body.ak-hdr.ak-loc-north-adelaide:has(.ak-header__locs) {
--ak-header-h: 126px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header {
flex-wrap: wrap !important;
row-gap: 0 !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo {
order: 1;
flex: 0 1 auto !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle {
order: 2;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
order: 3;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
margin-top: 10px;
padding-top: 8px !important;
border-top: 1px solid var(--ak-line);
}
/* The drawer is absolutely positioned, so its order only matters for the
flex line it would otherwise occupy. */
body.ak-hdr.ak-loc-north-adelaide .ak-header__nav {
order: 4;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .ak-navlink .elementor-button {
min-height: 40px; /* touch target on its own row */
padding: 10px 4px;
font-size: 12px;
letter-spacing: 0.14em;
}
}
@media (max-width: 767px) {
/* Only the pages that actually render the centred venue row are that
tall. The contact page shares this body class but has no
`.ak-header__locs`, so it keeps the single-row height above. */
body.ak-hdr.ak-loc-north-adelaide:has(.ak-header__locs) {
--ak-header-h: 114px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .ak-navlink .elementor-button {
font-size: 11.5px;
letter-spacing: 0.12em;
}
}
@media (max-width: 380px) {
/* Only the pages that actually render the centred venue row are that
tall. The contact page shares this body class but has no
`.ak-header__locs`, so it keeps the single-row height above. */
body.ak-hdr.ak-loc-north-adelaide:has(.ak-header__locs) {
--ak-header-h: 106px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .ak-navlink .elementor-button {
font-size: 11px;
letter-spacing: 0.08em;
}
}
/* ==========================================================================
7. Venue contact page (/contact-north-adelaide/)
Appended for the contact page. Everything stays under `body.ak-hdr`,
and the form rules additionally sit under `.ak-form`, so no other page and
no other Contact Form 7 instance on the site is affected.
========================================================================== */
/* Shorter hero than a location page — this page leads with information. */
body.ak-hdr .ak-hero--compact {
min-height: 52vh;
min-height: 52svh;
}
@media (max-width: 1024px) {
body.ak-hdr .ak-hero--compact {
min-height: 46vh;
min-height: 46svh;
}
}
@media (max-width: 767px) {
body.ak-hdr .ak-hero--compact {
min-height: 42vh;
min-height: 42svh;
}
}
/* The form panel ---------------------------------------------------------- */
body.ak-hdr .ak-form {
border: 1px solid var(--ak-line);
}
body.ak-hdr .ak-form .wpcf7 {
max-width: 100%;
}
body.ak-hdr .ak-form .wpcf7-form > p,
body.ak-hdr .ak-form .wpcf7-form > div > p {
margin: 0 0 18px;
}
body.ak-hdr .ak-form .wpcf7-form label {
display: block;
width: 100%;
font-family: var(--ak-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(246, 241, 231, 0.72);
line-height: 1.6;
}
body.ak-hdr .ak-form .wpcf7-form-control-wrap {
display: block;
margin-top: 8px;
}
/* Fields. `!important` is needed only here: the theme's customizer CSS sets a
white background on form controls site-wide, at a specificity we cannot beat
without it. Scoped to .ak-form, so no other form on the site changes. */
body.ak-hdr .ak-form input[type="text"],
body.ak-hdr .ak-form input[type="email"],
body.ak-hdr .ak-form input[type="tel"],
body.ak-hdr .ak-form input[type="url"],
body.ak-hdr .ak-form input[type="number"],
body.ak-hdr .ak-form input[type="date"],
body.ak-hdr .ak-form select,
body.ak-hdr .ak-form textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
min-height: 52px;
padding: 14px 16px;
background-color: rgba(22, 33, 30, 0.55) !important;
border: 1px solid var(--ak-line);
border-radius: 3px;
color: var(--ak-cream);
font-family: var(--ak-body);
font-size: 15px;
font-weight: 300;
line-height: 1.5;
transition: border-color 0.3s var(--ak-ease), background-color 0.3s var(--ak-ease);
appearance: none;
-webkit-appearance: none;
}
body.ak-hdr .ak-form textarea {
min-height: 148px;
resize: vertical;
}
body.ak-hdr .ak-form input::placeholder,
body.ak-hdr .ak-form textarea::placeholder {
color: rgba(246, 241, 231, 0.42);
}
body.ak-hdr .ak-form input:focus,
body.ak-hdr .ak-form select:focus,
body.ak-hdr .ak-form textarea:focus {
outline: none;
border-color: rgba(246, 241, 231, 0.66);
background-color: rgba(22, 33, 30, 0.78) !important;
}
/* Checkboxes / radios — the customizer forces black label text site-wide. */
body.ak-hdr .ak-form .wpcf7-list-item {
margin: 0 18px 8px 0;
}
body.ak-hdr .ak-form span.wpcf7-list-item-label,
body.ak-hdr .ak-form .wpcf7-list-item label {
color: var(--ak-cream) !important;
text-transform: none;
letter-spacing: 0.01em;
font-size: 14px;
font-weight: 300;
}
/* Submit ------------------------------------------------------------------
The nicex theme wraps the CF7 submit in its own animated button:
<- the real control
Send <- visible label
Send <- slides in on hover
<- hover fill
The theme only hides that raw input inside its own widget wrapper
(`.ms-contact-form-7 input[type=submit]`). This page uses core Elementor's
Shortcode widget instead, so there is no such ancestor and the input would
render on top of the label — two "Send"s side by side. We reproduce the
theme's own treatment inside .ak-form and then style the wrapper as our
pill, which keeps the theme's hover animation working. */
body.ak-hdr .ak-form .btn input[type="submit"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: inherit;
opacity: 0;
z-index: 5;
cursor: pointer;
background-color: transparent !important;
}
body.ak-hdr .ak-form .btn p {
margin: 0;
}
/* The wrapper becomes the pill, matching every other CTA on these pages. */
body.ak-hdr .ak-form .btn--primary {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
min-width: 220px;
min-height: 56px;
margin-top: 6px;
padding: 18px 40px;
border-radius: 999px;
background-color: var(--ak-cream) !important;
font-family: var(--ak-body);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
cursor: pointer;
}
body.ak-hdr .ak-form .btn--primary .ms-btn__text {
pointer-events: none;
}
body.ak-hdr .ak-form .btn--primary .text--main {
color: var(--ak-green-dark);
}
/* Ghost label rides in over the ripple, so it needs the light colour. */
body.ak-hdr .ak-form .btn--primary .text--ghost {
color: var(--ak-cream);
}
body.ak-hdr .ak-form .btn--primary .ms-btn--ripple {
background-color: var(--ak-green) !important;
}
body.ak-hdr .ak-form .btn--primary:focus-within {
outline: 2px solid var(--ak-cream);
outline-offset: 3px;
}
/* CF7 status and validation messages */
body.ak-hdr .ak-form .wpcf7-not-valid-tip {
color: #ffb4a2;
font-size: 12.5px;
letter-spacing: 0.02em;
margin-top: 6px;
}
body.ak-hdr .ak-form .wpcf7-response-output {
margin: 18px 0 0;
padding: 12px 16px;
border-radius: 3px;
border: 1px solid var(--ak-line);
color: var(--ak-cream);
font-size: 14px;
line-height: 1.6;
}
body.ak-hdr .ak-form .wpcf7-spinner {
filter: invert(1) brightness(1.6);
}
/* Full-width fields on small screens, and comfortable touch targets. */
@media (max-width: 767px) {
body.ak-hdr .ak-form .btn--primary {
width: 100%;
max-width: 340px;
min-width: 0;
}
body.ak-hdr .ak-form .wpcf7-form label {
font-size: 10.5px;
letter-spacing: 0.14em;
}
}
/* Submit button — centre the label -----------------------------------------
The label sat right of centre, with a wide gap on its left. Cause: Contact
Form 7 injects
after the submit input at runtime (the `has-spinner` class on the input is
what triggers it), so it is absent from the served HTML and only appears in
the live DOM. CF7's own stylesheet gives it
display: inline-block; width: 24px; margin: 0 24px; visibility: hidden;
— 72px wide, invisible, but still in flow. It lives in the same
as the
input, which is the FIRST flex item of `.btn--primary`, so those 72px were
pushed in ahead of `.ms-btn__text` and `justify-content: center` centred the
pair rather than the label. The visible word ended up ~36px right of centre.
The theme neutralises this with `.ms-contact-form-7 .wpcf7-spinner {
position: absolute }`, but that ancestor only exists inside the theme's own
CF7 widget. This page renders the form through core Elementor's Shortcode
widget, so the rule never applies — the same gap in the theme's coverage
that the raw submit input above already had to work around.
Fix: take the control wrapper out of the flex flow entirely. It only ever
holds the transparent full-size input and the spinner, both positioned, so
nothing inside it can affect the centring again — whatever CF7 adds next.
`.ms-btn__text` is then the only in-flow item, and it centres exactly. */
body.ak-hdr .ak-form .btn--primary > p {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}
/* Parked against the trailing edge of the pill, clear of the label, and
revealed by CF7's own `form.submitting .wpcf7-spinner { visibility: visible }`
while the message is sending. */
body.ak-hdr .ak-form .btn--primary > p .wpcf7-spinner {
position: absolute;
top: 50%;
right: 16px;
left: auto;
margin: 0;
transform: translateY(-50%);
z-index: 6;
}
/* On phones the pill goes full width, so the spinner keeps a little more
clearance from the rounded end. */
@media (max-width: 767px) {
body.ak-hdr .ak-form .btn--primary > p .wpcf7-spinner {
right: 20px;
}
}
/* ==========================================================================
8. Overlay-header legibility
==========================================================================
The Antidote mark is a cream/gold PNG on transparency (sampled average
rgb(207,187,123), luminance 187) — drawn for dark backgrounds. Wherever the
top of a hero photograph happens to be light, such as the pale awning in the
North Adelaide storefront shot, the logo and the nav simply disappear into
it. Nothing is broken; there is just no contrast.
Two parts to the fix:
at rest — a soft top-down scrim behind the fixed bar, fading to nothing
by its lower edge so it never reads as a band, plus a shadow on
the mark itself for bright patches
scrolled — a properly dark, blurred bar
The scrim stays in place when scrolled: it composites over a near-opaque
background, so the difference is imperceptible, and it means the whole
change animates through `background-color` rather than snapping a gradient
on and off (background-image is not animatable).
`::after` on .ak-header is already used for the mobile drawer overlay, so
this deliberately uses no pseudo-element at all.
========================================================================== */
body.ak-hdr .ak-header {
background-image: linear-gradient(
to bottom,
rgba(11, 18, 16, 0.68) 0%,
rgba(11, 18, 16, 0.40) 55%,
rgba(11, 18, 16, 0) 100%
);
}
body.ak-hdr .ak-header__logo img {
filter: drop-shadow(0 1px 5px rgba(8, 13, 12, 0.55));
transition: height 0.4s var(--ak-ease), filter 0.4s var(--ak-ease);
}
body.ak-hdr .ak-header__nav .elementor-button,
body.ak-hdr .ak-header__locs .elementor-button {
text-shadow: 0 1px 4px rgba(8, 13, 12, 0.45);
}
/* The booking pill has its own solid background, so it needs no shadow. */
body.ak-hdr .ak-navbtn .elementor-button {
text-shadow: none;
}
/* Scrolled: a genuinely dark, blurred bar. */
body.ak-hdr.ak-scrolled .ak-header {
background-color: rgba(14, 22, 20, 0.95);
-webkit-backdrop-filter: saturate(150%) blur(16px);
backdrop-filter: saturate(150%) blur(16px);
box-shadow: 0 6px 28px rgba(6, 10, 9, 0.42), 0 1px 0 var(--ak-line);
}
/* Once the bar is solid the extra contrast helpers are redundant. */
body.ak-hdr.ak-scrolled .ak-header__logo img {
filter: none;
}
body.ak-hdr.ak-scrolled .ak-header__nav .elementor-button,
body.ak-hdr.ak-scrolled .ak-header__locs .elementor-button {
text-shadow: none;
}
/* Safari on iOS applies backdrop-filter only to what is painted behind the
element, so the bar needs to stay composited on its own layer. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
body.ak-hdr.ak-scrolled .ak-header {
background-color: rgba(14, 22, 20, 0.985);
}
}
/* ==========================================================================
9. Header three-group layout — width fix
==========================================================================
Elementor core gives every flex container a full-width default:
.e-con.e-flex { --width: 100%; }
.e-con { width: var(--width); }
The centred venue group has no --width override of its own, so it measured
the full content box of the bar (1496px at a 1584px viewport). Combined with
`flex: 0 0 auto !important` it could not shrink, so it consumed the entire
header and the two siblings — both `flex: 1 1 0%` with `min-width: 0` —
collapsed to width:0. The logo and the Menu / Contact / Book group were
still in the DOM and still "visible"; they simply had no width, and the nav
was pushed past the right edge of the viewport.
Sizing the group to its own content restores the intended three-group bar:
logo left, venues centred by `justify-content: space-between`, links right.
========================================================================== */
body.ak-hdr .ak-header__locs {
width: auto !important;
max-width: 100%;
}
/* Belt and braces: the two flexible groups must always be able to show their
contents, whatever basis they are given. */
body.ak-hdr .ak-header__logo,
body.ak-hdr .ak-header__nav {
min-width: -moz-min-content;
min-width: min-content;
}
/* Tablet and mobile: keep the bar on one line ------------------------------
The venue group is a third flex item, and the bar allows wrapping, so below
the drawer breakpoint it broke onto three rows: logo, then the hamburger,
then the venue links. Holding the row together and letting the venue group
shrink keeps it to a single line: logo left, venues centred, hamburger
right. The nav group is absolutely positioned as the drawer here, so it
takes no part in this row. */
@media (max-width: 1024px) {
body.ak-hdr.ak-loc-north-adelaide .ak-header {
flex-wrap: nowrap !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
flex: 0 1 auto !important;
min-width: 0;
justify-content: center !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .elementor-button {
white-space: nowrap;
}
}
@media (max-width: 560px) {
/* Tighten the venue labels so logo + venues + hamburger still fit a phone. */
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .elementor-button {
font-size: 10px;
letter-spacing: 0.08em;
}
}
/* Explicit order below the drawer breakpoint: logo | venues | hamburger.
Without this the hamburger lands between the logo and the venue links, and
the venue group — being last and unable to shrink far enough — runs past the
right edge on a phone. */
@media (max-width: 1024px) {
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo {
order: 1 !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
order: 2 !important;
flex: 1 1 auto !important;
margin-inline: auto;
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle {
order: 3 !important;
margin-left: auto !important;
}
}
@media (max-width: 560px) {
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
--gap: 0px 14px;
gap: 0 14px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .elementor-button {
font-size: 9.5px;
letter-spacing: 0.06em;
}
}
/* Phones: no hamburger, both venues ----------------------------------------
The drawer's links (Menu / Contact / Book a Table) are hidden at every
breakpoint on the North Adelaide pages, so the hamburger was opening an
empty panel. Dropping it frees exactly the room the second venue link
needs, and a location switcher is the more useful thing for a phone bar to
carry than a control that reveals nothing:
logo | CLARE VALLEY NORTH ADELAIDE
Type and gaps step down three times so both names stay on one line all the
way to a 320px screen. Scoped to `ak-hdr` + `ak-loc-north-adelaide`, which
is what /north-adelaide/, /contact-north-adelaide/ and
/menu-antidote-kitchen-north-adelaide/ all carry. */
@media (max-width: 767px) {
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
flex-wrap: nowrap !important;
--gap: 0px 16px;
gap: 0 16px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .elementor-button {
font-size: 11px;
letter-spacing: 0.08em;
white-space: nowrap;
}
}
@media (max-width: 430px) {
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
--gap: 0px 12px;
gap: 0 12px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .elementor-button {
font-size: 10px;
letter-spacing: 0.06em;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo img,
body.ak-hdr.ak-loc-north-adelaide.ak-scrolled .ak-header__logo img {
height: 36px;
}
}
@media (max-width: 360px) {
body.ak-hdr.ak-loc-north-adelaide .ak-header {
padding-left: 14px !important;
padding-right: 14px !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
--gap: 0px 10px;
gap: 0 10px;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs .elementor-button {
font-size: 9.5px;
letter-spacing: 0.04em;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo img,
body.ak-hdr.ak-loc-north-adelaide.ak-scrolled .ak-header__logo img {
height: 32px;
}
}
/* Phones: size the two groups from their content, not from Elementor's 100%
container default. With a 100% basis both groups shrink proportionally and
still reserve far more than they need, which pushed the hamburger off the
right edge on a 360–390px screen. Content sizing gives
logo(104) + venue(103) + burger(44) + padding(36) + gaps(36) = 323px,
comfortably inside a 360px viewport. */
@media (max-width: 767px) {
body.ak-hdr.ak-loc-north-adelaide .ak-header__logo,
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
width: auto !important;
min-width: 0 !important;
flex: 0 1 auto !important;
}
body.ak-hdr.ak-loc-north-adelaide .ak-header__locs {
margin-inline: auto;
}
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle {
flex: 0 0 auto !important;
}
}
/* ==========================================================================
10. No hamburger on the North Adelaide pages, at any width
==========================================================================
The drawer it opens holds Menu / Contact / Book a Table, and on
/north-adelaide/ and /contact-north-adelaide/ all three of those widgets
carry `elementor-hidden-desktop`, `-tablet` and `-mobile`, so the panel is
empty. A control that reveals nothing is worse than no control, and the bar
reads better without it:
logo | CLARE VALLEY NORTH ADELAIDE
Deliberately outside a media query and marked !important so it also beats
the `@media (max-width: 1024px)` rule above, which is what was still
painting the button on tablet.
NOTE: on /menu-antidote-kitchen-north-adelaide/ those three links are NOT
hidden, so removing the hamburger also removes the only way to reach them
below 1025px. Left as-is because the header is meant to match across the
three pages; if they should stay reachable there, show them inline in the
bar at 768–1024 rather than bringing the hamburger back.
========================================================================== */
body.ak-hdr.ak-loc-north-adelaide .ak-navtoggle {
display: none !important;
}
/* ==========================================================================
11. Menu page header — match /north-adelaide/ exactly
==========================================================================
/menu-antidote-kitchen-north-adelaide/ carries the grafted header, built
from the same ak_loc_header() output, so its markup and styling already
match. One thing differs: on post 2828 the Menu / Contact / Book a Table
widgets carry Elementor's `elementor-hidden-desktop / -tablet / -mobile`
flags, while the grafted template's copies do not — so the menu page was
still painting those three at desktop widths.
Hide the WIDGETS, not the `.ak-header__nav` container. On post 2828 that
container survives as an empty flex item (481×0 at a 1400px viewport) and
balances the logo, which is what holds the venue pair in the centre of the
bar. Removing it here would let the pair drift right and the two headers
would no longer line up.
Scoped to `ak-graft-header`, the class that plugin puts on this page alone,
so /north-adelaide/ and /contact-north-adelaide/ are untouched and remain
the source of truth for what this header looks like.
========================================================================== */
body.ak-graft-header .ak-header__nav .elementor-widget {
display: none !important;
}