/* premium_menu.css — 2026 dark-glassmorphism mobile-app menu.
Matches the reference mock: dark charcoal background, full-color food
photo cards stacked vertically, sticky bottom nav, welcome overlay
that fades into the menu. Editorial serif for headings + geometric
sans for prices. */
:root {
--bg: #0d0d0f;
--bg-2: #15151a;
--bg-3: #1c1c22;
--line: #2a2a32;
--ink: #f5f5f7;
--ink-soft: #b3b3bd;
--ink-muted: #6a6a76;
--brand: #c9a96e; /* warm gold default */
--brand-soft: rgba(201, 169, 110, 0.18);
--bad: #ff5566;
--good: #34c97e;
--radius: 18px;
--radius-sm: 12px;
--radius-lg: 24px;
--shadow-card: 0 10px 28px rgba(0,0,0,0.45);
--shadow-pill: 0 8px 22px rgba(0,0,0,0.55);
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0; background: var(--bg);
color: var(--ink);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
overscroll-behavior: none;
}
body {
/* Desktop: center the mobile-app frame with a soft glow gradient */
min-height: 100vh;
background:
radial-gradient(60% 40% at 50% 0%, rgba(201,169,110,0.06), transparent 70%),
var(--bg);
}
button { font-family: inherit; }
/* ═════════════════ WELCOME OVERLAY ═════════════════ */
.welcome-overlay {
position: fixed; inset: 0; z-index: 9000;
display: flex; flex-direction: column;
transition: opacity 0.45s ease, transform 0.45s ease;
}
.welcome-overlay.is-hiding {
opacity: 0;
pointer-events: none;
transform: scale(1.02);
}
.welcome-hero {
flex: 1;
background-size: cover;
background-position: center;
background-color: #181820;
position: relative;
}
/* Soft gradient at the bottom so the card never floats over a busy image */
.welcome-hero::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom,
rgba(0,0,0,0.05) 0%,
rgba(0,0,0,0.25) 55%,
rgba(13,13,15,0.95) 95%,
var(--bg) 100%);
}
.welcome-hero-fallback {
background:
radial-gradient(circle at 30% 30%, rgba(201,169,110,0.2), transparent 60%),
linear-gradient(135deg, #1a1a22 0%, #0d0d0f 60%);
}
.welcome-card {
margin: -40px auto 0;
width: calc(100% - 32px);
max-width: 380px;
background: linear-gradient(180deg, rgba(28,28,34,0.92) 0%, rgba(15,15,18,0.98) 100%);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--radius-lg);
padding: 26px 22px 22px;
text-align: center;
z-index: 2;
box-shadow: var(--shadow-card);
transform: translateY(-30px);
margin-bottom: 30px;
}
.welcome-logo {
width: 56px; height: 56px; object-fit: contain;
margin: -42px auto 12px;
display: block;
border-radius: 50%;
background: var(--bg-2);
border: 1px solid rgba(255,255,255,0.08);
padding: 6px;
}
.welcome-logo-emoji {
font-size: 32px; color: var(--brand); line-height: 1;
}
.welcome-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.6rem; font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.welcome-tag {
color: var(--ink-soft);
font-size: 0.85rem;
margin-bottom: 22px;
letter-spacing: 0.02em;
}
.welcome-cta {
width: 100%;
background: var(--brand);
color: #0d0d0f;
border: 0;
border-radius: 999px;
padding: 14px 22px;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform 0.1s, filter 0.15s;
box-shadow: 0 6px 20px rgba(201,169,110,0.35);
}
.welcome-cta:active { transform: scale(0.98); }
.welcome-cta:hover { filter: brightness(1.1); }
/* ═════════════════ MENU SCREEN ═════════════════ */
.menu-screen {
max-width: 480px;
margin: 0 auto;
min-height: 100vh;
padding-bottom: 160px; /* room for cart pill + bottom nav */
}
.menu-header {
padding: 20px 18px 14px;
text-align: center;
position: relative;
}
.menu-logo,
.menu-logo-emoji {
width: 48px; height: 48px;
margin: 0 auto 6px;
display: block;
border-radius: 50%;
object-fit: contain;
background: var(--bg-2);
padding: 4px;
border: 1px solid rgba(255,255,255,0.06);
}
.menu-logo-emoji {
display: flex; align-items: center; justify-content: center;
color: var(--brand); font-size: 22px;
background: var(--bg-2);
}
.menu-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.15rem; font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink);
}
.menu-table-pill {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 8px;
background: var(--brand-soft);
color: var(--brand);
padding: 4px 14px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid rgba(201,169,110,0.25);
}
/* ─── Horizontal tab strip ─── */
.tab-strip {
position: sticky;
top: 0;
z-index: 30;
background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 80%, rgba(13,13,15,0.6) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
gap: 8px;
padding: 10px 16px 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border-bottom: 1px solid var(--line);
}
.tab-strip::-webkit-scrollbar { display: none; }
.tab-pill {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-2);
color: var(--ink-soft);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 14px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tab-pill:hover { background: var(--bg-3); color: var(--ink); }
.tab-pill.active {
background: var(--brand);
color: #0d0d0f;
border-color: var(--brand);
box-shadow: 0 4px 14px rgba(201,169,110,0.3);
}
.tab-emoji { font-size: 0.88rem; line-height: 1; }
/* ─── Menu body / category sections ─── */
.menu-body {
padding: 6px 16px 24px;
}
.cat-section { padding: 18px 0 4px; scroll-margin-top: 80px; }
.cat-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.4rem;
font-weight: 600;
margin: 4px 2px 6px;
letter-spacing: -0.01em;
}
.cat-sub {
color: var(--ink-soft);
font-size: 0.82rem;
margin: 0 2px 12px;
}
/* 2-column responsive grid — at <360px it collapses to a single column
so the names + prices stay readable on tiny phones. Default is 2-up
to cut the scroll length in half vs. the old stacked layout. */
.card-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 359px) {
.card-list { grid-template-columns: 1fr; }
}
/* Mobile-phone refinements (≤ 480 px — typical phone widths after
the customer scans the kiosk QR). The defaults size the layout for
a centered 480-px "phone frame" mocked on a desktop; on a real
phone the same numbers leave the card grid tight against the
edges and the bottom-sheet panels touching the bezels. Pull the
container in by safe-area insets, drop the side padding a hair,
and let the bottom sheet breathe with a 12-px gutter. */
@media (max-width: 480px) {
.menu-screen {
padding-left: max(8px, env(safe-area-inset-left));
padding-right: max(8px, env(safe-area-inset-right));
padding-bottom: calc(160px + env(safe-area-inset-bottom));
}
.menu-header { padding: 14px 4px 10px; }
.card-list { gap: 10px; }
.prod-body { padding: 8px 8px 10px; }
/* Bottom-sheet (item detail / cart) — let it span full width
with a small gutter rather than the desktop-style centered
max-width: 480px which on a 360-414 px phone is also exactly
the viewport, leaving zero margin. */
.bottom-sheet-panel {
margin: 0 8px;
max-width: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
/* ─── Product card (2-up grid layout) ─────────────────────────────
Top: 4:3 photo with the [+] button overlaid in the top-right corner.
Bottom: name + price on a dark band. Tap anywhere on the card opens
the detail sheet; tap on the [+] adds directly (stops propagation). */
.prod-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--radius);
background: var(--bg-2);
border: 1px solid rgba(255,255,255,0.04);
cursor: pointer;
box-shadow: var(--shadow-card);
transition: transform 0.12s ease, border-color 0.15s;
/* Lazy-paint: the browser skips layout + paint of off-screen cards
and only realizes them as they scroll near the viewport. Combined
with the lazy/async ![]()
below, the cost of a 230-product menu
on first paint drops to roughly the first screenful.
`contain-intrinsic-size` reserves space so the scrollbar + the
JS "scroll to category" jumps stay accurate before un-painted
cards have been realized. Slightly over-reserve (real cards are
~200-260px tall on mobile) so the scrollbar doesn't grow as
cards realize — shorter cards = page compacts under finger,
which scroll anchoring (default 'auto') keeps stable. */
content-visibility: auto;
contain-intrinsic-size: 280px;
}
.prod-card:active { transform: scale(0.98); }
.prod-card:hover { border-color: rgba(201,169,110,0.25); }
.prod-img-wrap {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--bg-3);
/* Filled inline from the template with the product image as a blurred
fill so portrait/square photos in a 4:3 frame look intentional
rather than letterboxed against a dead background. The sharp
`.prod-img` sits on top with object-fit:contain. */
background-size: cover;
background-position: center;
}
.prod-img-wrap::before {
/* Dark veil over the blurred backdrop so the sharp image still pops
and the letterbox area stays close to the card surface tone. */
content: '';
position: absolute; inset: 0;
background: rgba(13,13,15,0.55);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
z-index: 0;
}
.prod-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
/* `contain` was requested — preserve the whole image inside the
frame at full height, even when the photo aspect doesn't match the
4:3 container. The blurred backdrop above hides the empty bars. */
object-fit: contain;
z-index: 1;
}
.prod-img-fallback {
position: absolute; inset: 0;
background:
radial-gradient(circle at 50% 40%, rgba(201,169,110,0.22), transparent 60%),
linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
display: flex; align-items: center; justify-content: center;
color: var(--brand); font-size: 1.8rem;
z-index: 1;
}
.prod-body {
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
gap: 2px;
min-height: 56px;
justify-content: center;
}
.prod-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 0.92rem;
font-weight: 600;
margin: 0;
line-height: 1.25;
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.prod-price {
color: var(--brand);
font-weight: 700;
font-size: 0.92rem;
letter-spacing: 0.01em;
line-height: 1.1;
margin-top: 2px;
}
/* Quick-add button — top-right corner of the photo. Doesn't fight with
the price (which now lives below the photo). */
.prod-add {
position: absolute;
top: 8px;
right: 8px;
width: 34px; height: 34px;
border-radius: 50%;
background: var(--brand);
color: #0d0d0f;
border: 0;
display: inline-flex;
align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.45);
transition: transform 0.1s;
z-index: 2;
}
.prod-add:active { transform: scale(0.88); }
.prod-add i { font-size: 1rem; }
/* ─── Product detail bottom sheet (full info + add) ─────────────── */
/* Detail-sheet hero: same blurred-backdrop trick as the cards.
We wrap the ![]()
in a div with the image set as a blurred background
so vertical or square photos don't show empty bars. */
.detail-photo-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
overflow: hidden;
background: var(--bg-3);
background-size: cover;
background-position: center;
margin-bottom: 14px;
}
.detail-photo-wrap::before {
content: '';
position: absolute; inset: 0;
background: rgba(13,13,15,0.55);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
z-index: 0;
}
.detail-photo {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
z-index: 1;
}
.detail-photo-fallback {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: var(--radius);
background:
radial-gradient(circle at 50% 40%, rgba(201,169,110,0.22), transparent 60%),
linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
display: flex; align-items: center; justify-content: center;
color: var(--brand);
font-size: 3rem;
margin-bottom: 14px;
}
.detail-name {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.45rem;
font-weight: 600;
margin: 0 0 4px;
color: var(--ink);
line-height: 1.15;
}
.detail-price {
color: var(--brand);
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 12px;
}
.detail-desc {
color: var(--ink-soft);
font-size: 0.9rem;
line-height: 1.45;
margin-bottom: 18px;
}
.detail-qty {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-3);
border-radius: 999px;
padding: 6px;
width: fit-content;
margin-bottom: 14px;
}
.detail-qty button {
width: 34px; height: 34px;
border-radius: 50%;
border: 0;
background: var(--bg);
color: var(--brand);
cursor: pointer;
font-weight: 700;
font-size: 1.1rem;
}
.detail-qty span {
min-width: 24px;
text-align: center;
font-weight: 700;
font-size: 1rem;
}
.empty-state {
text-align: center;
padding: 80px 30px;
color: var(--ink-muted);
}
.empty-state i { font-size: 3rem; opacity: 0.5; }
.empty-state p { margin-top: 12px; font-size: 0.9rem; }
/* ─── Cart pill (sticky above bottom nav) ─── */
.cart-pill {
position: fixed;
bottom: calc(78px + env(safe-area-inset-bottom, 0px));
left: 50%;
transform: translateX(-50%);
z-index: 40;
background: var(--brand);
color: #0d0d0f;
border: 0;
border-radius: 999px;
padding: 12px 22px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
box-shadow: var(--shadow-pill);
animation: cartPillEnter 0.25s ease;
}
@keyframes cartPillEnter {
from { transform: translate(-50%, 14px); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
.cart-pill-count {
background: #0d0d0f;
color: var(--brand);
border-radius: 999px;
padding: 2px 9px;
font-size: 0.78rem;
min-width: 24px;
text-align: center;
}
.cart-pill-lbl { font-size: 0.92rem; }
.cart-pill-total {
background: rgba(0,0,0,0.18);
border-radius: 999px;
padding: 3px 10px;
font-size: 0.88rem;
}
/* ─── Bottom nav ─── */
.bottom-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 35;
display: flex;
background: rgba(13,13,15,0.92);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-top: 1px solid var(--line);
padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
justify-content: space-around;
}
.nav-btn {
flex: 1;
background: transparent;
border: 0;
color: var(--ink-muted);
font-size: 0.7rem;
padding: 6px;
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
transition: color 0.15s;
}
.nav-btn i { font-size: 1.25rem; }
.nav-btn.active { color: var(--brand); }
.nav-btn:hover { color: var(--ink); }
.nav-badge {
position: absolute;
top: 2px; right: 24%;
background: var(--bad);
color: #fff;
font-size: 0.62rem;
padding: 1px 6px;
border-radius: 999px;
font-weight: 700;
min-width: 18px;
text-align: center;
}
/* Pulse the bottom-nav "Order" button while there are items in the cart —
draws the customer's eye to the checkout CTA once they've added
something. JS toggles `.has-items` on the button when count > 0. */
.nav-btn.has-items {
color: var(--brand);
animation: navOrderPulse 1.6s ease-in-out infinite;
}
.nav-btn.has-items i { color: var(--brand); }
.nav-btn.has-items .nav-badge {
/* Match the brand-coloured pulse so the badge doesn't feel detached */
box-shadow: 0 0 0 0 var(--brand);
animation: navBadgePulse 1.6s ease-out infinite;
}
@keyframes navOrderPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@keyframes navBadgePulse {
0% { box-shadow: 0 0 0 0 var(--brand-soft, rgba(245, 197, 24, 0.45)); }
70% { box-shadow: 0 0 0 10px rgba(245, 197, 24, 0); }
100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); }
}
/* Respect "reduce motion" — pulse becomes a still highlight. */
@media (prefers-reduced-motion: reduce) {
.nav-btn.has-items,
.nav-btn.has-items .nav-badge { animation: none; }
}
/* ═════════════════ BOTTOM SHEETS ═════════════════ */
.bottom-sheet {
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
}
.bottom-sheet.is-open { pointer-events: auto; }
.bottom-sheet-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 0.2s ease;
}
.bottom-sheet.is-open .bottom-sheet-backdrop { opacity: 1; }
.bottom-sheet-panel {
position: absolute;
left: 0; right: 0; bottom: 0;
background: var(--bg-2);
border-radius: 22px 22px 0 0;
border-top: 1px solid var(--line);
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
max-height: 88vh;
display: flex;
flex-direction: column;
max-width: 480px;
margin: 0 auto;
box-shadow: 0 -14px 40px rgba(0,0,0,0.6);
}
.bottom-sheet.is-open .bottom-sheet-panel { transform: translateY(0); }
.bottom-sheet-handle {
width: 40px; height: 4px;
background: var(--line);
border-radius: 99px;
margin: 8px auto 0;
}
.bottom-sheet-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px 10px;
border-bottom: 1px solid var(--line);
}
.bottom-sheet-header h3 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
margin: 0;
flex: 1;
}
.sheet-close {
background: var(--bg-3);
color: var(--ink);
border: 0;
border-radius: 50%;
width: 34px; height: 34px;
display: inline-flex;
align-items: center; justify-content: center;
cursor: pointer;
}
.bottom-sheet-body {
padding: 16px 18px 12px;
overflow-y: auto;
flex: 1;
}
.bottom-sheet-footer {
border-top: 1px solid var(--line);
padding: 12px 18px 14px;
background: var(--bg-2);
}
.sheet-total {
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
.sheet-total-amt {
color: var(--brand);
font-weight: 700;
font-size: 1.4rem;
font-family: 'Playfair Display', Georgia, serif;
}
.sheet-cta {
width: 100%;
background: var(--brand);
color: #0d0d0f;
border: 0;
border-radius: 14px;
padding: 14px 18px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform 0.1s, filter 0.15s;
}
.sheet-cta:active { transform: scale(0.99); }
.sheet-cta:hover { filter: brightness(1.08); }
.sheet-cta-gold { background: var(--brand); }
.sheet-cta:disabled { opacity: 0.5; cursor: not-allowed; }
/* ─── Modifier sheet rows ─── */
.mod-group {
margin-bottom: 14px;
}
.mod-group-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
}
.mod-group-name {
font-weight: 600;
color: var(--ink);
}
.mod-group-hint {
font-size: 0.7rem;
color: var(--ink-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mod-option {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
background: var(--bg-3);
border-radius: 12px;
margin-bottom: 6px;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.12s, border-color 0.12s;
}
.mod-option:hover { background: #23232c; }
.mod-option.is-selected {
border-color: var(--brand);
background: var(--brand-soft);
}
.mod-option input {
accent-color: var(--brand);
width: 18px; height: 18px;
cursor: pointer;
}
.mod-option-name { flex: 1; color: var(--ink); }
.mod-option-charge {
color: var(--brand);
font-weight: 600;
font-size: 0.85rem;
}
/* ─── Cart sheet rows ─── */
.cart-empty {
text-align: center;
padding: 40px 20px;
color: var(--ink-muted);
}
.cart-empty i { font-size: 2.4rem; opacity: 0.6; }
.cart-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
}
.cart-row:last-child { border-bottom: none; }
.cart-row-img {
width: 56px; height: 56px;
border-radius: 10px;
object-fit: cover;
background: var(--bg-3);
flex-shrink: 0;
}
.cart-row-body { flex: 1; min-width: 0; }
.cart-row-name { font-weight: 600; font-size: 0.92rem; }
.cart-row-mods { color: var(--ink-soft); font-size: 0.74rem; margin-top: 2px; }
.cart-row-price {
color: var(--brand);
font-weight: 700;
font-size: 0.92rem;
margin-top: 4px;
}
.cart-qty-control {
display: inline-flex;
align-items: center;
background: var(--bg-3);
border-radius: 999px;
padding: 4px;
gap: 4px;
}
.cart-qty-control button {
width: 28px; height: 28px;
border-radius: 50%;
border: 0;
background: var(--bg);
color: var(--brand);
cursor: pointer;
font-weight: 700;
}
.cart-qty-control span {
min-width: 22px;
text-align: center;
font-weight: 600;
font-size: 0.9rem;
}
.order-note {
width: 100%;
background: var(--bg-3);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 12px;
padding: 10px 12px;
margin-bottom: 10px;
font-family: inherit;
font-size: 0.88rem;
resize: vertical;
}
.order-note:focus {
outline: none;
border-color: var(--brand);
}
/* ─── Help chips ─── */
.help-chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.help-chip {
background: var(--bg-3);
color: var(--ink);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 12px;
font-size: 0.95rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: background 0.15s, border-color 0.15s;
}
.help-chip:hover { background: var(--bg-2); border-color: var(--brand); }
.help-chip i {
color: var(--brand);
font-size: 1.25rem;
}
.help-feedback {
margin-top: 14px;
padding: 14px;
background: var(--brand-soft);
border: 1px solid var(--brand);
border-radius: 12px;
color: var(--brand);
text-align: center;
font-weight: 600;
}
/* ─── Toast ─── */
.toast-mini {
position: fixed;
bottom: 100px;
left: 50%; transform: translateX(-50%);
background: var(--brand);
color: #0d0d0f;
padding: 10px 18px;
border-radius: 999px;
font-weight: 600;
z-index: 60;
box-shadow: var(--shadow-pill);
animation: toastIn 0.28s ease;
}
@keyframes toastIn {
from { transform: translate(-50%, 14px); opacity: 0; }
to { transform: translate(-50%, 0); opacity: 1; }
}
/* ─── Desktop side scenery (the "phone" sits in a soft frame) ─── */
@media (min-width: 640px) {
body::before {
content: '';
position: fixed; inset: 0;
background:
radial-gradient(circle at 8% 50%, rgba(201,169,110,0.05), transparent 35%),
radial-gradient(circle at 92% 50%, rgba(201,169,110,0.05), transparent 35%);
pointer-events: none;
z-index: -1;
}
.menu-screen {
min-height: 100vh;
border-left: 1px solid var(--line);
border-right: 1px solid var(--line);
}
}
/* ═════════════════════════════════════════════════════════════════
KIOSK MODE — fill-the-screen layout for counter tablets
Defaults above are phone-sized (max-width 480px) so QR-scan-on-
phone flow looks right. On a kiosk tablet that container leaves
huge empty bars left and right. `` is
set by the template when extra_context['kiosk_mode'] is True
(see inventory/views_public.py :: kioskmenu_view).
═════════════════════════════════════════════════════════════════ */
/* Drop the desktop side-scenery — we want the menu, not a phone
mockup in the middle of a tablet screen. */
body.kiosk-mode::before { display: none; }
/* Menu screen fills the viewport, no side borders. */
body.kiosk-mode .menu-screen {
max-width: none;
border-left: none;
border-right: none;
padding-left: 24px;
padding-right: 24px;
}
/* Card grid scales with viewport — 2 / 3 / 4 / 5 columns by width.
On the rare super-narrow portrait phone we keep the original
2-up. minmax() keeps cards from getting absurdly wide on a 24"
display while still filling the row. */
body.kiosk-mode .card-list {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 18px;
}
/* Tab strip + cart pill + bottom nav were also clipped to 480px
via their own max-width / centered layout; let them span the
menu-screen container instead. */
body.kiosk-mode .tab-strip,
body.kiosk-mode .menu-header,
body.kiosk-mode .menu-body {
max-width: none;
}
/* Lock the viewport — no horizontal drag, no rubber-band. The
tablet was scrolling sideways because some child (likely a
prod-card under a long product name + the grid track sizing)
was overflowing.
IMPORTANT: use `overflow-x: clip`, NOT `hidden`. Per CSS spec,
`overflow-x: hidden` promotes the element to a scroll container
and turns the OTHER axis into `auto` — that was making html,
body, AND .menu-screen all into scroll containers, so wheel
events over products got captured by the innermost one
(.menu-screen), which had no real overflow to scroll, and the
page document never got the event. `clip` prevents horizontal
overflow visually without making the element scrollable, leaving
the page document as the only scroll container. */
html, body.kiosk-mode {
overflow-x: clip;
max-width: 100vw;
}
body.kiosk-mode {
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}
body.kiosk-mode .menu-screen {
/* NO overflow-* here — setting overflow-x:hidden alongside any
overflow-y value promotes .menu-screen to a scroll container
(per CSS spec: when one axis is non-visible, the other computes
to `auto`). That container then traps wheel/touch events over
the products, kills page scroll, and only the fixed tab-strip
still scrolls the body. The html+body rule above already clips
horizontal overflow, so .menu-screen doesn't need its own. */
width: 100%;
max-width: 100vw;
height: auto;
}
/* Kiosk mode: pin the category tab strip to the very top of the
viewport with position:fixed instead of sticky. Sticky was
silently failing on the in-browser kiosk wrapper (any ancestor
with transform/overflow:hidden — including our own kiosk
addons — re-roots the sticky context to that ancestor instead
of the viewport). Fixed always stays at the top. translateZ(0)
forces a GPU layer so iOS Safari + the kiosk WebView don't
silently un-render the fixed element under fast scroll. */
body.kiosk-mode .tab-strip {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 40;
padding: 14px 24px 16px;
transform: translateZ(0);
will-change: transform;
}
/* Header is no longer above the tab strip — it scrolls with the
page underneath the fixed strip. Push the menu-body down so
the first category card doesn't disappear under the strip. */
body.kiosk-mode .menu-header {
/* Add room above for the fixed tab strip (~80px) so the
header sits below it on first paint. */
padding-top: calc(80px + 14px);
}
body.kiosk-mode .menu-body {
/* Already padded for the bottom nav (160px); keep that. The
tab strip is fixed and the header is the first scrolling
element, so no extra top padding needed here. */
}
/* The category title fonts look stranded on a wide layout — pull
them up a notch so headings read at a reasonable size when the
columns multiply. */
body.kiosk-mode .cat-title { font-size: 1.7rem; }
body.kiosk-mode .menu-name { font-size: 1.4rem; }
/* Bottom-sheet (item detail / cart) stays centered + readable
even on a wide tablet — bumped from 480 to 720 so the photo +
modifier-list breathes. */
body.kiosk-mode .bottom-sheet-panel {
max-width: 720px;
}
/* Tap targets bigger on kiosk — finger taps + customer drag/scroll
across the strip. Bumped from 10px/18px/0.82rem to 16px/26px/
1.1rem so the pills are easy to swipe-scroll and easy to tap
at arm's length. */
body.kiosk-mode .tab-pill {
font-size: 1.1rem;
padding: 16px 26px;
min-height: 56px;
border-radius: 999px;
gap: 8px;
}
body.kiosk-mode .tab-pill .tab-emoji { font-size: 1.2rem; }
body.kiosk-mode .prod-card { min-height: 260px; }
/* Bottom nav: kiosk-only bump in height + tap target size. The
base .bottom-nav is already position:fixed so it sticks fine,
but the buttons are thumb-sized; finger-on-glass kiosk taps
want a more generous strip. translateZ(0) for the same anti-
silent-hide reason the tab strip uses it above. Sits ABOVE the
powered-by strip (bottom: 30px clearance). */
body.kiosk-mode .bottom-nav {
padding: 14px 0;
bottom: 34px; /* clear the powered-by strip (30px tall + 4px inset) */
z-index: 35;
transform: translateZ(0);
will-change: transform;
}
body.kiosk-mode .nav-btn {
font-size: 0.9rem;
gap: 6px;
padding: 10px 6px;
}
body.kiosk-mode .nav-btn i { font-size: 1.7rem; }
/* "Powered by linkandbook.com" — steady strip pinned to the very
bottom of the viewport (z above the bottom-nav, sits BELOW the
nav buttons). Replaces the previous floating pill at bottom:12px
which the kiosk operator reported as visually misaligned and
touching the nav bar. This treatment is a proper section, not a
floating badge. */
body.kiosk-mode .kiosk-powered-strip {
position: fixed;
bottom: 4px; left: 0; right: 0; /* small inset from viewport bottom */
z-index: 36;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
padding: 0 0 env(safe-area-inset-bottom, 0px);
background: #000; /* solid, no blur */
border-top: 1px solid rgba(255,255,255,0.06);
pointer-events: none;
}
/* Drop the badge's own backdrop-filter so the strip+badge stack
reads as a crisp band, not a frosted glass card. */
body.kiosk-mode .kiosk-powered-strip .lb-kiosk-badge {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Ensure the scroll content can clear BOTH the bottom-nav and the
powered-by strip — was 160px in the base for nav only. */
body.kiosk-mode .menu-screen {
padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px));
}
/* Kiosk mode already has the bottom-nav as a permanent "Order" CTA with
a count badge. The floating cart-pill stacked above it duplicates the
same affordance ("View order") and visually fights with the toast that
fires on add-to-cart. Hide it on the kiosk surface; phone / QR-table
users still get the pill (the bottom nav has more browser-chrome
competition on those flows). */
body.kiosk-mode .cart-pill {
display: none !important;
}
/* Toast at the base sits at bottom:100px, which collides with the
bumped-up kiosk bottom-nav (bottom:30px + ~70px height). Raise it
clear of the nav in kiosk mode so the success message is visible. */
body.kiosk-mode .toast-mini {
bottom: calc(120px + env(safe-area-inset-bottom, 0px));
}
/* Portrait tablets (typical kiosk orientation) deserve 3 columns
even on narrower widths so the menu doesn't look phone-y. */
@media (orientation: portrait) and (min-width: 700px) {
body.kiosk-mode .card-list {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
/* Landscape large tablets / kiosk monitors — push to 4–5 columns
without letting individual cards balloon. */
@media (min-width: 1200px) {
body.kiosk-mode .card-list {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
}