/* * Customer PWA — "Fine Dining" dark & gold theme (SRS §19.6, §10). * * The entire customer experience is dark; the Admin Portal stays light. We achieve this by re-mapping the * shared design tokens *scoped to .customer-shell / body.customer-app* (SRS §19.22) — design-tokens.css and * base.css are never edited, so Admin is unaffected while every design-system component (card-ds, btn-ds, * badge-ds, forms) re-skins to dark automatically. */ /* ================= App shell / native feel ================= */ html { height: 100%; scroll-behavior: smooth; } body.customer-app { /* ---- Identity tokens on so the splash, toasts and shell all inherit them (SRS §19.22) ---- */ --color-primary: #e6c15a; /* gold */ --color-primary-hover: #f0d375; --color-primary-contrast: #201a06; /* dark ink on gold fills */ --color-secondary: #c9992b; --color-bg: #0f0f11; /* near-black */ --color-surface: #1b1c21; /* cards */ --color-border: #2c2d34; /* hairlines */ --color-text: #f5f3ee; /* warm off-white */ --color-text-muted: #a29a8b; /* warm grey */ /* Extras */ --c-elevated: #232429; --c-app-2: #17181d; /* raised backdrop (splash / hero / desktop frame) — theme-aware */ --c-gold: linear-gradient(135deg, #f0d375 0%, #c9992b 100%); --c-gold-text: linear-gradient(135deg, #f4dc8a 0%, #d9ad42 100%); --c-gold-soft: rgba(230, 193, 90, 0.12); --c-gold-line: rgba(230, 193, 90, 0.28); --c-ok: #5ec98a; /* completed / served */ --c-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 34px rgba(0, 0, 0, 0.42); --c-gold-glow: 0 8px 26px rgba(230, 193, 90, 0.26); --c-radius-card: 18px; --c-radius-sheet: 26px; --c-spring: cubic-bezier(0.34, 1.56, 0.64, 1); min-height: 100%; background-color: var(--color-bg); color: var(--color-text); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: hidden; overscroll-behavior-y: contain; } .customer-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; max-width: 540px; margin: 0 auto; background-color: var(--color-bg); color: var(--color-text); } .customer-shell a, .customer-shell button, .cat-chip, .add-btn, .stepper__btn { touch-action: manipulation; } .customer-content, .cart-sheet, .cat-chips { -webkit-overflow-scrolling: touch; } /* Branded splash loader (SRS §19.14) — covers the brief shell paint on first load */ .app-splash { position: fixed; inset: 0; z-index: var(--z-toast); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); background: radial-gradient(120% 90% at 50% 20%, var(--c-app-2) 0%, var(--color-bg) 70%); } .app-splash__mark { width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; background: var(--c-gold); color: var(--color-primary-contrast); box-shadow: var(--c-gold-glow); animation: splash-pop 0.5s var(--c-spring) both; } .app-splash__bar { width: 120px; height: 3px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); position: relative; } .app-splash__bar::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--c-gold); border-radius: 999px; animation: splash-slide 1s ease-in-out infinite; } .app-splash.is-hiding { animation: fade-out 0.4s var(--easing-standard) forwards; } /* ================= Header (app bar) ================= */ .customer-header { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); padding-top: max(var(--space-3), env(safe-area-inset-top)); background: color-mix(in srgb, var(--color-surface) 82%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--color-border); } .customer-header__logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; font-size: 1.1rem; border-radius: 10px; background: var(--c-gold); color: var(--color-primary-contrast); box-shadow: var(--c-gold-glow); overflow: hidden; } .customer-header__logo img { width: 100%; height: 100%; object-fit: cover; } .customer-header__title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; } .customer-header__spacer { flex: 1 1 auto; } .customer-header__action { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text); background: var(--c-elevated); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); text-decoration: none; transition: border-color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard); } .customer-header__action:hover { border-color: var(--c-gold-line); text-decoration: none; color: var(--color-text); } .customer-content { flex: 1 1 auto; padding: var(--space-4); padding-bottom: calc(var(--space-8) + 84px); } /* ================= Buttons & links ================= */ a { color: var(--color-primary); } .customer-shell .btn-ds { border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); transition: transform var(--duration-fast) var(--easing-standard), filter var(--duration-base) var(--easing-standard); } .customer-shell .btn-ds--primary { background: var(--c-gold); color: var(--color-primary-contrast); border: none; box-shadow: var(--c-gold-glow); } .customer-shell .btn-ds--primary:hover { filter: brightness(1.04); } .customer-shell .btn-ds--secondary { background: var(--c-elevated); color: var(--color-text); border: 1px solid var(--color-border); } .customer-shell .btn-ds--secondary:hover { background: #2a2b31; border-color: var(--c-gold-line); } .customer-shell .btn-ds:active { transform: scale(0.97); } .customer-shell .btn-ds[disabled] { opacity: 0.55; } .customer-shell .btn-ds--sm { padding: var(--space-1) var(--space-4); font-size: var(--font-size-xs); } .btn-block { width: 100%; } .link-button { background: none; border: none; color: var(--color-primary); padding: 0; min-height: 0; cursor: pointer; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } /* Button loading morph (spinner -> success check), toggled by JS */ .btn-ds .btn-label { transition: opacity var(--duration-fast) var(--easing-standard); } .btn-ds .btn-spinner, .btn-ds .btn-check { display: none; } .btn-ds.is-loading .btn-label { opacity: 0; } .btn-ds.is-loading .btn-spinner { display: inline-block; } .btn-ds.is-done .btn-label, .btn-ds.is-done .btn-spinner { display: none; } .btn-ds.is-done .btn-check { display: inline-block; } .spinner { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(32, 26, 6, 0.35); border-top-color: var(--color-primary-contrast); animation: spin 0.7s linear infinite; } .spinner--gold { border-color: var(--c-gold-soft); border-top-color: var(--color-primary); } /* ================= Card ================= */ .card-ds { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); animation: rise-in var(--duration-slow) var(--easing-standard) both; } /* ================= Menu hero ================= */ /* Compact identity banner: restaurant name + branch on the left, table chip on the right. No logo — kept to roughly half the old height so the menu is reachable sooner. */ .menu-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); /* No bottom margin: the sticky filter bar's own top padding provides the gap, so it matches the gap below. */ margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); text-align: left; background: radial-gradient(130% 140% at 15% -60%, var(--c-gold-soft) 0%, transparent 60%), linear-gradient(180deg, var(--c-app-2) 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-border); animation: rise-in var(--duration-slow) var(--easing-standard) both; } .menu-hero__info { min-width: 0; } .menu-hero__name { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; margin: 0; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--c-gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .menu-hero__branch { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-hero__table { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--c-gold-soft); color: var(--color-primary); border: 1px solid var(--c-gold-line); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); white-space: nowrap; } /* Active-order banner (SRS §10.13) */ .order-banner { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); text-decoration: none; background: var(--c-gold-soft); border: 1px solid var(--c-gold-line); color: var(--color-text); animation: rise-in var(--duration-base) var(--easing-standard) both; } .order-banner:hover { text-decoration: none; color: var(--color-text); } .order-banner__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 0 var(--c-gold-line); animation: pulse-dot 1.8s ease-out infinite; } .order-banner__text { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); } .order-banner__text strong { color: var(--color-primary); } .order-banner__chevron { color: var(--color-text-muted); } /* ================= Search ================= */ /* Search + diet chips share one row to save vertical space; search flexes, diet chips keep their natural width. */ .menu-searchrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .menu-search-wrap { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; } .menu-search__icon { position: absolute; left: var(--space-4); width: 18px; height: 18px; color: var(--color-primary); /* follows the active theme (gold / emerald / deep-gold) */ pointer-events: none; } .menu-search { width: 100%; padding: var(--space-3) var(--space-4); padding-left: calc(var(--space-4) + 26px); border: 1px solid var(--color-border); border-radius: var(--radius-pill); font: inherit; color: var(--color-text); background-color: var(--c-elevated); transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard); } .menu-search::placeholder { color: var(--color-text-muted); } .menu-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--c-gold-soft); } /* ================= Sticky filter bar (search + diet + categories) ================= */ .menu-filters { position: sticky; top: calc(max(12px, env(safe-area-inset-top, 0px)) + 46px); /* sits just under the sticky app header */ z-index: var(--z-sticky); margin: 0 calc(-1 * var(--space-4)); /* Equal vertical padding so the search box has matching space above and below the filter block. */ padding: var(--space-3) var(--space-4); background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); } /* ================= Category chips ================= Fixed-row grid that flows column-major: chip 1 sits above chip 2, chip 3 starts the next column, and so on — so categories fill a compact block that scrolls sideways. Row count is chosen server-side (cat-chips--rows-1 /-2/-3) from the category count: a handful stays on one row, more stack into 2 or 3 rows. Columns are sized to their content so names never wrap or get cut; chips stretch to fill their column so each column reads tidily. */ .cat-chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(1, auto); grid-auto-columns: max-content; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .cat-chips--rows-2 { grid-template-rows: repeat(2, auto); } .cat-chips--rows-3 { grid-template-rows: repeat(3, auto); } .cat-chips::-webkit-scrollbar { display: none; } .cat-chip { padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background-color: var(--c-elevated); color: var(--color-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; white-space: nowrap; text-align: center; transition: transform var(--duration-fast) var(--c-spring), background var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); } .cat-chip:active { transform: scale(0.94); } .cat-chip.is-active { background: var(--c-gold); color: var(--color-primary-contrast); border-color: transparent; box-shadow: var(--c-gold-glow); } /* ================= Left category rail (admin "left" layout) ================= A slim sticky rail of categories on the left with the dishes on the right. Tapping a category filters to it (same JS as the top chips — the rail items carry data-chip). Kept narrow so the dish column stays usable. */ .menu-split { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); } .cat-rail { flex: 0 0 auto; width: 76px; position: sticky; top: calc(max(12px, env(safe-area-inset-top, 0px)) + 108px); max-height: calc(100dvh - 130px); display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none; } .cat-rail::-webkit-scrollbar { display: none; } .cat-rail__item { width: 100%; text-align: left; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); line-height: 1.25; cursor: pointer; white-space: normal; word-break: break-word; transition: background var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--c-spring); } .cat-rail__item:active { transform: scale(0.96); } .cat-rail__item.is-active { background: var(--c-gold-soft); color: var(--color-primary); border-color: var(--c-gold-line); font-weight: var(--font-weight-bold); } .menu-split__main { flex: 1 1 auto; min-width: 0; } /* Align the first section heading with the top of the rail (drop its leading padding in this layout). */ .menu-split__main .menu-section:first-child { padding-top: 0; } /* ================= Compact item card (left-rail layout) ================= For the narrow right-hand column. The essentials stay visible (thumbnail, name, veg tag, price, a short description snippet, size chips, Add); only the extra detail (full description + nutrition) collapses, expanding vertically below the "More" toggle. A block card so everything stacks top-to-bottom (never sideways). Own template (_CustomerMenuItemCompact); shares the JS/data contract with the top card. */ /* Two classes so this wins over the base `.menu-item { display:flex }` regardless of source order. */ .menu-item.menu-item--compact { display: block; padding: var(--space-3); } /* Head: thumbnail + name/veg/price/description snippet. */ .menu-item--compact .menu-item__head { display: flex; gap: var(--space-2); align-items: flex-start; } .menu-item--compact .menu-item__img, .menu-item--compact .menu-item__ph { width: 48px; height: 48px; border-radius: 10px; } .menu-item--compact .menu-item__ph { font-size: 1.1rem; } .menu-item--compact .menu-item__body { flex: 1 1 auto; min-width: 0; } .menu-item--compact .menu-item__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); } .menu-item--compact .menu-item__name { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-sm); } .menu-item--compact .menu-item__titlerow .food-tag { flex: 0 0 auto; } .menu-item--compact .menu-item__price { margin: 3px 0 0; font-size: var(--font-size-sm); } .menu-item--compact .menu-item__price del { font-size: var(--font-size-xs); } .menu-item--compact .menu-item__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* "More info" toggle — collapses ONLY the detail, which opens vertically below. */ .menu-item--compact .menu-item__more { margin-top: var(--space-2); font-size: var(--font-size-xs); } .menu-item--compact .menu-item__more-close { display: none; } .menu-item--compact.is-expanded .menu-item__more-open { display: none; } .menu-item--compact.is-expanded .menu-item__more-close { display: inline; } .menu-item--compact .menu-item__expand { display: none; } .menu-item--compact.is-expanded .menu-item__expand { display: block; } .menu-item--compact .menu-item__expand-inner { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--font-size-sm); color: var(--color-text-muted); animation: rise-in var(--duration-base) var(--easing-standard) both; } .menu-item--compact .menu-item__detail-text { margin: 0; color: var(--color-text); } /* Size chooser: a compact dropdown (the narrow column has no room for a chip row). */ .menu-item--compact .size-select { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); } .menu-item--compact .size-select__label { flex: 0 0 auto; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .size-select__input { flex: 1 1 auto; min-width: 0; padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--c-elevated); color: var(--color-text); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23a29a8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; } .size-select__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--c-gold-soft); } /* Full-width Add button that morphs into a full-width stepper. */ .menu-item--compact .menu-item__foot { margin-top: var(--space-3); } .menu-item--compact .menu-item__foot .menu-item__action { display: block; width: 100%; } .menu-item--compact .menu-item__foot .add-btn { display: block; width: 100%; padding: var(--space-2); text-align: center; } .menu-item--compact .menu-item__foot .stepper { display: flex; width: 100%; justify-content: space-between; } /* Diet filter: compact Veg / Non-veg toggle chips sitting inline beside the search box. No "All" — nothing selected shows everything. */ .diet-filter { display: flex; gap: var(--space-2); flex: 0 0 auto; } /* Mirror the menu-item Veg/Non-veg tag: a coloured tinted box when idle, a solid fill when the filter is on. */ .diet-chip { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1) var(--space-3); min-height: 40px; border-radius: var(--radius-pill); border: 1px solid transparent; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; white-space: nowrap; transition: border-color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard); } .diet-chip:active { transform: scale(0.95); } .diet-chip--veg { color: #4cc47f; background: color-mix(in srgb, #3aa657 20%, var(--color-surface)); border-color: color-mix(in srgb, #3aa657 42%, transparent); } .diet-chip--non { color: #ff7d80; background: color-mix(in srgb, #d1373a 20%, var(--color-surface)); border-color: color-mix(in srgb, #d1373a 42%, transparent); } .diet-chip--veg.is-active { background: #3aa657; border-color: #3aa657; color: #06140c; } .diet-chip--non.is-active { background: #d1373a; border-color: #d1373a; color: #ffffff; } /* Right column of an item card: Add button on top, the compact food-type mark pinned to the bottom-right. */ .menu-item__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--space-2); } /* Compact veg/non-veg tag: the coloured box (tinted fill + border) signals the type and carries the label. */ .food-tag { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 2px var(--space-2); border-radius: var(--radius-pill); border: 1px solid transparent; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); white-space: nowrap; } .food-tag--veg { color: #4cc47f; background: color-mix(in srgb, #3aa657 20%, var(--color-surface)); border-color: color-mix(in srgb, #3aa657 42%, transparent); } .food-tag--non { color: #ff7d80; background: color-mix(in srgb, #d1373a 20%, var(--color-surface)); border-color: color-mix(in srgb, #d1373a 42%, transparent); } /* ================= Sections & item cards ================= */ .menu-section { scroll-margin-top: 112px; padding-top: var(--space-4); } .menu-section__title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; margin: 0 0 var(--space-3); } .menu-section__title::before { content: ""; width: 4px; height: 1.1em; border-radius: 999px; background: var(--c-gold); } .menu-item { display: flex; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--c-radius-card); box-shadow: var(--c-shadow-card); transition: transform var(--duration-base) var(--c-spring), box-shadow var(--duration-base) var(--easing-standard), border-color var(--duration-base) var(--easing-standard); } @media (hover: hover) { .menu-item:hover { transform: translateY(-3px); border-color: var(--c-gold-line); } } .menu-item:active { transform: scale(0.995); } .menu-item__img { width: 68px; height: 68px; flex: 0 0 auto; object-fit: cover; border-radius: 12px; background-color: var(--c-elevated); opacity: 0; filter: blur(8px); transition: opacity 0.5s ease, filter 0.5s ease; } .menu-item__img.is-loaded { opacity: 1; filter: none; } .menu-item__body { flex: 1 1 auto; min-width: 0; } .menu-item__name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-base); font-weight: var(--font-weight-bold); margin: 0; } .menu-item__desc { color: var(--color-text-muted); font-size: var(--font-size-sm); margin: var(--space-1) 0; line-height: 1.45; } .menu-item__price { font-weight: var(--font-weight-bold); color: var(--color-primary); margin-top: var(--space-1); font-size: var(--font-size-lg); } .menu-item__price del { color: var(--color-text-muted); font-weight: var(--font-weight-normal); font-size: var(--font-size-sm); margin-left: var(--space-2); } .menu-item__action { flex: 0 0 auto; display: flex; align-items: flex-start; position: relative; } .menu-item.is-unavailable { opacity: 0.55; box-shadow: none; } /* Placeholder that keeps card layout consistent when an item has no image (images enabled). Same box as .menu-item__img but visible (no blur-up), so every card shares one silhouette. */ .menu-item__ph { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background-color: var(--c-elevated); border: 1px solid var(--color-border); opacity: 0.65; } .menu-item__img.is-tappable, .menu-item__ph.is-tappable { cursor: pointer; } /* "More info" opens the detail bottom sheet (not an inline expand), so the card never grows. */ .menu-item__more { margin-top: var(--space-2); display: inline-flex; align-items: center; gap: 3px; } .menu-item__more::after { content: "›"; font-size: 1.15em; line-height: 1; } /* Popular badge — gold */ .menu-item__name .badge-ds--info { background: var(--c-gold); color: var(--color-primary-contrast); font-weight: var(--font-weight-semibold); } .menu-item__name .badge-ds--info::before { content: "★"; margin-right: 3px; } /* Nutrition tiles */ .nutrition { margin-top: var(--space-3); } .nutrition__title { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 var(--space-2); } .nutrition__list { display: flex; flex-direction: column; gap: var(--space-2); } .nutrition__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .nutrition__name { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; } .nutrition__icon { font-size: 1rem; line-height: 1; } .nutrition__value { color: var(--color-text); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; } .nutrition__notes { display: inline-block; margin: var(--space-3) 0 0; padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); color: var(--color-text-muted); background: var(--c-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .nutrition__notes::before { content: "ℹ︎"; margin-right: 4px; color: var(--color-primary); } /* ================= Add button + stepper ================= */ .add-btn { border: none; background: var(--c-gold); color: var(--color-primary-contrast); font-weight: var(--font-weight-bold); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-5); cursor: pointer; box-shadow: var(--c-gold-glow); transition: transform var(--duration-fast) var(--c-spring), filter var(--duration-base) var(--easing-standard); } .add-btn::before { content: "＋"; margin-right: 3px; font-weight: var(--font-weight-bold); } .add-btn:hover { filter: brightness(1.05); } .add-btn:active { transform: scale(0.92); } .stepper { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px; background-color: var(--c-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-pill); } .stepper__btn { width: 30px; height: 30px; min-height: 30px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--color-primary); font-size: 1.25rem; font-weight: var(--font-weight-bold); line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--c-spring); } .stepper__btn:hover { background: var(--c-gold-soft); } .stepper__btn:active { transform: scale(0.85); } .stepper__qty { min-width: 22px; text-align: center; font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--color-text); font-variant-numeric: tabular-nums; } /* "+1" fly cue on add */ .add-fly { position: absolute; right: 10px; top: 0; pointer-events: none; color: var(--color-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); animation: fly-up 0.7s var(--easing-standard) forwards; } /* ================= Floating cart bar ================= */ .customer-fab-cart { position: fixed; bottom: calc(env(safe-area-inset-bottom) + var(--space-4)); left: 50%; transform: translateX(-50%); width: calc(100% - var(--space-8)); max-width: calc(540px - var(--space-8)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--c-gold); color: var(--color-primary-contrast); border: none; border-radius: var(--radius-pill); box-shadow: var(--c-gold-glow); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); cursor: pointer; z-index: var(--z-overlay); animation: fab-bounce 0.5s var(--c-spring); transition: transform var(--duration-fast) var(--easing-standard); } .customer-fab-cart[hidden] { display: none; } .customer-fab-cart:active { transform: translateX(-50%) scale(0.97); } .customer-fab-cart__count { display: inline-block; min-width: 24px; padding: 2px 7px; margin-right: 4px; background: rgba(32, 26, 6, 0.22); border-radius: var(--radius-pill); text-align: center; font-variant-numeric: tabular-nums; } .customer-fab-cart__count.bump { animation: bump 0.34s var(--c-spring); } .customer-fab-cart__go { display: inline-flex; align-items: center; gap: 6px; } /* ================= Badges & alerts (dark) ================= */ .badge-ds { background: var(--c-elevated); color: var(--color-text); } .badge-ds--info { background: color-mix(in srgb, var(--color-info) 22%, var(--color-surface)); color: #9cc2ff; } .badge-ds--success { background: color-mix(in srgb, var(--c-ok) 20%, var(--color-surface)); color: var(--c-ok); } .badge-ds--warning { background: color-mix(in srgb, var(--color-warning) 24%, var(--color-surface)); color: #f0b24b; } .badge-ds--danger { background: color-mix(in srgb, var(--color-error) 24%, var(--color-surface)); color: #ff8a8a; } .badge-ds--muted { background: var(--c-elevated); color: var(--color-text-muted); } .alert-ds--success { background: color-mix(in srgb, var(--c-ok) 16%, var(--color-surface)); color: var(--c-ok); } .alert-ds--danger { background: color-mix(in srgb, var(--color-error) 18%, var(--color-surface)); color: #ff9d9d; } .alert-ds--info { background: var(--c-gold-soft); color: var(--color-primary); } /* ================= Cart / Review page ================= */ .cart-topbar { margin-bottom: var(--space-2); } .page-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; margin: 0 0 var(--space-4); } .cart-line { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); } .cart-line:last-child { border-bottom: none; } .cart-line__thumb { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; background-color: var(--c-elevated); } .cart-line__thumb--ph { display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); font-size: 1.4rem; opacity: 0.65; } .cart-line__body { flex: 1 1 auto; min-width: 0; } .cart-line__name { font-weight: var(--font-weight-semibold); } .cart-line__price { color: var(--color-primary); font-weight: var(--font-weight-bold); } .cart-note { width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; background: var(--c-elevated); color: var(--color-text); } .cart-note:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--c-gold-soft); } .cart-instructions { width: 100%; min-height: 84px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font: inherit; background: var(--c-elevated); color: var(--color-text); resize: vertical; } .cart-instructions:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--c-gold-soft); } .cart-totals { margin: var(--space-4) 0; padding: var(--space-4); background: var(--c-elevated); border-radius: var(--c-radius-card); border: 1px solid var(--color-border); } .cart-totals__row { display: flex; justify-content: space-between; padding: var(--space-1) 0; color: var(--color-text-muted); } .cart-totals__grand { color: var(--color-text); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); padding-top: var(--space-2); margin-top: var(--space-1); border-top: 1px solid var(--color-border); } .cart-totals__grand span:last-child { color: var(--color-primary); } .cart-note-tax { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: var(--space-2) 0 0; text-align: center; } .section-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 var(--space-2); } /* ================= Order tracker (confirmation) ================= */ .confirm-hero { text-align: center; padding: var(--space-6) var(--space-4); } .confirm-hero__badge { width: 74px; height: 74px; margin: 0 auto var(--space-4); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-gold-soft); border: 2px solid var(--c-gold-line); color: var(--color-primary); font-size: 2rem; animation: pop-badge 0.5s var(--c-spring) both; } .confirm-hero__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); margin: 0; } .confirm-hero__sub { color: var(--color-text-muted); margin: var(--space-2) 0 0; } .order-code { display: inline-block; margin-top: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--c-gold-soft); border: 1px solid var(--c-gold-line); color: var(--color-primary); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; } .reconnect-pill { display: inline-flex; align-items: center; gap: 6px; margin: var(--space-3) 0 0 var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--c-elevated); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); } .reconnect-pill[hidden] { display: none; } .reconnect-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); animation: pulse-dot 1.4s ease-out infinite; } .tracker { list-style: none; margin: 0; padding: var(--space-2) 0; } .tracker__step { position: relative; display: flex; gap: var(--space-3); padding-bottom: var(--space-5); } .tracker__step:last-child { padding-bottom: 0; } .tracker__marker { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-elevated); border: 2px solid var(--color-border); color: var(--color-text-muted); font-size: 0.85rem; z-index: 1; transition: all var(--duration-slow) var(--easing-standard); } /* connector line */ .tracker__step:not(:last-child) .tracker__marker::after { content: ""; position: absolute; top: 32px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + var(--space-5) - 32px); background: var(--color-border); z-index: -1; } .tracker__step:not(:last-child) .tracker__marker::before { content: ""; position: absolute; top: 32px; left: 50%; transform: translateX(-50%); width: 2px; height: 0; background: var(--c-gold); z-index: 0; transition: height 0.6s var(--easing-standard); } .tracker__body { padding-top: 4px; } .tracker__label { font-weight: var(--font-weight-bold); } .tracker__hint { color: var(--color-text-muted); font-size: var(--font-size-sm); } /* done */ .tracker__step.is-done .tracker__marker { background: var(--c-gold); border-color: transparent; color: var(--color-primary-contrast); } .tracker__step.is-done:not(:last-child) .tracker__marker::before { height: calc(100% + var(--space-5) - 32px); } /* active */ .tracker__step.is-active .tracker__marker { border-color: var(--color-primary); color: var(--color-primary); animation: pulse-glow 1.8s ease-out infinite; } .tracker__step.is-active .tracker__label { color: var(--color-primary); } .tracker__step.is-cancelled .tracker__marker { background: color-mix(in srgb, var(--color-error) 24%, var(--color-surface)); border-color: transparent; color: #ff8a8a; } /* ================= Toasts ================= */ .toast-host { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + var(--space-6)); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); width: calc(100% - var(--space-8)); max-width: calc(540px - var(--space-8)); pointer-events: none; } .toast { pointer-events: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #2a2b31; color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--c-shadow-card); font-size: var(--font-size-sm); animation: toast-in 0.3s var(--c-spring); } .toast--error { border-color: color-mix(in srgb, var(--color-error) 50%, var(--color-border)); } .toast.is-out { animation: toast-out 0.3s var(--easing-standard) forwards; } /* ================= Skeleton loaders ================= */ /* While the shell paints, show the menu skeleton and hide the real list. JS removes .is-menu-loading; with JS off the class is never added, so #menuRoot shows and #menuSkeleton stays hidden. */ #menuSkeleton { display: none; } html.is-menu-loading #menuSkeleton { display: block; } html.is-menu-loading #menuRoot, html.is-menu-loading #floatingCart { display: none !important; } .skeleton { position: relative; overflow: hidden; background: var(--c-elevated); border-radius: var(--radius-md); } .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(230, 193, 90, 0.10), transparent); animation: shimmer 1.4s infinite; } .skel-card { display: flex; gap: var(--space-3); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--c-radius-card); } .skel-img { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 12px; } .skel-lines { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-2); } .skel-line { height: 12px; border-radius: 6px; } .skel-line--60 { width: 60%; } .skel-line--40 { width: 40%; } .skel-line--80 { width: 80%; } /* ================= Empty state ================= */ .empty-state { text-align: center; padding: var(--space-8) var(--space-4); } .empty-state__emoji { font-size: 2.75rem; } .empty-state__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin: var(--space-3) 0 var(--space-1); } .empty-state__text { color: var(--color-text-muted); margin: 0 0 var(--space-4); } /* ================= Desktop framing ================= */ @media (min-width: 600px) { body.customer-app { background: radial-gradient(1100px 520px at 50% -10%, var(--c-app-2) 0%, var(--color-bg) 60%); } .customer-shell { box-shadow: 0 0 0 1px var(--color-border), 0 30px 80px rgba(0, 0, 0, 0.6); } } /* ================= Scroll reveal (JS adds .reveal-on) ================= */ #menuRoot.reveal-on .menu-item, #menuRoot.reveal-on .menu-section__title { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--easing-standard), transform 0.5s var(--c-spring); } #menuRoot.reveal-on .menu-item.in, #menuRoot.reveal-on .menu-section__title.in { opacity: 1; transform: none; } /* ================= Subcategories + item variations ================= */ .menu-subgroup { margin-top: var(--space-3); } .menu-subheading { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: var(--space-3) 0 var(--space-1); padding-left: var(--space-1); } /* Compact size chips: tap to select, the side "+ Add" acts on the selected size. */ .size-picker { margin-top: var(--space-2); } .size-picker__label { display: block; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-muted); margin-bottom: 6px; } /* Keep every size on ONE line: the chips share the row equally and shrink to fit rather than wrapping. */ .size-picker__opts { display: flex; flex-wrap: nowrap; gap: var(--space-1); } .size-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; flex: 1 1 0; min-width: 0; padding: 4px 6px; line-height: 1.2; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--c-elevated); color: var(--color-text); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .size-opt__name { width: 100%; text-align: center; font-size: var(--font-size-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .size-opt__price { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; white-space: nowrap; } .size-opt:hover { border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-border)); } .size-opt.is-selected { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 14%, var(--c-elevated)); } .size-opt.is-selected .size-opt__price { color: var(--color-primary); } .size-opt__badge { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--color-primary); color: #1a1206; font-size: 11px; font-weight: var(--font-weight-bold); display: grid; place-items: center; } /* ================= Item detail bottom sheet ================= */ /* Slides up from the bottom with the item's image, name, price, full description and nutrition. Replaces the old inline "More info" expand. Uses design tokens so it re-skins with every customer theme automatically. */ body.customer-app.sheet-open { overflow: hidden; } .item-sheet { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: flex-end; justify-content: center; } .item-sheet[hidden] { display: none; } .item-sheet__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fade-in var(--duration-base) var(--easing-standard); } .item-sheet__panel { position: relative; width: 100%; max-width: 540px; max-height: 90vh; max-height: 90dvh; overflow: hidden; background-color: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--c-radius-sheet) var(--c-radius-sheet) 0 0; box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.5); animation: sheet-up var(--duration-slow) var(--c-spring); } .item-sheet__scroll { max-height: 90vh; max-height: 90dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: max(var(--space-5), env(safe-area-inset-bottom)); } .item-sheet__grip { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; width: 40px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.4); } .item-sheet__close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; width: 34px; height: 34px; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 0.95rem; cursor: pointer; transition: transform var(--duration-fast) var(--c-spring); } .item-sheet__close:active { transform: scale(0.9); } .item-sheet__media { background-color: var(--c-elevated); } .item-sheet__img { width: 100%; height: 220px; object-fit: cover; display: block; } .item-sheet__ph { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; font-size: 3rem; opacity: 0.6; } .item-sheet__head { padding: var(--space-5) var(--space-5) 0; } .item-sheet__name { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; margin: 0; } .item-sheet__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .item-sheet__price { color: var(--color-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); } .item-sheet__body { padding: var(--space-4) var(--space-5) 0; } .item-sheet__body .menu-item__detail-text { color: var(--color-text); font-size: var(--font-size-base); line-height: 1.55; margin: 0 0 var(--space-4); } .item-sheet__body .nutrition { margin-top: 0; } /* ================= View transitions ================= */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; } /* ================= Keyframes ================= */ @keyframes splash-pop { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes splash-slide { 0% { left: -40%; } 100% { left: 100%; } } @keyframes fade-out { to { opacity: 0; visibility: hidden; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes fab-bounce { 0% { opacity: 0; transform: translateX(-50%) translateY(26px) scale(0.9); } 60% { opacity: 1; transform: translateX(-50%) translateY(-5px) scale(1.02); } 100% { transform: translateX(-50%) translateY(0) scale(1); } } @keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 100% { transform: scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 100% { transform: translateX(100%); } } @keyframes pop-badge { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } } @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(230, 193, 90, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(230, 193, 90, 0); } } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(230, 193, 90, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(230, 193, 90, 0); } } @keyframes fly-up { 0% { opacity: 0; transform: translateY(0) scale(0.8); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1.1); } } @keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(14px); } } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } } /* ================= Theme variants (SRS §19.6) — set via data-theme on ================= */ /* Default (no override) = "midnight-gold". */ /* Royal Emerald — dark surfaces, emerald + gold accent */ body.customer-app[data-theme="royal-emerald"] { --color-primary: #34d399; --color-primary-hover: #52e0ab; --color-primary-contrast: #05130d; --color-secondary: #0f9d6b; --color-bg: #0d130f; --color-surface: #161c18; --color-border: #253029; --c-elevated: #1e2620; --c-app-2: #101b15; --c-gold: linear-gradient(135deg, #34d399 0%, #0f9d6b 100%); --c-gold-text: linear-gradient(135deg, #6ee7b7 0%, #10b981 100%); --c-gold-soft: rgba(52, 211, 153, 0.12); --c-gold-line: rgba(52, 211, 153, 0.30); --c-gold-glow: 0 8px 26px rgba(16, 185, 129, 0.26); } /* Ivory Charcoal — premium LIGHT theme; charcoal text + deep-gold accent */ body.customer-app[data-theme="ivory-charcoal"] { --color-primary: #a9781c; --color-primary-hover: #8a6115; --color-primary-contrast: #241c0c; /* dark ink on gold fills */ --color-secondary: #7c6a3f; --color-bg: #f7f4ee; --color-surface: #ffffff; --color-border: #e7e0d2; --color-text: #201d17; --color-text-muted: #6b6355; --c-elevated: #f1ece1; --c-app-2: #efe9dc; --c-gold: linear-gradient(135deg, #caa03a 0%, #a9781c 100%); --c-gold-text: linear-gradient(135deg, #b8860b 0%, #8a6115 100%); --c-gold-soft: rgba(169, 120, 28, 0.12); --c-gold-line: rgba(169, 120, 28, 0.30); --c-gold-glow: 0 8px 24px rgba(169, 120, 28, 0.22); --c-shadow-card: 0 1px 2px rgba(60, 50, 30, 0.06), 0 10px 26px rgba(60, 50, 30, 0.08); } /* ================= Reduced motion ================= */ @media (prefers-reduced-motion: reduce) { .customer-shell *, .customer-shell *::before, .customer-shell *::after, .app-splash, .app-splash * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } .menu-item__img { opacity: 1; filter: none; } }