/* ============================================================================= QR MENU 2026 — standalone design system for the in-restaurant QR menu ----------------------------------------------------------------------------- Scope: the page opts in by putting `qrm-root` on (done synchronously in the head of qr_product.blade so the marketing chrome never flashes). Everything else is `qrm-`-prefixed, so nothing here can leak into the storefront, the checkout or the admin. Language: fully bidirectional — only logical properties (inline-start / inline-end, margin-inline, padding-inline) are used, so the same rules serve Arabic (RTL) and English (LTR). Colours: inherited from the DB-driven tokens emitted by theme_color.blade.php (--theme-*). Every var() has a sane fallback so the page still looks finished if a token is missing. ========================================================================== */ /* ---------------------------------------------------------------- 1. TOKENS */ html.qrm-root { --qrm-brand: var(--theme-brand, #B8541A); --qrm-brand-dark: var(--theme-brand-dark, #8B3F12); --qrm-brand-rgb: var(--theme-brand-rgb, 184, 84, 26); --qrm-accent: var(--theme-accent, #E0A82E); --qrm-accent-rgb: var(--theme-accent-rgb, 224, 168, 46); --qrm-ink: var(--theme-text, #241A13); --qrm-ink-soft: var(--theme-text-soft, #5C4938); --qrm-ink-mute: var(--theme-text-muted, #8C7A66); --qrm-ink-rgb: var(--theme-text-rgb, 36, 26, 19); --qrm-canvas: #F6F1E9; --qrm-surface: #FFFFFF; --qrm-surface-2: #FBF7F0; --qrm-line: rgba(36, 26, 19, .09); --qrm-line-strong: rgba(36, 26, 19, .16); --qrm-success: var(--theme-success, #2D8659); --qrm-danger: var(--theme-danger, #C73E3E); --qrm-warning: var(--theme-warning, #D89B1F); --qrm-r-sm: 10px; --qrm-r-md: 14px; --qrm-r-lg: 20px; --qrm-r-xl: 26px; --qrm-r-pill: 999px; --qrm-sh-1: 0 1px 2px rgba(36, 26, 19, .05), 0 4px 14px -8px rgba(36, 26, 19, .16); --qrm-sh-2: 0 2px 4px rgba(36, 26, 19, .05), 0 12px 28px -14px rgba(36, 26, 19, .26); --qrm-sh-3: 0 18px 44px -18px rgba(36, 26, 19, .34); --qrm-sh-brand: 0 14px 30px -12px rgba(var(--qrm-brand-rgb), .55); --qrm-ease: cubic-bezier(.22, .61, .36, 1); --qrm-appbar-h: 58px; --qrm-font: 'Inter', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif; --qrm-font-display: 'Playfair Display', 'Tajawal', Georgia, serif; } /* The stored brand shade can be left over from another palette (a green brand with a brown shade renders every gradient green-to-brown), so the gradient end is derived from the brand itself wherever that is supported. */ @supports (color: color-mix(in srgb, red 50%, black)) { html.qrm-root { --qrm-brand-dark: color-mix(in srgb, var(--qrm-brand) 74%, #000); } } html[dir="rtl"].qrm-root { --qrm-font: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif; --qrm-font-display: 'Tajawal', 'Playfair Display', Georgia, serif; } /* ------------------------------------------------------- 2. CHROME / RESET */ /* The QR menu is a self-contained kiosk surface: the marketing header, the marketing footer and the seasonal decor layer are all suppressed so the guest sees one focused screen. */ .qrm-root .sticky-header, .qrm-root header.header-qr, .qrm-root .navbar.main_menu, .qrm-root .wsus__topbar, .qrm-root .m-topbar, .qrm-root footer, .qrm-root #ramadan-elegant-bg, .qrm-root .wsus__scroll_btn, .qrm-root .qr-myorders-fab, /* The marketing breadcrumb hero repeats the app bar's title over a full-width photo. The pages hid it on phones only, so a laptop got two page headers stacked on each other. */ .qrm-root .wsus__breadcrumb { display: none !important; } .qrm-root, .qrm-root body { background: var(--qrm-canvas); overflow-x: hidden; } .qrm-root body { font-family: var(--qrm-font); color: var(--qrm-ink); -webkit-font-smoothing: antialiased; padding-top: var(--qrm-appbar-h); padding-bottom: 104px; /* clearance for the cart bar */ margin: 0; } .qrm-root body * { -webkit-tap-highlight-color: transparent; } .qrm-root ::selection { background: rgba(var(--qrm-brand-rgb), .18); } /* rtl.css opens with `* { direction: rtl; text-align: right }`. Because that hits every element directly, it beats any alignment a parent passes down — so an empty state, a centred hint or a button row that reads correctly in English silently right-aligns in Arabic. Restoring `inherit` puts the parent back in charge. `:where()` keeps this at zero specificity, so it wins on load order alone (rtl.css is linked first) and every component rule below still overrides it. */ :where(html[dir="rtl"].qrm-root body) * { text-align: inherit; } .qrm-shell { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 992px) { .qrm-shell { padding-inline: 24px; } } .qrm-root body :focus-visible { outline: 2px solid var(--qrm-brand); outline-offset: 2px; border-radius: 6px; } /* Riyal glyph used inside prices */ .qrm-root .Saudi_Riyal, .qrm-sar { width: 0.82em !important; height: auto !important; margin-inline: 2px; vertical-align: -0.06em; filter: brightness(0) saturate(100%); opacity: .78; } /* ------------------------------------------------------------- 3. APP BAR */ .qrm-appbar { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 300; height: var(--qrm-appbar-h); display: flex; align-items: center; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--qrm-line); transition: box-shadow .25s ease, background .25s ease; } .qrm-appbar.is-scrolled { background: rgba(255, 255, 255, .95); box-shadow: 0 6px 22px -16px rgba(36, 26, 19, .5); } .qrm-appbar__inner { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 16px; display: flex; align-items: center; gap: 12px; } @media (min-width: 992px) { .qrm-appbar__inner { padding-inline: 24px; } } .qrm-appbar__brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none !important; margin-inline-end: auto; } .qrm-appbar__logo { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, var(--qrm-brand), var(--qrm-brand-dark)); color: #fff; font-size: 15px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(var(--qrm-brand-rgb), .8); } .qrm-appbar__logo img { width: 100%; height: 100%; object-fit: cover; } /* With a real logo the tile stops being a brand chip and becomes a plate for the mark: no gradient to fight the artwork, `contain` so nothing is cropped, and a flexible width so a wordmark is not squeezed into a square. */ .qrm-appbar__logo--img { width: auto; min-width: 36px; max-width: 108px; padding: 4px 6px; background: #fff; border: 1px solid var(--qrm-line); box-shadow: 0 4px 12px -10px rgba(36, 26, 19, .8); } .qrm-appbar__logo--img img { width: auto; max-width: 100%; object-fit: contain; } .qrm-appbar__names { min-width: 0; line-height: 1.15; } .qrm-appbar__name { display: block; font-size: 14px; font-weight: 700; color: var(--qrm-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } .qrm-appbar__sub { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--qrm-ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; } .qrm-appbar__actions { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .qrm-iconbtn { position: relative; width: 38px; height: 38px; border-radius: var(--qrm-r-pill); border: 1px solid var(--qrm-line); background: var(--qrm-surface); color: var(--qrm-ink-soft); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; text-decoration: none !important; transition: background .2s var(--qrm-ease), color .2s, border-color .2s, transform .2s; padding: 0; } .qrm-iconbtn:hover { background: rgba(var(--qrm-brand-rgb), .08); border-color: rgba(var(--qrm-brand-rgb), .28); color: var(--qrm-brand); transform: translateY(-1px); } .qrm-iconbtn__badge { position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--qrm-r-pill); background: var(--qrm-brand); color: #fff; font-size: 10px; font-weight: 800; line-height: 18px; text-align: center; border: 2px solid #fff; } /* Language switcher — a native select styled as a chip */ .qrm-lang { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding-inline: 12px 30px; border-radius: var(--qrm-r-pill); border: 1px solid var(--qrm-line); background: var(--qrm-surface); color: var(--qrm-ink-soft); font-size: 12.5px; font-weight: 700; } .qrm-lang > i { font-size: 13px; color: var(--qrm-brand); pointer-events: none; } .qrm-lang::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; inset-inline-end: 12px; font-size: 11px; color: var(--qrm-ink-mute); pointer-events: none; } .qrm-lang form { display: inline-flex; align-items: center; margin: 0; } .qrm-lang select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; outline: none; } @media (max-width: 575.98px) { .qrm-lang { padding-inline: 10px 26px; font-size: 12px; } .qrm-lang > i { display: none; } } /* ---------------------------------------------------------------- 4. HERO */ .qrm-hero { padding-block: 16px 0; } .qrm-hero__card { position: relative; border-radius: var(--qrm-r-xl); overflow: hidden; isolation: isolate; color: #fff; min-height: 188px; display: flex; align-items: flex-end; padding: 20px; box-shadow: var(--qrm-sh-2); } .qrm-hero__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.04); } .qrm-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 12, 7, .12) 0%, rgba(20, 12, 7, .58) 58%, rgba(20, 12, 7, .86) 100%), linear-gradient(115deg, rgba(var(--qrm-brand-rgb), .72) 0%, rgba(var(--qrm-brand-rgb), .12) 62%); } .qrm-hero__body { width: 100%; min-width: 0; } .qrm-hero__eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--qrm-r-pill); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 10px; } html[dir="rtl"] .qrm-hero__eyebrow { letter-spacing: 0; text-transform: none; font-size: 11.5px; } .qrm-hero__eyebrow i { font-size: 10px; color: var(--qrm-accent); } .qrm-hero__title { font-family: var(--qrm-font-display); font-size: clamp(1.45rem, 5.2vw, 2.35rem); font-weight: 600; line-height: 1.14; margin: 0 0 10px; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .3); } .qrm-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; } .qrm-metachip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--qrm-r-pill); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; font-weight: 600; color: #fff; max-width: 100%; } .qrm-metachip i { font-size: 11px; opacity: .9; flex: 0 0 auto; } .qrm-metachip b { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qrm-metachip--table { background: rgba(var(--qrm-accent-rgb), .92); border-color: rgba(255, 255, 255, .5); color: #2A1F17; } .qrm-metachip--table i { color: #2A1F17; opacity: 1; } /* Contact actions strip under the hero */ .qrm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .qrm-action { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 14px; border-radius: var(--qrm-r-md); background: var(--qrm-surface); border: 1px solid var(--qrm-line); color: var(--qrm-ink-soft) !important; font-size: 12.5px; font-weight: 700; text-decoration: none !important; box-shadow: var(--qrm-sh-1); transition: transform .2s var(--qrm-ease), box-shadow .2s, border-color .2s, color .2s; white-space: nowrap; } .qrm-action:hover { transform: translateY(-2px); box-shadow: var(--qrm-sh-2); color: var(--qrm-ink) !important; } .qrm-action i { font-size: 14px; } .qrm-action--call i { color: var(--qrm-brand); } .qrm-action--wa i { color: #25D366; } .qrm-action--map i { color: #4285F4; } .qrm-action--orders i { color: var(--qrm-accent); } .qrm-action span { overflow: hidden; text-overflow: ellipsis; } /* ------------------------------------------------------- 5. STICKY FILTERS */ .qrm-filters { position: sticky; inset-block-start: var(--qrm-appbar-h); z-index: 200; margin-block: 18px 0; padding-block: 10px; background: color-mix(in srgb, var(--qrm-canvas) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow .25s ease, border-color .25s ease; border-block-end: 1px solid transparent; } .qrm-filters.is-pinned { border-block-end-color: var(--qrm-line); box-shadow: 0 10px 26px -22px rgba(36, 26, 19, .8); } .qrm-filters__row { display: flex; align-items: center; gap: 10px; } .qrm-filters__row + .qrm-filters__row { margin-top: 10px; } /* Search */ .qrm-search { position: relative; flex: 1 1 auto; min-width: 0; } .qrm-search input { width: 100%; height: 46px; border-radius: var(--qrm-r-pill); border: 1px solid var(--qrm-line); background: var(--qrm-surface); color: var(--qrm-ink); font-size: 14px; padding-inline: 44px 44px; box-shadow: var(--qrm-sh-1); transition: border-color .2s, box-shadow .2s; outline: none; } .qrm-search input::placeholder { color: var(--qrm-ink-mute); } .qrm-search input:focus { border-color: rgba(var(--qrm-brand-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--qrm-brand-rgb), .12); } .qrm-search__icon { position: absolute; inset-block: 0; inset-inline-start: 16px; display: inline-flex; align-items: center; color: var(--qrm-ink-mute); font-size: 14px; pointer-events: none; } .qrm-search__clear { position: absolute; inset-block-start: 50%; inset-inline-end: 8px; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--qrm-surface-2); color: var(--qrm-ink-soft); font-size: 11px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; } .qrm-search__clear:hover { background: rgba(var(--qrm-brand-rgb), .12); color: var(--qrm-brand); } .qrm-search.has-value .qrm-search__clear { display: inline-flex; } /* View toggle + sort */ .qrm-seg { display: inline-flex; background: var(--qrm-surface); border: 1px solid var(--qrm-line); border-radius: var(--qrm-r-pill); padding: 3px; gap: 2px; flex: 0 0 auto; box-shadow: var(--qrm-sh-1); } .qrm-seg__btn { width: 38px; height: 38px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--qrm-ink-mute); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; } .qrm-seg__btn:hover { color: var(--qrm-brand); } .qrm-seg__btn.is-active { background: linear-gradient(140deg, var(--qrm-brand), var(--qrm-brand-dark)); color: #fff; box-shadow: 0 4px 10px -4px rgba(var(--qrm-brand-rgb), .7); } .qrm-sort { position: relative; flex: 0 0 auto; height: 46px; display: inline-flex; align-items: center; background: var(--qrm-surface); border: 1px solid var(--qrm-line); border-radius: var(--qrm-r-pill); padding-inline: 14px 34px; box-shadow: var(--qrm-sh-1); } .qrm-sort > i { font-size: 12px; color: var(--qrm-brand); margin-inline-end: 7px; } .qrm-sort::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; inset-inline-end: 14px; font-size: 11px; color: var(--qrm-ink-mute); pointer-events: none; } .qrm-sort select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; outline: none; font-size: 12.5px; font-weight: 700; color: var(--qrm-ink-soft); cursor: pointer; max-width: 150px; } @media (max-width: 767.98px) { .qrm-sort { display: none; } } /* Category rail */ .qrm-rail { position: relative; flex: 1 1 auto; min-width: 0; } .qrm-rail__track { display: flex; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding-block: 3px; scroll-snap-type: x proximity; } .qrm-rail__track::-webkit-scrollbar { display: none; } .qrm-rail__track > * { scroll-snap-align: start; } .qrm-rail__nav { position: absolute; inset-block-start: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--qrm-line); background: var(--qrm-surface); color: var(--qrm-ink-soft); font-size: 11px; display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 3; box-shadow: var(--qrm-sh-1); padding: 0; transition: opacity .2s ease, color .2s, border-color .2s; } .qrm-rail__nav:hover { color: var(--qrm-brand); border-color: rgba(var(--qrm-brand-rgb), .35); } .qrm-rail__nav--prev { inset-inline-start: -6px; } .qrm-rail__nav--next { inset-inline-end: -6px; } html[dir="rtl"] .qrm-rail__nav i { transform: scaleX(-1); } /* Fades tell the guest the rail keeps going; on desktop they also stop the chips from sliding out from under the arrows abruptly. */ .qrm-rail::before, .qrm-rail::after { content: ""; position: absolute; inset-block: 0; width: 26px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s ease; } .qrm-rail::before { inset-inline-start: 0; } .qrm-rail::after { inset-inline-end: 0; } html:not([dir="rtl"]) .qrm-rail::before { background: linear-gradient(to right, var(--qrm-canvas), transparent); } html:not([dir="rtl"]) .qrm-rail::after { background: linear-gradient(to left, var(--qrm-canvas), transparent); } html[dir="rtl"] .qrm-rail::before { background: linear-gradient(to left, var(--qrm-canvas), transparent); } html[dir="rtl"] .qrm-rail::after { background: linear-gradient(to right, var(--qrm-canvas), transparent); } .qrm-rail.has-overflow::before, .qrm-rail.has-overflow::after { opacity: 1; } /* No affordance pointing at nothing: the start/end cue disappears once the rail is scrolled to that end. */ .qrm-rail.at-start::before, .qrm-rail.at-end::after { opacity: 0; } .qrm-rail.at-start .qrm-rail__nav--prev, .qrm-rail.at-end .qrm-rail__nav--next { opacity: 0; pointer-events: none; } @media (min-width: 992px) { .qrm-rail.has-overflow .qrm-rail__nav { display: inline-flex; } .qrm-rail.has-overflow .qrm-rail__track { padding-inline: 30px; } } .qrm-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 15px; border-radius: var(--qrm-r-pill); border: 1px solid var(--qrm-line); background: var(--qrm-surface); color: var(--qrm-ink-soft); font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .2s var(--qrm-ease), color .2s, border-color .2s, transform .2s, box-shadow .2s; } .qrm-chip i { font-size: 12px; color: var(--qrm-ink-mute); transition: color .2s; } .qrm-chip__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 19px; padding-inline: 6px; border-radius: var(--qrm-r-pill); background: var(--qrm-surface-2); color: var(--qrm-ink-mute); font-size: 10.5px; font-weight: 800; transition: background .2s, color .2s; } .qrm-chip:hover { border-color: rgba(var(--qrm-brand-rgb), .35); color: var(--qrm-brand); transform: translateY(-1px); } .qrm-chip:hover i { color: var(--qrm-brand); } .qrm-chip.is-active { background: linear-gradient(140deg, var(--qrm-brand), var(--qrm-brand-dark)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(var(--qrm-brand-rgb), .75); } .qrm-chip.is-active i { color: rgba(255, 255, 255, .9); } .qrm-chip.is-active .qrm-chip__count { background: rgba(255, 255, 255, .22); color: #fff; } /* Quick (dietary / offer) filters — they ride inside the category rail, right after "All", so they cost no extra row. Accent tint + a round icon badge keeps them readable as a different kind of control than a category chip. */ .qrm-quick { display: contents; } .qrm-quick > * { scroll-snap-align: start; } /* Hairline that fences the quick filters off from the categories. */ .qrm-rail__sep { flex: 0 0 auto; width: 1px; height: 20px; margin-inline: 3px; border-radius: 1px; background: var(--qrm-line-strong); opacity: .65; scroll-snap-align: none; } .qrm-tag { --qrm-tag-rgb: var(--qrm-brand-rgb); --qrm-tag-ink: var(--qrm-brand); flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding-inline: 8px 14px; border-radius: var(--qrm-r-pill); border: 1px solid rgba(var(--qrm-tag-rgb), .26); background: rgba(var(--qrm-tag-rgb), .07); color: var(--qrm-tag-ink); font-size: 12.5px; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background .2s var(--qrm-ease), color .2s, border-color .2s, transform .2s, box-shadow .2s; } .qrm-tag i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(var(--qrm-tag-rgb), .16); color: var(--qrm-tag-ink); font-size: 11px; transition: background .2s, color .2s; } .qrm-tag:hover { background: rgba(var(--qrm-tag-rgb), .13); border-color: rgba(var(--qrm-tag-rgb), .45); transform: translateY(-1px); } .qrm-tag:focus-visible { outline: 2px solid rgba(var(--qrm-tag-rgb), .55); outline-offset: 2px; } .qrm-tag.is-active { background: linear-gradient(140deg, rgba(var(--qrm-tag-rgb), 1), rgba(var(--qrm-tag-rgb), .76)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -8px rgba(var(--qrm-tag-rgb), .8); } .qrm-tag.is-active i { background: rgba(255, 255, 255, .24); color: #fff; } .qrm-tag--popular { --qrm-tag-rgb: 214, 132, 18; --qrm-tag-ink: #A9670C; } .qrm-tag--offers { --qrm-tag-rgb: 199, 62, 62; --qrm-tag-ink: #C73E3E; } .qrm-tag--veg { --qrm-tag-rgb: 45, 134, 89; --qrm-tag-ink: #2D8659; } .qrm-tag--spicy { --qrm-tag-rgb: 214, 69, 42; --qrm-tag-ink: #C1391F; } @media (max-width: 575.98px) { .qrm-tag { padding-inline: 7px 12px; font-size: 12px; } .qrm-tag i { width: 20px; height: 20px; font-size: 10.5px; } .qrm-rail__sep { margin-inline: 1px; } } /* ------------------------------------------------------- 6. RESULTS HEADER */ .qrm-results { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block: 18px 14px; } .qrm-results__title { margin: 0; font-family: var(--qrm-font-display); font-size: 1.18rem; font-weight: 600; color: var(--qrm-ink); display: inline-flex; align-items: center; gap: 9px; } .qrm-results__title i { font-size: .92rem; color: var(--qrm-brand); } .qrm-results__count { font-size: 12px; font-weight: 700; color: var(--qrm-ink-mute); background: var(--qrm-surface); border: 1px solid var(--qrm-line); padding: 5px 12px; border-radius: var(--qrm-r-pill); } /* ------------------------------------------------------- 7. GRID AND CARDS */ .qrm-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .qrm-grid { gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .qrm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* List view — one readable row per dish (the classic in-restaurant layout) */ .qrm-grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 12px; } @media (min-width: 992px) { .qrm-grid.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .qrm-card { position: relative; display: flex; flex-direction: column; background: var(--qrm-surface); border: 1px solid var(--qrm-line); border-radius: var(--qrm-r-lg); overflow: hidden; box-shadow: var(--qrm-sh-1); transition: transform .28s var(--qrm-ease), box-shadow .28s var(--qrm-ease), border-color .28s; animation: qrm-fade-up .38s var(--qrm-ease) both; } @media (hover: hover) { .qrm-card:hover { transform: translateY(-4px); box-shadow: var(--qrm-sh-3); border-color: rgba(var(--qrm-brand-rgb), .22); } .qrm-card:hover .qrm-card__img { transform: scale(1.06); } } @keyframes qrm-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .qrm-card__stage { position: relative; flex: 0 0 auto; display: block; } .qrm-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(150deg, var(--qrm-surface-2), #EFE6D8); display: block; height: 100%; } .qrm-card__img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transform: scale(1.02); transition: opacity .45s ease, transform .5s var(--qrm-ease); } .qrm-card__img.is-loaded { opacity: 1; transform: scale(1); } /* Placeholder for a dish with no usable photo */ .qrm-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: rgba(var(--qrm-brand-rgb), .30); background: radial-gradient(circle at 50% 42%, rgba(var(--qrm-brand-rgb), .08), transparent 62%), linear-gradient(150deg, var(--qrm-surface-2), #EFE6D8); } /* Badge stack (start corner) */ .qrm-card__badges { position: absolute; inset-block-start: 9px; inset-inline-start: 9px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; z-index: 2; max-width: calc(100% - 18px); } .qrm-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--qrm-r-pill); font-size: 10px; font-weight: 800; line-height: 1.3; color: #fff; letter-spacing: .01em; box-shadow: 0 4px 10px -5px rgba(0, 0, 0, .55); white-space: nowrap; } .qrm-badge i { font-size: 9px; } .qrm-badge--hot { background: linear-gradient(135deg, #F0801F, #D2530F); } .qrm-badge--new { background: linear-gradient(135deg, #3E8ED0, #2B6CB0); } .qrm-badge--save { background: linear-gradient(135deg, #D64545, #A32B2B); } /* Diet pills (end corner) */ .qrm-card__diet { position: absolute; inset-block-start: 9px; inset-inline-end: 9px; display: inline-flex; gap: 5px; z-index: 2; } .qrm-diet { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .4); } .qrm-diet--spicy { color: #D64545; } .qrm-diet--veg { color: #2D8659; } /* Calorie chip (bottom of media) */ .qrm-card__cal { position: absolute; inset-block-end: 9px; inset-inline-start: 9px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--qrm-r-pill); background: rgba(20, 12, 7, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #fff; font-size: 10px; font-weight: 700; } .qrm-card__cal i { font-size: 9px; color: var(--qrm-accent); } /* Quick view button (bottom-end of media, reveals on hover / always on touch) */ .qrm-card__peek { position: absolute; inset-block-end: 9px; inset-inline-end: 9px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .92); color: var(--qrm-ink-soft); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); transition: opacity .25s, transform .25s var(--qrm-ease), background .2s, color .2s; } .qrm-card__peek:hover { background: var(--qrm-brand); color: #fff; } @media (hover: hover) { .qrm-card__peek { opacity: 0; transform: translateY(6px); } .qrm-card:hover .qrm-card__peek { opacity: 1; transform: translateY(0); } } /* Wishlist heart. Storefront only (the QR guest has no account), stacked above the quick-view button so both stay clear of the calorie chip. */ .qrm-card__wish { position: absolute; inset-block-end: 45px; inset-inline-end: 9px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, .92); color: var(--qrm-ink-soft); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .45); transition: opacity .25s, transform .25s var(--qrm-ease), background .2s, color .2s; } .qrm-card__wish:hover { background: var(--qrm-danger); color: #fff; } @media (hover: hover) { .qrm-card__wish { opacity: 0; transform: translateY(6px); } .qrm-card:hover .qrm-card__wish { opacity: 1; transform: translateY(0); } } .qrm-grid.is-list .qrm-card__wish { inset-block-end: 6px; inset-inline-end: 6px; width: 24px; height: 24px; font-size: 10px; } /* Body */ .qrm-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 13px 13px; flex: 1 1 auto; min-width: 0; } .qrm-card__cat { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--qrm-brand); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[dir="rtl"] .qrm-card__cat { letter-spacing: 0; text-transform: none; font-size: 11px; } .qrm-card__title { font-size: 14px; font-weight: 700; line-height: 1.32; color: var(--qrm-ink) !important; text-decoration: none !important; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; } .qrm-card__title:hover { color: var(--qrm-brand) !important; } .qrm-card__desc { font-size: 12px; line-height: 1.55; color: var(--qrm-ink-mute); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .qrm-card__notes { display: flex; flex-wrap: wrap; gap: 5px; } .qrm-note { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--qrm-r-pill); font-size: 10px; font-weight: 700; background: var(--qrm-surface-2); color: var(--qrm-ink-mute); border: 1px solid var(--qrm-line); } .qrm-note i { font-size: 9px; } .qrm-note--stock { color: #226B47; background: rgba(45, 134, 89, .10); border-color: rgba(45, 134, 89, .22); } .qrm-note--out { color: #A32B2B; background: rgba(199, 62, 62, .10); border-color: rgba(199, 62, 62, .22); } .qrm-note--allergy { color: #96650C; background: rgba(216, 155, 31, .12); border-color: rgba(216, 155, 31, .28); } .qrm-note--rating { color: #96650C; background: rgba(216, 155, 31, .12); border-color: rgba(216, 155, 31, .28); } /* Footer: price + add */ .qrm-card__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--qrm-line); } .qrm-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 6px; min-width: 0; } .qrm-price__now { font-size: 15.5px; font-weight: 800; color: var(--qrm-ink); display: inline-flex; align-items: center; white-space: nowrap; } .qrm-price__was { font-size: 11.5px; font-weight: 600; color: var(--qrm-ink-mute); text-decoration: line-through; display: inline-flex; align-items: center; white-space: nowrap; } .qrm-price__was .qrm-sar { opacity: .55; } .qrm-add { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; border: 0; padding: 0; background: linear-gradient(140deg, var(--qrm-brand), var(--qrm-brand-dark)); color: #fff; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 16px -8px rgba(var(--qrm-brand-rgb), .85); transition: transform .2s var(--qrm-ease), box-shadow .2s, filter .2s; } .qrm-add:hover { transform: translateY(-2px) scale(1.04); box-shadow: var(--qrm-sh-brand); } .qrm-add:active { transform: scale(.94); } .qrm-add[disabled] { background: var(--qrm-surface-2); color: var(--qrm-ink-mute); box-shadow: none; cursor: not-allowed; transform: none; } /* Sold-out treatment */ .qrm-card.is-out .qrm-card__media { filter: grayscale(.85) opacity(.6); } .qrm-card.is-out .qrm-price__now { color: var(--qrm-ink-mute); } .qrm-card__soldout { position: absolute; inset-block-start: 50%; inset-inline: 0; transform: translateY(-50%); text-align: center; z-index: 3; pointer-events: none; } .qrm-card__soldout span { display: inline-block; padding: 6px 16px; border-radius: var(--qrm-r-pill); background: rgba(36, 26, 19, .82); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; } /* --- List-view card geometry --- */ .qrm-grid.is-list .qrm-card { flex-direction: row; align-items: stretch; } .qrm-grid.is-list .qrm-card__stage { flex: 0 0 118px; width: 118px; align-self: stretch; } .qrm-grid.is-list .qrm-card__media { aspect-ratio: auto; height: 100%; min-height: 118px; border-radius: 0; } .qrm-grid.is-list .qrm-card__body { padding: 11px 13px; gap: 5px; } .qrm-grid.is-list .qrm-card__desc { -webkit-line-clamp: 2; } .qrm-grid.is-list .qrm-card__peek { display: none; } .qrm-grid.is-list .qrm-card__badges { inset-block-start: 6px; inset-inline-start: 6px; } .qrm-grid.is-list .qrm-badge span { display: none; } .qrm-grid.is-list .qrm-badge { padding: 4px 6px; } .qrm-grid.is-list .qrm-card__diet { inset-block-start: 6px; inset-inline-end: 6px; } .qrm-grid.is-list .qrm-diet { width: 22px; height: 22px; font-size: 10px; } .qrm-grid.is-list .qrm-card__cal { inset-block-end: 6px; inset-inline-start: 6px; padding: 2px 7px; } @media (min-width: 576px) { .qrm-grid.is-list .qrm-card__stage { flex-basis: 148px; width: 148px; } } /* ------------------------------------------------------------ 8. SKELETON */ .qrm-skel { border-radius: var(--qrm-r-lg); border: 1px solid var(--qrm-line); background: var(--qrm-surface); overflow: hidden; } .qrm-skel__media { aspect-ratio: 4 / 3; } .qrm-skel__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 9px; } .qrm-skel__line { height: 11px; border-radius: 6px; } .qrm-skel__line--sm { width: 40%; height: 9px; } .qrm-skel__line--lg { width: 85%; } .qrm-skel__line--md { width: 62%; } .qrm-skel__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .qrm-skel__price { width: 64px; height: 15px; border-radius: 6px; } .qrm-skel__btn { width: 38px; height: 38px; border-radius: 12px; } .qrm-shimmer { background: linear-gradient(100deg, #EFE9DE 20%, #F8F4EC 42%, #EFE9DE 64%); background-size: 220% 100%; animation: qrm-shimmer 1.35s linear infinite; } @keyframes qrm-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } } /* -------------------------------------------------- 9. EMPTY / END / ERROR */ .qrm-state { grid-column: 1 / -1; text-align: center; padding: 52px 22px; background: var(--qrm-surface); border: 1px dashed var(--qrm-line-strong); border-radius: var(--qrm-r-xl); } .qrm-state__icon { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; color: var(--qrm-brand); background: radial-gradient(circle at 40% 35%, rgba(var(--qrm-brand-rgb), .16), rgba(var(--qrm-brand-rgb), .05)); border: 1px solid rgba(var(--qrm-brand-rgb), .16); } /* text-align is restated on the children because the global RTL stylesheet right-aligns bare headings and paragraphs. */ .qrm-state h3 { font-family: var(--qrm-font-display); font-size: 1.2rem; font-weight: 600; color: var(--qrm-ink) !important; margin: 0 0 8px !important; text-align: center !important; } .qrm-state p { color: var(--qrm-ink-mute); font-size: 13px; margin: 0 0 18px; text-align: center !important; } .qrm-state__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .qrm-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--qrm-r-pill); border: 1px solid var(--qrm-line); background: var(--qrm-surface); color: var(--qrm-ink-soft); font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none !important; transition: all .2s var(--qrm-ease); } .qrm-btn:hover { border-color: rgba(var(--qrm-brand-rgb), .35); color: var(--qrm-brand); transform: translateY(-1px); } .qrm-btn--primary { background: linear-gradient(140deg, var(--qrm-brand), var(--qrm-brand-dark)); border-color: transparent; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(var(--qrm-brand-rgb), .9); } .qrm-btn--primary:hover { color: #fff !important; filter: brightness(1.05); } .qrm-loadmore { display: flex; justify-content: center; padding: 26px 0 6px; } .qrm-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid rgba(var(--qrm-brand-rgb), .18); border-top-color: var(--qrm-brand); animation: qrm-spin .7s linear infinite; } @keyframes qrm-spin { to { transform: rotate(360deg); } } .qrm-end { display: flex; align-items: center; gap: 12px; color: var(--qrm-ink-mute); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 26px 0 4px; } html[dir="rtl"] .qrm-end { letter-spacing: 0; text-transform: none; font-size: 12.5px; } .qrm-end::before, .qrm-end::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--qrm-line-strong), transparent); } /* ------------------------------------------------------------ 10. CART BAR */ a.qrm-cartbar, a.qrm-cartbar.cart_icon { position: fixed; inset-block-end: 14px; inset-inline: 14px; z-index: 260; max-width: 620px; margin-inline: auto; width: auto !important; height: auto !important; display: flex !important; align-items: center; gap: 12px; padding: 8px !important; border-radius: var(--qrm-r-pill); background: linear-gradient(135deg, var(--qrm-brand), var(--qrm-brand-dark)) !important; color: #fff !important; text-align: start !important; font-size: inherit !important; line-height: 1.2 !important; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 18px 40px -14px rgba(var(--qrm-brand-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .28s var(--qrm-ease), box-shadow .28s, opacity .25s; cursor: pointer; } .qrm-cartbar:hover { transform: translateY(-3px); color: #fff !important; } .qrm-cartbar:active { transform: translateY(-1px) scale(.985); } .qrm-cartbar.is-empty { opacity: 0; visibility: hidden; transform: translateY(24px); pointer-events: none; } .qrm-cartbar__icon { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .22); font-size: 17px; } .qrm-cartbar__icon > i { color: #fff !important; } /* The physical resets must come BEFORE the logical inset, or they cancel the side it maps to and the badge falls back on top of the basket glyph. */ .qrm-cartbar__count { position: absolute !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; inset-block-start: -5px !important; inset-inline-end: -5px !important; min-width: 21px !important; height: 21px !important; padding-inline: 5px !important; border-radius: var(--qrm-r-pill) !important; background: var(--qrm-accent) !important; color: #2A1F17 !important; font-size: 10.5px !important; font-weight: 800 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 2px solid var(--qrm-brand-dark) !important; line-height: 1 !important; margin: 0 !important; } .qrm-cartbar__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-inline: 2px; } .qrm-cartbar__label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .74); } html[dir="rtl"] .qrm-cartbar__label { letter-spacing: 0; text-transform: none; font-size: 11px; } .qrm-cartbar__total { font-size: 14.5px; font-weight: 800; color: #fff; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qrm-cartbar__total .qrm-sar { filter: brightness(0) invert(1); opacity: .9; } .qrm-cartbar__cta { flex: 0 0 auto; height: 44px; display: inline-flex; align-items: center; gap: 8px; padding-inline: 18px 8px; border-radius: var(--qrm-r-pill); background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .2); font-size: 13px; font-weight: 700; transition: background .25s; } .qrm-cartbar:hover .qrm-cartbar__cta { background: rgba(255, 255, 255, .3); } .qrm-cartbar__arrow { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; transition: transform .25s var(--qrm-ease); } html[dir="rtl"] .qrm-cartbar__arrow i { transform: scaleX(-1); } .qrm-cartbar:hover .qrm-cartbar__arrow { transform: translateX(3px); } html[dir="rtl"] .qrm-cartbar:hover .qrm-cartbar__arrow { transform: translateX(-3px); } @media (max-width: 400px) { .qrm-cartbar__cta-text { display: none; } .qrm-cartbar__cta { padding-inline: 8px; } } /* ── Docked on top of the storefront's mobile tab bar ───────────────────── On a QR table the menu owns the whole screen and the bar floats as a pill. Inside the storefront layout the page already has a fixed bottom tab bar, and the floating pill used to land right on top of it — the checkout CTA covered the tabs. There the bar drops its side gaps and parks flush on the dock (`--m-tabbar-h`, published by modern-2026-mobile-pages.css): the two stack into one bottom dock, CTA above, tabs below, touching. `var(--m-tabbar-h, 0px)` keeps the QR pages on their original placement. */ @media (max-width: 991.98px) { body:has(.m-bottom-tabs) a.qrm-cartbar, body:has(.m-bottom-tabs) a.qrm-cartbar.cart_icon { inset-inline: 0; inset-block-end: var(--m-tabbar-h, 0px); max-width: none; margin-inline: 0; padding: 8px 12px !important; border-radius: 20px 20px 0 0; border-block-end: 0; box-shadow: 0 -16px 34px -22px rgba(var(--qrm-brand-rgb), .95); } /* Sliding it away must not leave a gap over the tabs, and there is no hover lift to make on a touch dock. */ body:has(.m-bottom-tabs) a.qrm-cartbar:hover, body:has(.m-bottom-tabs) a.qrm-cartbar:active { transform: none; } body:has(.m-bottom-tabs) a.qrm-cartbar.is-empty { transform: translateY(100%); } /* Back-to-top and the layout's floating buttons clear both bars. */ body:has(.m-bottom-tabs) .qrm-top { inset-block-end: calc(var(--m-tabbar-h, 0px) + 74px); } body:has(a.qrm-cartbar:not(.is-empty)) .nx-wa-float, body:has(a.qrm-cartbar:not(.is-empty)) .nx-theme-toggle { bottom: calc(var(--m-tabbar-h, 0px) + 74px); } } /* Legacy `.topbar_cart_qty` rules from style.css must not reposition our badge */ .qrm-cartbar .topbar_cart_qty:not(.qrm-cartbar__count) { position: static; background: transparent; color: inherit; width: auto; height: auto; padding: 0; margin: 0; border: 0; font-size: inherit; } /* ---------------------------------------------------------- 11. BACK TO TOP */ .qrm-top { position: fixed; inset-block-end: 76px; inset-inline-end: 14px; z-index: 250; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--qrm-line); background: var(--qrm-surface); color: var(--qrm-ink-soft); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--qrm-sh-2); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, visibility .25s, transform .25s var(--qrm-ease), color .2s; padding: 0; } .qrm-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .qrm-top:hover { color: var(--qrm-brand); border-color: rgba(var(--qrm-brand-rgb), .35); } /* -------------------------------------------------------- 12. ACCESSIBILITY */ .qrm-sronly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .qrm-root body *, .qrm-root body *::before, .qrm-root body *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------- 13. PHONES */ @media (max-width: 575.98px) { html.qrm-root { --qrm-appbar-h: 54px; } .qrm-root body { padding-bottom: 96px; } .qrm-hero { padding-block: 12px 0; } .qrm-hero__card { min-height: 158px; padding: 16px; border-radius: var(--qrm-r-lg); } .qrm-shell { padding-inline: 12px; } /* Icon-only actions, all on one row */ .qrm-action { flex: 1 1 0; min-width: 0; padding: 11px 8px; } .qrm-action span { display: none; } .qrm-action i { font-size: 16px; } /* The hero already names the branch — the full postal address is noise on a phone-sized card. */ .qrm-metachip--address { display: none; } .qrm-filters { margin-top: 14px; padding-block: 8px; } .qrm-results { margin-block: 14px 10px; } .qrm-results__title { font-size: 1.05rem; } .qrm-card__body { padding: 10px 11px 12px; } .qrm-card__title { font-size: 13px; } .qrm-card__desc { font-size: 11.5px; -webkit-line-clamp: 2; } .qrm-price__now { font-size: 14.5px; } .qrm-add { width: 34px; height: 34px; font-size: 13px; border-radius: 11px; } .qrm-cartbar { inset-inline: 10px; inset-block-end: 10px; } .qrm-top { inset-block-end: 70px; inset-inline-end: 10px; } } /* ========================================================================== SUB-PAGE APP BAR (.qrm-appbar--sub) Checkout, payment and my-orders share the menu's bar, but lead with a back arrow and the page name instead of the brand block. ========================================================================== */ .qrm-appbar--sub .qrm-appbar__inner { display: flex; align-items: center; gap: 10px; } .qrm-appbar__back { flex: none; } html[dir="rtl"] .qrm-appbar__back i { transform: none; } html[dir="ltr"] .qrm-appbar__back i { transform: scaleX(-1); } .qrm-appbar__titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: center; } .qrm-appbar__title { font-size: 15px; font-weight: 800; color: var(--qrm-ink); display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qrm-appbar__title i { color: var(--qrm-brand); font-size: 13px; } .qrm-appbar--sub .qrm-appbar__sub { font-size: 11.5px; font-weight: 700; color: var(--qrm-ink-mute); display: inline-flex; align-items: center; justify-content: center; gap: 5px; } .qrm-appbar--sub .qrm-appbar__sub i { font-size: 10px; color: var(--qrm-brand); } /* Sub-pages carry their own bottom action bar, so the menu's cart-bar clearance would leave a dead band under the last card. */ .qrm-root.qrm-sub body { padding-bottom: 0; } /* A late `body { background: #fafafa }` from the page stylesheets beat the token background, leaving the canvas beige visible only where the body box ended — a two-tone page. */ html.qrm-root body { background: var(--qrm-canvas) !important; } /* ========================================================================== 14. THE APP BAR ON A LAPTOP -------------------------------------------------------------------------- One bar serves the whole flow, but a 54px phone chrome dropped on a 1600px monitor reads as a broken page: a lone back arrow, a centred label and a tiny glyph floating in half a metre of white. Below 992px the bar keeps its phone shape; from 992px up it grows into a real desktop header — brand on the start side, the page it belongs to next to it, and labelled controls at the end. ========================================================================== */ /* Parts that only the shared partial emits. Off by default; the desktop block below is what switches them on. */ .qrm-appbar__sep, .qrm-appbar__pill, .qrm-appbar__back-label, .qrm-iconbtn__label { display: none; } .qrm-iconbtn--labelled { white-space: nowrap; } /* ------------------------------------------------------- phones + tablets */ @media (max-width: 991.98px) { /* A titled sub-bar leads with the back arrow and the page name; the brand block would push both off a 360px screen. */ .qrm-appbar--titled .qrm-appbar__brand { display: none; } } /* --------------------------------------------------------------- desktop */ @media (min-width: 992px) { html.qrm-root { --qrm-appbar-h: 72px; } .qrm-appbar { background: rgba(255, 255, 255, .92); border-block-end-color: var(--qrm-line-strong); } .qrm-appbar.is-scrolled { background: rgba(255, 255, 255, .97); box-shadow: 0 10px 30px -22px rgba(36, 26, 19, .7); } .qrm-appbar__inner { max-width: 1320px; padding-inline: 28px; gap: 14px; } /* Brand */ .qrm-appbar__logo { width: 42px; height: 42px; border-radius: 13px; font-size: 17px; } .qrm-appbar__logo--img { width: auto; min-width: 42px; max-width: 148px; padding: 5px 8px; } .qrm-appbar__name { font-size: 15.5px; max-width: 260px; } .qrm-appbar__brand .qrm-appbar__sub { font-size: 11.5px; max-width: 260px; } .qrm-appbar--titled .qrm-appbar__brand { margin-inline-end: 0; } /* Divider between "which restaurant" and "which screen" */ .qrm-appbar__sep { display: block; flex: 0 0 1px; width: 1px; height: 30px; background: var(--qrm-line-strong); margin-inline: 4px; } /* Page title — reads as a heading beside the brand, not a centred label */ .qrm-appbar__titles { flex: 1 1 auto; text-align: start; align-items: flex-start; margin-inline-end: auto; } .qrm-appbar__title { justify-content: flex-start; font-size: 17px; } .qrm-appbar__title i { font-size: 15px; } /* The brand block already names the table — twice is clutter. Matches the weight of `.qrm-appbar--sub .qrm-appbar__sub`, which sets it visible. */ .qrm-appbar--sub .qrm-appbar__sub--under { display: none; } /* Actions. The round-button size comes first so the pills below — which share `.qrm-iconbtn` and weigh the same — are the ones that win. */ .qrm-iconbtn { width: 40px; height: 40px; font-size: 15px; } /* Back — a labelled pill, which is what a mouse user expects */ .qrm-appbar__back { width: auto; height: 40px; padding-inline: 15px; gap: 8px; border-radius: var(--qrm-r-pill); } .qrm-appbar__back-label { display: inline; font-size: 13px; font-weight: 700; } .qrm-iconbtn--labelled { width: auto; padding-inline: 15px; gap: 8px; } .qrm-iconbtn__label { display: inline; font-size: 13px; font-weight: 700; } /* Inside a pill the badge belongs after the label, not clipped to a corner */ .qrm-iconbtn--labelled .qrm-iconbtn__badge { position: static; border: 0; min-width: 20px; height: 20px; line-height: 20px; background: rgba(var(--qrm-brand-rgb), .14); color: var(--qrm-brand); } .qrm-iconbtn--labelled:hover .qrm-iconbtn__badge { background: var(--qrm-brand); color: #fff; } /* Table pill — the one fact a guest checks twice before paying */ .qrm-appbar__pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding-inline: 15px; border-radius: var(--qrm-r-pill); background: rgba(var(--qrm-accent-rgb), .16); border: 1px solid rgba(var(--qrm-accent-rgb), .38); color: var(--qrm-ink); font-size: 12.5px; font-weight: 700; } .qrm-appbar__pill i { font-size: 12px; color: var(--qrm-brand); } .qrm-appbar__pill b { font-weight: 800; font-variant-numeric: tabular-nums; } .qrm-lang { height: 40px; font-size: 13px; padding-inline: 14px 32px; } } /* ========================================================================== 15. DESKTOP LAYER — the menu as a page, not a stretched phone ========================================================================== */ @media (min-width: 992px) { .qrm-shell { max-width: 1320px; padding-inline: 28px; } .qrm-root body { padding-bottom: 118px; } /* Hero: a wide screen can carry a real cover image */ .qrm-hero { padding-block: 26px 0; } .qrm-hero__card { min-height: 310px; padding: 34px 38px; border-radius: 28px; } .qrm-hero__body { max-width: 900px; } .qrm-hero__eyebrow { font-size: 11.5px; margin-bottom: 14px; } .qrm-hero__title { font-size: clamp(2.1rem, 2.7vw, 3rem); margin-bottom: 14px; } .qrm-hero__meta { gap: 9px; } .qrm-metachip { font-size: 13px; padding: 7px 14px; } /* Contact strip: chips sized to their text instead of four stretched bars. The app bar carries a labelled "my orders" button at this width, so the strip drops its copy of it rather than saying the same thing twice. */ .qrm-actions { margin-top: 16px; gap: 10px; flex-wrap: nowrap; } .qrm-action { flex: 0 0 auto; padding: 12px 20px; font-size: 13.5px; border-radius: var(--qrm-r-pill); } .qrm-action--orders { display: none; } /* The rail arrows sit over the track, so the first and last chip need to start clear of them. */ .qrm-rail.has-overflow .qrm-rail__track { padding-inline: 40px; } /* Filter bar */ .qrm-filters { margin-block: 24px 0; padding-block: 14px; } .qrm-filters__row + .qrm-filters__row { margin-top: 12px; } .qrm-search { flex: 0 1 460px; } .qrm-search input { height: 48px; font-size: 14.5px; } .qrm-sort { height: 48px; } .qrm-filters__row:first-child { gap: 12px; } .qrm-filters__row:first-child .qrm-seg { margin-inline-start: auto; } /* Results header */ .qrm-results { margin-block: 26px 18px; } .qrm-results__title { font-size: 1.5rem; } .qrm-results__count { font-size: 13px; padding: 7px 14px; } .qrm-grid { gap: 20px; } /* Cart bar: docked to the corner like a desktop app, not stretched across the foot of a 1600px window. */ a.qrm-cartbar, a.qrm-cartbar.cart_icon { inset-inline-start: auto; inset-inline-end: 28px; inset-block-end: 24px; width: min(420px, calc(100vw - 56px)) !important; max-width: none; margin-inline: 0; padding: 10px !important; } .qrm-cartbar__label { font-size: 10.5px; } .qrm-cartbar__total { font-size: 15.5px; } /* Clear of the cart bar, which now owns the same corner */ .qrm-top { inset-block-end: 100px; inset-inline-end: 28px; } } @media (min-width: 1400px) { .qrm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; } }