/* ========================================================================== RAPIDO — Fast-Food Ordering / Kitchen / Fleet System Shared stylesheet for index.html, kitchen-kds.html, driver-fleet.html -------------------------------------------------------------------------- No frameworks. No web fonts. No CDNs — the only assets are local JPEGs under img/, all lazy-loaded below the fold. Everything below is tuned for 60fps on mid-range mobile hardware: - animations are restricted to `transform` and `opacity` (compositor-only) - no box-shadow / filter transitions (they force repaints) - `contain` + `content-visibility` used on long lists ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS Light is the default; dark is applied either by OS preference or by an explicit [data-theme] attribute stamped on by the theme module. The explicit attribute must win over the media query, hence the ordering. -------------------------------------------------------------------------- */ :root { /* Brand */ --brand: #FF4D2D; --brand-hover: #F03A18; --brand-soft: rgba(255, 77, 45, 0.12); --accent: #FFB300; /* Semantic status colours (shared by cart, KDS timers, driver states) */ --ok: #16A34A; --ok-soft: rgba(22, 163, 74, 0.14); --warn: #F59E0B; --warn-soft: rgba(245, 158, 11, 0.16); --danger: #DC2626; --danger-soft: rgba(220, 38, 38, 0.14); /* Surfaces */ --bg: #FFFFFF; --bg-alt: #F5F6F8; --surface: #FFFFFF; --surface-2: #F0F2F5; --border: #E3E6EB; --text: #0F1115; --text-muted: #626A78; --overlay: rgba(12, 15, 22, 0.55); --skeleton-a: #E9ECF1; --skeleton-b: #F4F6F9; /* Elevation — static shadows only, never transitioned */ --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.06); --shadow-md: 0 4px 16px rgba(15, 17, 21, 0.10); --shadow-lg: 0 18px 48px rgba(15, 17, 21, 0.18); /* Geometry */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-full: 999px; /* Minimum comfortable hit target for gloved / rushed taps */ --tap: 48px; /* Motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 380ms; /* Layout */ --header-h: 60px; --tabs-h: 56px; --maxw: 1180px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B0F19; --bg-alt: #0F1522; --surface: #141A26; --surface-2: #1C2432; --border: #26303F; --text: #F2F4F8; --text-muted: #94A0B4; --overlay: rgba(2, 4, 9, 0.72); --skeleton-a: #1A2130; --skeleton-b: #232C3C; --brand-soft: rgba(255, 77, 45, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --bg: #0B0F19; --bg-alt: #0F1522; --surface: #141A26; --surface-2: #1C2432; --border: #26303F; --text: #F2F4F8; --text-muted: #94A0B4; --overlay: rgba(2, 4, 9, 0.72); --skeleton-a: #1A2130; --skeleton-b: #232C3C; --brand-soft: rgba(255, 77, 45, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); } /* The kitchen display is permanently dark — it lives on a wall-mounted monitor in a bright kitchen, so we lock the palette regardless of OS. */ :root[data-force-dark] { --bg: #07090F; --bg-alt: #0B0F19; --surface: #121926; --surface-2: #1A2332; --border: #263143; --text: #F5F7FA; --text-muted: #8E9BB0; --skeleton-a: #141C29; --skeleton-b: #1E2837; } /* -------------------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor scrolling must clear the sticky header + category tabs. */ scroll-padding-top: calc(var(--header-h) + var(--tabs-h) + 8px); } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; /* Prevent iOS rubber-banding from revealing the page behind the cart. */ overscroll-behavior-y: none; } body.is-locked { overflow: hidden; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -0.02em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: 8px; top: -100px; z-index: 200; background: var(--brand); color: #fff; padding: 12px 18px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; transition: top var(--dur) var(--ease); } .skip-link:focus { top: 8px; } .shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; } /* Users who ask the OS for less motion get none of it. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------------- 3. BUTTON PRIMITIVES Every interactive control clears the 48x48 minimum. During a Friday-night rush a mis-tap costs an order, so this is a hard floor, not a guideline. -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--surface-2); --btn-fg: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); padding: 0 18px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--btn-bg); color: var(--btn-fg); font-weight: 650; font-size: 15px; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .btn:active { transform: scale(0.96); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .btn--primary { --btn-bg: var(--brand); --btn-fg: #fff; border-color: transparent; } .btn--primary:hover:not(:disabled) { --btn-bg: var(--brand-hover); } .btn--ghost { --btn-bg: transparent; } .btn--ghost:hover:not(:disabled) { --btn-bg: var(--surface-2); } .btn--success { --btn-bg: var(--ok); --btn-fg: #fff; border-color: transparent; } .btn--block { width: 100%; } .btn--lg { min-height: 58px; font-size: 17px; border-radius: var(--r-lg); } /* Square icon-only control */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .icon-btn:active { transform: scale(0.92); } .icon-btn:hover { background: var(--surface-2); } .icon-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* -------------------------------------------------------------------------- 4. HEADER — shared by all three apps -------------------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 60; height: var(--header-h); display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--border); } .header__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 12px; display: flex; align-items: center; gap: 10px; } .header--wide .header__inner { max-width: none; padding: 0 20px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; } .brand__mark { width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--brand), var(--accent)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; } .brand__name { font-weight: 800; font-size: 17px; letter-spacing: -0.03em; } .brand__sub { display: block; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; } /* Segmented FR / EN language switch */ .lang { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); } .lang__btn { min-width: 44px; height: 38px; padding: 0 10px; border: 0; border-radius: var(--r-full); background: transparent; font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .lang__btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } /* Cart button with live item-count badge */ .cart-btn { position: relative; } .cart-btn__count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full); background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; transform: scale(0); transition: transform var(--dur) var(--ease); } .cart-btn__count.is-visible { transform: scale(1); } .cart-btn__count.is-bumped { animation: badge-bump 380ms var(--ease); } @keyframes badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } /* -------------------------------------------------------------------------- 5. HERO (customer app) -------------------------------------------------------------------------- */ .hero { position: relative; padding: 30px 0 26px; background: radial-gradient(760px 320px at 12% -10%, var(--brand-soft), transparent 62%), radial-gradient(600px 300px at 92% 0%, rgba(255, 179, 0, 0.16), transparent 60%), var(--bg-alt); border-bottom: 1px solid var(--border); overflow: hidden; } .hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; margin-bottom: 14px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); font-size: 13px; font-weight: 650; } .hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.8); } } .hero__title { font-size: clamp(28px, 7vw, 46px); font-weight: 800; letter-spacing: -0.035em; max-width: 15ch; } .hero__title em { font-style: normal; color: var(--brand); } .hero__text { margin-top: 10px; color: var(--text-muted); max-width: 46ch; font-size: 15px; } /* Two-column on desktop, stacked on mobile. */ .hero__inner { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; } @media (min-width: 860px) { .hero__inner { grid-template-columns: 1.15fr 1fr; gap: 40px; } .hero { padding: 46px 0 42px; } } .hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: linear-gradient(135deg, #E9A961, #C9662E); box-shadow: var(--shadow-lg); } .hero__img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 859px) { .hero__media { aspect-ratio: 16 / 9; } } /* Floating "delivered in" chip over the hero photo */ .hero__chip { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: var(--r-full); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border); font-size: 13px; font-weight: 750; animation: float-chip 4.5s var(--ease) infinite; } @keyframes float-chip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .hero__stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; } .hero__stat strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .hero__stat span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* -------------------------------------------------------------------------- 6. STICKY CATEGORY TABS Horizontally scrollable on mobile, snapping so a tab never sits half-cut. -------------------------------------------------------------------------- */ .tabs { position: sticky; top: var(--header-h); z-index: 50; height: var(--tabs-h); display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .tabs__scroll { display: flex; gap: 8px; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs__scroll::-webkit-scrollbar { display: none; } .tab { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-muted); font-size: 14px; font-weight: 650; white-space: nowrap; cursor: pointer; scroll-snap-align: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .tab:active { transform: scale(0.95); } .tab[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); } .tab__emoji { font-size: 16px; } /* -------------------------------------------------------------------------- 7. MENU GRID -------------------------------------------------------------------------- */ .menu { padding: 26px 0 120px; } .section { padding-top: 10px; margin-bottom: 34px; } .section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .section__title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; } .section__count { font-size: 13px; color: var(--text-muted); font-weight: 600; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } /* NOTE: `content-visibility: auto` was removed here deliberately. It made the browser estimate the height of off-screen category sections, so the sticky tabs' scrollIntoView landed at the wrong offset and the page visibly jumped after the real content sized itself. Native lazy-loading on the card images already covers the actual cost this was meant to save. */ .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } @media (hover: hover) { .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } } /* The gradient plate is the image's placeholder: it paints on the first frame so the grid has colour and shape before any JPEG has decoded. */ .card__media { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; background: var(--plate, linear-gradient(135deg, #FFD9A0, #FFB067)); font-size: 52px; line-height: 1; /* Required: without it the hover zoom on .card__img spills over the card body and sits on top of the product name. */ overflow: hidden; } .card__emoji { position: relative; z-index: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.22)); } /* Real photography. width/height are set on the element too, so the grid reserves the right space before decode and never shifts (CLS = 0). */ .card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* Fade in on decode so a slow image arrives gracefully over the gradient rather than snapping in. */ animation: img-in 420ms var(--ease) both; } @keyframes img-in { from { opacity: 0; } to { opacity: 1; } } /* Subtle zoom on hover — transform only, stays on the compositor. */ @media (hover: hover) { .card__img { transition: transform var(--dur-slow) var(--ease); } .card:hover .card__img { transform: scale(1.06); } } .card__tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 10px; border-radius: var(--r-full); background: rgba(10, 12, 18, 0.78); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .card__tag--new { background: var(--brand); } .card__tag--veg { background: var(--ok); } .card__body { display: flex; flex-direction: column; flex: 1; padding: 13px 14px 14px; gap: 4px; } .card__name { font-size: 15.5px; font-weight: 750; letter-spacing: -0.01em; } .card__desc { font-size: 13px; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .card__meta { display: flex; align-items: center; gap: 10px; margin-top: 2px; font-size: 12px; color: var(--text-muted); font-weight: 600; } .card__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .card__price { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; margin-right: auto; font-variant-numeric: tabular-nums; } /* Add button flips to a quantity stepper once the item is in the cart. */ .add-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border: 0; border-radius: var(--r-md); background: var(--brand); color: #fff; font-size: 26px; font-weight: 400; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .add-btn:hover { background: var(--brand-hover); } .add-btn:active { transform: scale(0.9); } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; } .stepper__btn { width: var(--tap); height: var(--tap); border: 0; background: transparent; color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-fast) var(--ease); } .stepper__btn:hover { background: var(--border); } .stepper__btn:active { background: var(--brand-soft); } .stepper__val { min-width: 34px; text-align: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 8. SKELETON LOADING STATE -------------------------------------------------------------------------- */ .skeleton { border-radius: var(--r-lg); background: linear-gradient(100deg, var(--skeleton-a) 30%, var(--skeleton-b) 50%, var(--skeleton-a) 70%); background-size: 220% 100%; animation: shimmer 1.25s linear infinite; } @keyframes shimmer { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } } .sk-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); } .sk-card__media { aspect-ratio: 16 / 10; } .sk-card__body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 9px; } .sk-line { height: 12px; border-radius: 6px; } .sk-line--title { height: 15px; width: 62%; } .sk-line--full { width: 100%; } .sk-line--half { width: 45%; } .sk-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .sk-pill { width: 62px; height: 22px; border-radius: 6px; } .sk-sq { width: 48px; height: 48px; border-radius: var(--r-md); } /* -------------------------------------------------------------------------- 9. SLIDING CART SIDEBAR Translated with transform only so opening the cart never triggers layout. -------------------------------------------------------------------------- */ .scrim { position: fixed; inset: 0; z-index: 90; background: var(--overlay); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .scrim.is-open { opacity: 1; visibility: visible; } .cart { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translate3d(100%, 0, 0); visibility: hidden; transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow); will-change: transform; } .cart.is-open { transform: translate3d(0, 0, 0); visibility: visible; } .cart__head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--border); flex: none; } .cart__title { font-size: 18px; font-weight: 800; margin-right: auto; letter-spacing: -0.02em; } .cart__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px; } .cart-line { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); animation: line-in var(--dur) var(--ease) both; } @keyframes line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .cart-line__thumb { position: relative; width: 52px; height: 52px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 26px; background: var(--plate, var(--surface-2)); overflow: hidden; } .cart-line__img { width: 100%; height: 100%; object-fit: cover; } .cart-line__name { font-size: 14.5px; font-weight: 700; } .cart-line__unit { font-size: 12.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .cart-line__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .cart-line__total { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; } .cart-empty { text-align: center; padding: 56px 20px; color: var(--text-muted); } .cart-empty__icon { font-size: 48px; margin-bottom: 12px; opacity: 0.65; } .cart-empty__title { font-weight: 750; color: var(--text); margin-bottom: 6px; font-size: 16px; } .cart__foot { flex: none; border-top: 1px solid var(--border); padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); background: var(--surface); } /* Address + geofence block */ .field { margin-bottom: 12px; } .field__label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; letter-spacing: 0.01em; } .field__hint { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.45; } .input, .select { width: 100%; min-height: var(--tap); padding: 12px 14px; background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--r-md); font-size: 15px; /* >=16px on iOS avoids focus zoom; 15 + touch-action is fine here */ transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .input:focus { border-color: var(--brand); outline: none; } .input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); } .input--ok { border-color: var(--ok); } textarea.input { min-height: 84px; resize: vertical; } .zone-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; font-weight: 650; background: var(--surface-2); color: var(--text-muted); } .zone-status[data-state="ok"] { background: var(--ok-soft); color: var(--ok); } .zone-status[data-state="bad"] { background: var(--danger-soft); color: var(--danger); } .zone-status[data-state="wait"] { background: var(--warn-soft); color: var(--warn); } .zone-status__icon { flex: none; font-size: 15px; } .totals { margin: 12px 0 14px; } .totals__row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 14px; color: var(--text-muted); } .totals__row span:last-child { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; } .totals__row--grand { margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 19px; font-weight: 800; color: var(--text); } .totals__row--grand span:last-child { font-size: 22px; font-weight: 800; } .totals__row--free span:last-child { color: var(--ok); } /* -------------------------------------------------------------------------- 10. TOASTS -------------------------------------------------------------------------- */ .toasts { position: fixed; z-index: 200; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(440px, calc(100% - 24px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--text-muted); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-in 320ms var(--ease) both; } .toast.is-leaving { animation: toast-out 220ms var(--ease) both; } .toast__icon { flex: none; width: 22px; height: 22px; display: grid; place-items: center; font-size: 16px; margin-top: 1px; } .toast__body { flex: 1; min-width: 0; } .toast__title { font-size: 14px; font-weight: 750; } .toast__msg { font-size: 13px; color: var(--text-muted); margin-top: 2px; } .toast--error { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 60%, var(--surface)); } .toast--error .toast__title { color: var(--danger); } .toast--success { border-left-color: var(--ok); } .toast--success .toast__title { color: var(--ok); } .toast--info { border-left-color: var(--brand); } @keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } } @keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(0.97); } } /* -------------------------------------------------------------------------- 11. CHECKOUT MODAL -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); } .modal.is-open { opacity: 1; visibility: visible; } .modal__backdrop { position: absolute; inset: 0; background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .modal__panel { position: relative; width: min(520px, 100%); max-height: min(88vh, 760px); display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transform: translateY(16px) scale(0.98); transition: transform var(--dur-slow) var(--ease); overflow: hidden; } .modal.is-open .modal__panel { transform: none; } .modal__head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 16px 20px; border-bottom: 1px solid var(--border); flex: none; } .modal__title { font-size: 19px; font-weight: 800; margin-right: auto; letter-spacing: -0.02em; } .modal__body { padding: 18px 20px; overflow-y: auto; flex: 1; } .modal__foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); flex: none; } /* Cash / card segmented toggle */ .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .segmented__opt { position: relative; } .segmented__input { position: absolute; opacity: 0; pointer-events: none; } .segmented__label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; padding: 10px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--bg); cursor: pointer; font-size: 13.5px; font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .segmented__label:active { transform: scale(0.97); } .segmented__emoji { font-size: 22px; } .segmented__input:checked + .segmented__label { border-color: var(--brand); background: var(--brand-soft); } .segmented__input:focus-visible + .segmented__label { outline: 3px solid var(--brand); outline-offset: 2px; } .order-summary { padding: 12px 14px; margin-bottom: 16px; background: var(--surface-2); border-radius: var(--r-md); font-size: 13.5px; } .order-summary__row { display: flex; justify-content: space-between; padding: 3px 0; color: var(--text-muted); } .order-summary__row strong { color: var(--text); font-variant-numeric: tabular-nums; } /* Success confirmation state */ .confirm { text-align: center; padding: 26px 20px 30px; } .confirm__check { width: 78px; height: 78px; margin: 0 auto 18px; border-radius: 50%; background: var(--ok-soft); display: grid; place-items: center; animation: pop-in 420ms var(--ease) both; } .confirm__check svg { width: 40px; height: 40px; stroke: var(--ok); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } .confirm__check svg path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw-check 420ms var(--ease) 180ms forwards; } @keyframes pop-in { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes draw-check { to { stroke-dashoffset: 0; } } .confirm__title { font-size: 22px; font-weight: 800; margin-bottom: 8px; } .confirm__text { color: var(--text-muted); font-size: 14.5px; margin-bottom: 6px; } .confirm__code { display: inline-block; margin-top: 14px; padding: 10px 20px; border-radius: var(--r-md); background: var(--surface-2); font-family: var(--font-num); font-size: 22px; font-weight: 700; letter-spacing: 0.1em; } /* -------------------------------------------------------------------------- 12. STICKY MOBILE CART BAR -------------------------------------------------------------------------- */ .cart-bar { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 18px; border-radius: var(--r-lg); background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); transform: translate3d(0, 140%, 0); transition: transform var(--dur-slow) var(--ease); will-change: transform; } .cart-bar.is-visible { transform: translate3d(0, 0, 0); } .cart-bar__info { margin-right: auto; } .cart-bar__count { font-size: 12px; opacity: 0.7; font-weight: 650; } .cart-bar__total { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .cart-bar__cta { min-height: var(--tap); padding: 0 20px; border: 0; border-radius: var(--r-md); background: var(--brand); color: #fff; font-weight: 750; font-size: 15px; cursor: pointer; touch-action: manipulation; transition: transform var(--dur-fast) var(--ease); } .cart-bar__cta:active { transform: scale(0.95); } @media (min-width: 900px) { .cart-bar { display: none; } } /* -------------------------------------------------------------------------- 13. KITCHEN DISPLAY SCREEN (kitchen-kds.html) -------------------------------------------------------------------------- */ .kds { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); } .kds__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border); } .kds__stat { display: flex; align-items: baseline; gap: 7px; padding: 6px 14px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); } .kds__stat strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; } .kds__stat span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; } .kds__stat--late strong { color: var(--danger); } .kds__clock { margin-left: auto; font-family: var(--font-num); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; } .kds__board { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-content: start; padding: 18px 20px 40px; } .ticket { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); /* The status stripe is the fastest read from three metres away. */ border-top: 5px solid var(--ok); border-radius: var(--r-md); overflow: hidden; animation: ticket-in 340ms var(--ease) both; } @keyframes ticket-in { from { opacity: 0; transform: translateY(-14px) scale(0.97); } to { opacity: 1; transform: none; } } .ticket.is-leaving { animation: ticket-out 300ms var(--ease) both; } @keyframes ticket-out { to { opacity: 0; transform: scale(0.94); } } .ticket[data-urgency="warn"] { border-top-color: var(--warn); } .ticket[data-urgency="late"] { border-top-color: var(--danger); animation: ticket-in 340ms var(--ease) both, ticket-flash 1.6s ease-in-out 340ms infinite; } @keyframes ticket-flash { 0%, 100% { background: var(--surface); } 50% { background: color-mix(in srgb, var(--danger-soft) 55%, var(--surface)); } } .ticket__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px dashed var(--border); } .ticket__code { font-family: var(--font-num); font-size: 21px; font-weight: 800; letter-spacing: 0.05em; } .ticket__channel { padding: 4px 9px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .ticket__timer { margin-left: auto; font-family: var(--font-num); font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ok); transition: color var(--dur) var(--ease); } .ticket[data-urgency="warn"] .ticket__timer { color: var(--warn); } .ticket[data-urgency="late"] .ticket__timer { color: var(--danger); } .ticket__items { flex: 1; padding: 6px 14px 10px; } .ticket__item { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); } .ticket__item:last-child { border-bottom: 0; } .ticket__qty { display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 6px; border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; } .ticket__name { font-size: 15.5px; font-weight: 650; line-height: 1.3; } .ticket__note { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; color: var(--warn); } .ticket__meta { padding: 9px 14px; background: var(--surface-2); font-size: 12.5px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 10px; } .ticket__meta strong { color: var(--text); font-weight: 700; } .ticket__actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 10px 12px 12px; } .kds__empty { grid-column: 1 / -1; text-align: center; padding: 90px 20px; color: var(--text-muted); } .kds__empty-icon { font-size: 60px; margin-bottom: 14px; opacity: 0.5; } .kds__empty-title { font-size: 20px; font-weight: 750; color: var(--text); margin-bottom: 8px; } /* -------------------------------------------------------------------------- 14. DRIVER FLEET APP (driver-fleet.html) -------------------------------------------------------------------------- */ .fleet { max-width: 560px; margin: 0 auto; padding: 0 12px 40px; } .fleet__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 0 6px; } .fleet__stat { padding: 12px 10px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .fleet__stat strong { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; } .fleet__stat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 700; } .run { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; animation: line-in var(--dur) var(--ease) both; } .run.is-done { animation: run-out 520ms var(--ease) 620ms both; } @keyframes run-out { to { opacity: 0; transform: scale(0.95) translateY(-8px); } } .run__head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; } .run__code { font-family: var(--font-num); font-size: 17px; font-weight: 800; letter-spacing: 0.04em; } .run__eta { margin-left: auto; padding: 5px 11px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--brand); font-size: 12.5px; font-weight: 800; } /* --- CSS-vector mock navigation map ------------------------------------- */ .map { position: relative; height: 190px; background: linear-gradient(var(--map-grid, rgba(127,140,160,0.10)) 1px, transparent 1px) 0 0 / 100% 26px, linear-gradient(90deg, var(--map-grid, rgba(127,140,160,0.10)) 1px, transparent 1px) 0 0 / 26px 100%, var(--surface-2); overflow: hidden; border-block: 1px solid var(--border); /* Isolate the animated pins from the rest of the page's paint tree. */ contain: strict; } /* Roads are rotated blocks — cheap, resolution-independent, no image bytes. */ .map__road { position: absolute; background: var(--bg); border-radius: 3px; box-shadow: 0 0 0 1px var(--border); } .map__road--h1 { left: -12%; top: 34%; width: 124%; height: 15px; transform: rotate(-4deg); } .map__road--h2 { left: -12%; top: 72%; width: 124%; height: 11px; transform: rotate(3deg); } .map__road--v1 { left: 26%; top: -14%; width: 13px; height: 128%; transform: rotate(6deg); } .map__road--v2 { left: 70%; top: -14%; width: 10px; height: 128%; transform: rotate(-8deg); } .map__park { position: absolute; left: 40%; top: 44%; width: 76px; height: 46px; border-radius: 10px; background: color-mix(in srgb, var(--ok) 22%, transparent); transform: rotate(-4deg); } .map__water { position: absolute; right: -8%; bottom: -16%; width: 120px; height: 78px; border-radius: 50% 40% 45% 55%; background: color-mix(in srgb, #38BDF8 26%, transparent); } /* Dashed route from restaurant pin to customer pin */ .map__route { position: absolute; left: 18%; top: 30%; width: 58%; height: 44%; border-left: 0; border-bottom: 0; border-top: 3px dashed var(--brand); border-right: 3px dashed var(--brand); border-radius: 0 46px 0 0; opacity: 0.85; animation: route-dash 1.6s linear infinite; } @keyframes route-dash { from { opacity: 0.45; } 50% { opacity: 0.95; } to { opacity: 0.45; } } .pin { position: absolute; width: 26px; height: 26px; margin: -26px 0 0 -13px; /* anchor the tip, not the centre */ border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: var(--shadow-md); } .pin__inner { transform: rotate(45deg); font-size: 12px; line-height: 1; } .pin--store { background: var(--text); color: var(--bg); left: 18%; top: 30%; } .pin--drop { background: var(--brand); color: #fff; left: 76%; top: 74%; } /* Expanding sonar ring under the destination pin */ .pin--drop::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--brand); transform: rotate(45deg); animation: sonar 1.9s var(--ease) infinite; } @keyframes sonar { 0% { opacity: 0.75; transform: rotate(45deg) scale(0.6); } 100% { opacity: 0; transform: rotate(45deg) scale(2.3); } } .map__badge { position: absolute; left: 10px; bottom: 10px; padding: 6px 11px; border-radius: var(--r-full); background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid var(--border); font-size: 11.5px; font-weight: 750; color: var(--text-muted); } .run__body { padding: 13px 15px; } .run__row { display: flex; gap: 10px; padding: 6px 0; font-size: 14px; } .run__row-icon { flex: none; width: 20px; text-align: center; opacity: 0.75; } .run__addr { font-weight: 650; } .run__sub { font-size: 12.5px; color: var(--text-muted); } .run__pay { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 7px 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 750; } .run__pay--cash { background: var(--warn-soft); color: var(--warn); } .run__pay--card { background: var(--ok-soft); color: var(--ok); } .run__call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 16px; margin-top: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; touch-action: manipulation; } /* --- Slide-to-deliver control -------------------------------------------- */ .slider { position: relative; height: 62px; margin: 12px 15px 15px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; touch-action: pan-y; /* let vertical page scroll through; we own horizontal */ -webkit-user-select: none; user-select: none; } .slider__fill { position: absolute; inset: 0; background: var(--ok); transform: scaleX(var(--p, 0)); transform-origin: left center; will-change: transform; } .slider__label { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 46px; font-size: 14.5px; font-weight: 750; letter-spacing: 0.01em; color: var(--text-muted); pointer-events: none; transition: opacity var(--dur-fast) var(--ease); } .slider__knob { position: absolute; top: 5px; left: 5px; width: 50px; height: 50px; border-radius: 50%; background: var(--surface); color: var(--ok); display: grid; place-items: center; box-shadow: var(--shadow-md); transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; cursor: grab; } .slider__knob:active { cursor: grabbing; } .slider.is-animating .slider__knob, .slider.is-animating .slider__fill { transition: transform 260ms var(--ease); } .slider__knob svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .slider.is-complete { background: var(--ok); border-color: var(--ok); } .slider.is-complete .slider__label { color: #fff; opacity: 1; padding-left: 0; } .slider.is-complete .slider__knob { opacity: 0; } /* Full-card success flash after a delivery is confirmed */ .run__success { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 94%, transparent); color: #fff; opacity: 0; animation: success-flash 900ms var(--ease) both; } @keyframes success-flash { 0% { opacity: 0; } 18% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } .run { position: relative; } .run__success-inner { text-align: center; } .run__success-check { width: 62px; height: 62px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid rgba(255,255,255,0.85); display: grid; place-items: center; font-size: 30px; animation: pop-in 420ms var(--ease) both; } .run__success-text { font-size: 17px; font-weight: 800; } .fleet__empty { text-align: center; padding: 70px 20px; color: var(--text-muted); } .fleet__empty-icon { font-size: 54px; margin-bottom: 12px; opacity: 0.5; } .fleet__empty-title { font-size: 18px; font-weight: 750; color: var(--text); margin-bottom: 8px; } /* -------------------------------------------------------------------------- 15. UTILITIES & CROSS-APP LINKS -------------------------------------------------------------------------- */ .applinks { display: flex; gap: 8px; flex-wrap: wrap; } .applinks--spaced { margin-top: 26px; } /* Fieldsets are used purely for grouping semantics — strip their chrome. */ .fieldset-reset { border: 0; padding: 0; margin: 0 0 4px; } /* Secondary line inside a segmented payment option */ .segmented__sub { font-weight: 600; opacity: 0.7; font-size: 11.5px; } .applink { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 650; text-decoration: none; transition: background-color var(--dur-fast) var(--ease); } .applink:hover { background: var(--surface-2); } .applink[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); } .footer { padding: 28px 0 40px; border-top: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted); font-size: 13px; } .footer__grid { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; } .footer a { color: inherit; } .demo-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 16px 0; border-radius: var(--r-md); background: var(--surface-2); border: 1px dashed var(--border); font-size: 12.5px; color: var(--text-muted); line-height: 1.55; } .demo-note strong { color: var(--text); } /* -------------------------------------------------------------------------- 16. RESPONSIVE REFINEMENTS -------------------------------------------------------------------------- */ @media (max-width: 640px) { :root { --header-h: 56px; } .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; } .card__media { font-size: 40px; } .card__desc { display: none; } .card__body { padding: 10px 11px 12px; } .card__name { font-size: 14px; } .card__price { font-size: 16px; } .menu { padding-bottom: 130px; } .brand__sub { display: none; } .hero { padding: 22px 0 20px; } .hero__stats { gap: 16px; } .kds__board { grid-template-columns: 1fr; padding: 14px 12px 30px; } .kds__clock { font-size: 18px; } } @media (min-width: 900px) { .menu { padding-bottom: 60px; } } /* Wall-mounted kitchen monitors: bigger everything, denser board. */ @media (min-width: 1600px) { .kds__board { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); } .ticket__name { font-size: 17px; } .ticket__code, .ticket__timer { font-size: 24px; } } @media print { .header, .tabs, .cart, .cart-bar, .toasts { display: none !important; } }