/* ========================================================================= * 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); } .hm-hd-scrolled .elementor-location-header > .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); } .hm-hd-scrolled .elementor-location-header.elementor .e-con > .elementor-widget-image { max-width: 86px; } } /* * 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); }