/* ========================================================================= * APP SHELL — safe areas, keyboard inset, iOS input floor * ========================================================================= * Written for the phone app rather than for a desktop browser. In a browser * every inset below resolves to 0px and nothing here changes what you see; in * a full-screen WKWebView they resolve to real device values and the layout * stays clear of the Dynamic Island and the home indicator. * * The insets are read into custom properties once, here, and everything else * on the site refers to the properties. That keeps env() in one place and, more * usefully, makes the whole thing testable: override --hm-sat and --hm-sab on * :root and any browser renders exactly what an iPhone would. * ========================================================================= */ :root { --hm-sat: env(safe-area-inset-top, 0px); --hm-sar: env(safe-area-inset-right, 0px); --hm-sab: env(safe-area-inset-bottom, 0px); --hm-sal: env(safe-area-inset-left, 0px); /* Portrait is the only orientation that matters for ordering, but a landscape notch is on one side or the other and we do not know which. */ --hm-sax: max(var(--hm-sal), var(--hm-sar)); /* How far the on-screen keyboard covers the layout viewport. Set by app-shell.js; 0 whenever no keyboard is up. */ --hm-kb: 0px; } /* -------------------------------------------------------------- masthead */ /* * viewport-fit=cover lets the page paint under the status bar, so the top bar * has to pad for it AND own the background behind it, or the Dynamic Island * sits on a white strip. The wrapper carries the colour of whichever bar is * first: the utility strip on desktop, the nav bar on a phone where the * utility strip is hidden. */ .elementor-location-header { padding-top: var(--hm-sat); background: #0D231D; } @media (max-width: 767px) { .elementor-location-header { background: #04100F; } } /* A sticky header must repeat the padding on itself, not inherit it from a wrapper that has scrolled away. Left here for whichever header we ship. */ .elementor-location-header.is-sticky, .hm-header--sticky { position: sticky; top: 0; padding-top: var(--hm-sat); } /* ---------------------------------------------------------------- footer */ .elementor-location-footer { padding-bottom: var(--hm-sab); background: #06100E; } /* ------------------------------------------------------------ iOS zoom */ /* * Safari zooms the page whenever a focused field is under 16px, and the zoom * does not come back out. This is a floor rather than a size: anything already * larger is left alone. Checkboxes and radios are excluded because they take * their size from width/height, not font-size, and buttons because zoom only * triggers on text entry. */ @media (max-width: 767px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select:not([multiple]):not([size]), textarea:not([rows="0"]) { font-size: max(16px, 1rem); } } /* --------------------------------------------------------- bottom bars */ /* * Any bar pinned to the bottom of the screen sits above the home indicator, * and above the keyboard when one is open. --hm-kb is 0 unless a keyboard is * actually up, so this is inert the rest of the time. */ .hm-bottom-safe { bottom: var(--hm-kb); padding-bottom: var(--hm-sab); } .hm-kb-open .hm-bottom-safe { padding-bottom: 0; } /* ========================================================================= * STICKY HEADER (option B) — phone only * ========================================================================= * Full logo at rest, wordmark once you scroll past the hero, Order Food never * off screen. * * The WRAPPER is what sticks, not the bar inside it. position:sticky only * travels inside its own parent's box, and the bar's parent is the wrapper — * pin the bar and it unsticks after 85px, which is the height of the thing it * lives in. The wrapper's parent is , which spans the document. * * That settles where the top inset goes, too: on the sticky element itself. * A wrapper's padding scrolls away with the wrapper, so an inset on anything * that is not the pinned element puts the bar under the Dynamic Island the * moment somebody scrolls — the exact collision this was meant to prevent. * Here the wrapper is the pinned element, so the inset stays on it. * * The image rule runs five classes deep because Elementor caps every widget * at "max-width: 100%" from (0,4,0). Anything shallower loses and the logo * never shrinks. */ @media (max-width: 767px) { .elementor-location-header { position: sticky; top: 0; z-index: 40; padding-top: var(--hm-sat); } /* The admin bar is fixed over everything for logged-in users. Customers never see this; it keeps the bar reachable while we are testing. */ body.admin-bar .elementor-location-header { top: 46px; } .elementor-location-header > .e-con:last-child { padding-top: 10px; padding-bottom: 10px; transition: padding .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s cubic-bezier(.2,.7,.3,1); } /* * Four classes, matching Elementor's own per-element padding rule * (".elementor-7318 .elementor-element.elementor-element-XXXX") and then * going one deeper. At three this tied with it, and Elementor's generated * stylesheet loads later, so the bar never tightened — and the resting * value happened to be the same 10px, which hid it. */ .hm-hd-scrolled .elementor-location-header.elementor > .e-con:last-child { padding-top: 6px; padding-bottom: 6px; box-shadow: 0 6px 18px rgba(4, 16, 15, .35); } .elementor-location-header.elementor .e-con > .elementor-widget-image { transition: max-width .22s cubic-bezier(.2,.7,.3,1); } } /* * A pinned bar covers the top of whatever anything scrolls into view, and the * builder calls scrollIntoView on every step change and again on a failed * validation. Without this the heading you were just sent to, or the message * telling you what is missing, sits underneath the bar. --hm-hd is the * measured height of the pinned header, set by app-shell.js. */ html { scroll-padding-top: calc(var(--hm-hd, 0px) + 12px); } /* ========================================================================= * MOBILE MENU — roll-down panel * ========================================================================= * Rolls down from the top instead of replacing the screen. Elementor's own * dropdown is switched off: it renders inside the nav column, which is narrow * because a burger is all it has to hold, so it came out as a strip of clipped * words down the middle of the header. * * !important on that dropdown because Elementor slides it open with an inline * style, and an inline style beats any selector without one. * * Closed state is visibility, not display or [hidden]: the panel has to stay * laid out for the transform to animate, and visibility still takes it out of * the accessibility tree and the tab order. It is in the transition list so it * flips only after the panel has finished travelling back up. */ .elementor-nav-menu--dropdown.elementor-nav-menu__container { display: none !important; } .hm-drawer { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: var(--hm-sat) var(--hm-sax) var(--hm-sab); background: #101315; color: #F5EBDD; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; transform: translateY(-100%); transition: transform .42s cubic-bezier(.22,.8,.28,1), visibility .42s; } .hm-drawer.is-open { visibility: visible; transform: none; } .hm-drawer-open body { overflow: hidden; } /* The admin bar is fixed above everything, so a full-screen panel starts underneath it and the logo loses its top. Logged-in only. */ body.admin-bar .hm-drawer { top: 46px; } @media (min-width: 783px) { body.admin-bar .hm-drawer { top: 32px; } } .hm-drawer__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; } .hm-drawer__logo { display: block; line-height: 0; } .hm-drawer__logo img { display: block; width: 120px; height: auto; max-width: none; } /* Two classes deep: the Elementor kit styles bare buttons at (0,1,1) and was painting this one solid red. Hover needs a third to clear button:hover. */ .hm-drawer .hm-drawer__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: #F5EBDD; cursor: pointer; } .hm-drawer .hm-drawer__close:hover, .hm-drawer .hm-drawer__close:focus-visible { background: rgba(245, 235, 221, .1); color: #F5EBDD; } .hm-drawer .hm-drawer__close svg { width: 26px; height: 26px; } /* ------------------------------------------------------------ order food */ .hm-drawer__act { flex: none; padding: 2px 16px 4px; } /* 48px rather than the 56 it was drawn at: still the biggest thing on the panel, without eating a nav row's worth of height. */ .hm-drawer .hm-drawer__cta { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; border-radius: 10px; background: #C5162E; color: #fff; text-decoration: none; font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; } .hm-drawer .hm-drawer__cta:hover, .hm-drawer .hm-drawer__cta:focus-visible { background: #9E1024; color: #fff; } .hm-drawer .hm-drawer__cta svg { width: 17px; height: 17px; } /* ------------------------------------------------------------------- nav */ .hm-drawer__nav { flex: none; padding: 4px 16px 0; } .hm-drawer .hm-drawer__menu { list-style: none; margin: 0; padding: 0; } .hm-drawer .hm-drawer__menu a { display: block; padding: 11px 0; border-bottom: 1px solid rgba(245, 235, 221, .1); color: #F5EBDD; text-decoration: none; font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif; font-weight: 500; font-size: 1.125rem; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; } .hm-drawer .hm-drawer__menu a:hover, .hm-drawer .hm-drawer__menu a:focus-visible { color: #C5162E; } .hm-drawer .hm-drawer__menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; } .hm-drawer .hm-drawer__menu .sub-menu a { font-family: inherit; font-size: .9375rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: rgba(245, 235, 221, .8); } /* ---------------------------------------------------------------- the rail */ .hm-drawer__kick { flex: none; margin: 16px 0 8px; padding: 0 16px; font-family: "Oswald", "Haettenschweiler", "Arial Narrow", system-ui, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #E1C885; } /* Landscape crops rather than squares: more of the sandwich, fewer of them. Scrolls sideways, and the last card is deliberately cut off at the edge so it is obvious there is more to the right. */ .hm-drawer .hm-drawer__rail { flex: none; display: flex; gap: 10px; margin: 0; padding: 0 16px 2px; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hm-drawer .hm-drawer__rail::-webkit-scrollbar { display: none; } .hm-drawer .hm-drawer__slide { flex: none; width: 148px; } .hm-drawer .hm-drawer__slide a { display: block; color: rgba(245, 235, 221, .9); text-decoration: none; } .hm-drawer .hm-drawer__slide img { display: block; width: 148px; height: 96px; max-width: none; border-radius: 10px; object-fit: cover; background: rgba(245, 235, 221, .06); } .hm-drawer .hm-drawer__slide span { display: block; margin-top: 6px; font-size: .75rem; font-weight: 600; line-height: 1.25; } .hm-drawer .hm-drawer__slide a:hover span, .hm-drawer .hm-drawer__slide a:focus-visible span { color: #fff; } /* ----------------------------------------------------------------- footer */ .hm-drawer__foot { flex: none; margin-top: auto; padding: 16px 16px 20px; border-top: 1px solid rgba(245, 235, 221, .1); font-size: .8125rem; line-height: 1.55; color: rgba(245, 235, 221, .6); } .hm-drawer__line { margin: 0; } .hm-drawer .hm-drawer__tel { display: inline-block; margin-top: 8px; color: #F5EBDD; font-weight: 700; font-size: 1rem; text-decoration: none; } .hm-drawer .hm-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ========================================================================= * WOOF LAYOUT (option 2) — phone only * ========================================================================= * Promo strip on top, burger left, logo centered, account and cart right. * Desktop keeps the layout it has: logo, menu, Order Food. * * The logo is centered by making the two flanking columns equal-width flex * children rather than by centering the logo in the leftover space. A burger * is 44px and two icons are 84px, so "center of what is left" is 20px off * true center, which reads as a mistake rather than a choice. */ .hm-actions { display: none; } .hm-announce { display: block; padding: 7px 16px calc(7px); padding-top: calc(7px + var(--hm-sat)); background: var(--hm-red, #C5162E); color: #fff; text-align: center; text-decoration: none; font-size: .75rem; font-weight: 600; letter-spacing: .02em; line-height: 1.35; } .hm-announce__inner { display: block; width: min(1360px, 100% - 32px); margin-inline: auto; } a.hm-announce:hover, a.hm-announce:focus-visible { background: #9E1024; color: #fff; } /* With a strip above it, the strip is what pads for the Dynamic Island. Once the page scrolls the strip is gone and the pinned bar takes the job back. */ body.hm-has-ann .elementor-location-header { padding-top: 0; } .hm-hd-scrolled body.hm-has-ann .elementor-location-header { padding-top: var(--hm-sat); } @media (max-width: 767px) { /* 1 logo, 2 burger, 3 actions in the markup; 2, 1, 3 on screen. */ .elementor-location-header .e-con-inner > .e-con:nth-child(1) { order: 2; flex: 0 0 auto; justify-content: center; } .elementor-location-header .e-con-inner > .e-con:nth-child(2) { order: 1; flex: 1 1 0; justify-content: flex-start; } .elementor-location-header .e-con-inner > .e-con:nth-child(3) { order: 3; flex: 1 1 0; justify-content: flex-end; } /* The worded button steps aside for the two icons. */ .elementor-location-header .elementor-widget-button { display: none; } .elementor-location-header .hm-actions { display: flex; align-items: center; gap: 2px; } .elementor-location-header .elementor-menu-toggle { justify-content: flex-start; } /* * Centered, the logo is the focal point and does not need the width it had * when it was carrying the left end of the bar on its own. It shrinks again * once the bar pins. * * ONE cap rule reading a custom property, rather than a resting rule and a * scrolled rule racing each other on specificity — which is what they did, * and the resting one won. Five classes on the rule itself because * Elementor caps every widget at 100% from four and its stylesheet loads * after this one, so a tie goes to Elementor. */ .elementor-location-header.elementor .e-con > .elementor-widget.elementor-widget-image { max-width: var(--hm-logo-w, 108px); } .hm-hd-scrolled { --hm-logo-w: 86px; } } /* Two classes deep: the Elementor kit colours every red from (0,1,1), so a single-class rule loses and the icons come out brand red on a dark bar. */ .hm-actions .hm-actions__btn { display: grid; place-items: center; position: relative; width: 40px; height: 40px; color: var(--hm-cream, #F5EBDD); text-decoration: none; } .hm-actions .hm-actions__btn:hover, .hm-actions .hm-actions__btn:focus-visible { color: #fff; } .hm-actions .hm-actions__btn svg { width: 22px; height: 22px; } .hm-actions__count { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--hm-red, #C5162E); color: #fff; font-size: .625rem; font-weight: 700; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; } /* Zero still renders, so the bar does not change width when the cart empties and shove the centered logo sideways. */ .hm-actions__count.is-empty { background: rgba(245, 235, 221, .18); color: rgba(245, 235, 221, .75); } .hm-actions .hm-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }