/* Rift POS — the till. Rift's system (Archivo + IBM Plex Mono, square corners, shared 1px borders) with the client's own accent colour in --accent, set on from the back office. */ :root { --bg: #f4f2f8; --panel: #ffffff; --paper: #fbfaff; --tint: #f1eef8; --ink: #141019; --ink-2: #2a2433; --muted: #5c5666; --muted-2: #7a7386; --line: #e3dfeb; --line-2: #cfc8de; --dark: #16121f; --dark-2: #231d33; --good: #15803d; --good-bg: #e8f6ee; --bad: #c81e1e; --bad-bg: #fdecec; --warn: #b45309; --warn-bg: #fdf3e2; --accent: #6f42c1; --accent-ink: #ffffff; --sans: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ease: cubic-bezier(.2,.8,.2,1); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font: 15px/1.45 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; padding: 0; } button:disabled { cursor: not-allowed; opacity: .45; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .noscript { padding: 40px; font-family: var(--mono); } .mono { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .app { height: 100%; height: 100dvh; display: flex; flex-direction: column; } /* ---- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); transition: background .15s, border-color .15s, transform .08s; white-space: nowrap; } a.btn { text-decoration: none; } .btn:hover:not(:disabled) { border-color: var(--ink); } .btn:active:not(:disabled) { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover:not(:disabled) { filter: brightness(1.08); border-color: var(--accent); } .btn.dark { background: var(--dark); border-color: var(--dark); color: #fff; } .btn.danger { color: var(--bad); border-color: #f0c4c4; } .btn.danger:hover:not(:disabled) { border-color: var(--bad); } .btn.ghost { border-color: transparent; background: transparent; } .btn.big { min-height: 60px; font-size: .86rem; } .btn.block { width: 100%; } .btn.sm { min-height: 34px; padding: 0 10px; font-size: .66rem; } .btn.on { background: var(--ink); border-color: var(--ink); color: #fff; } /* ---- top bar */ .bar { display: flex; align-items: center; gap: 14px; height: 56px; padding: 0 14px; background: var(--dark); color: #fff; flex: none; } .bar .brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; } .bar .brand img { height: 32px; width: auto; background: #fff; padding: 2px; } .bar .brand .initial { width: 32px; height: 32px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; } .bar .brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar .spacer { flex: 1; } .bar .tool { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; color: #d9d3e6; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.14); } .bar .tool:hover { color: #fff; border-color: rgba(255,255,255,.4); } .bar .tool b { background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 0 6px; min-width: 20px; text-align: center; } .bar .who { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #bdb5cc; white-space: nowrap; } .bar .who b { color: #fff; font-weight: 600; } .bar .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: 1px; } .bar .dot.off { background: #f59e0b; } .bar .clock { font-family: var(--mono); font-size: .8rem; color: #fff; } /* ---- notices under the bar */ .notice { display: flex; align-items: center; gap: 12px; padding: 8px 14px; font-size: .88rem; border-bottom: 1px solid var(--line); flex: none; } .notice.warn { background: var(--warn-bg); color: #7c3a06; } .notice.bad { background: var(--bad-bg); color: #8f1515; } .notice .btn { min-height: 32px; margin-left: auto; } /* ---- main split */ .main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 0; } .catalog { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .finder { display: flex; gap: 10px; padding: 12px 14px 10px; flex: none; } .search { flex: 1; position: relative; } .search input { width: 100%; height: 46px; padding: 0 14px 0 40px; border: 1px solid var(--line-2); background: var(--panel); font-size: 1rem; } .search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } .search svg { position: absolute; left: 13px; top: 14px; width: 18px; height: 18px; color: var(--muted-2); } .cats { display: flex; gap: 6px; padding: 0 14px 12px; overflow-x: auto; scrollbar-width: none; flex: none; } .cats::-webkit-scrollbar { display: none; } .cat { flex: none; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-2); background: var(--panel); font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: 8px; } .cat i { width: 10px; height: 10px; background: var(--c, var(--accent)); } .cat.on { background: var(--ink); color: #fff; border-color: var(--ink); } .grid { flex: 1; overflow-y: auto; padding: 0 14px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 104px; gap: 8px; align-content: start; } .tile { position: relative; text-align: left; background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--c, var(--accent)); padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .08s, box-shadow .15s, border-color .15s; overflow: hidden; } .tile:hover { box-shadow: 0 4px 14px rgba(20,16,25,.08); border-color: var(--line-2); border-left-color: var(--c, var(--accent)); } .tile:active { transform: scale(.98); } .tile .name { font-weight: 700; font-size: .98rem; line-height: 1.2; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tile .foot { display: flex; justify-content: space-between; align-items: end; gap: 6px; } .tile .price { font-family: var(--mono); font-weight: 600; font-size: .9rem; } .tile .stock { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; color: var(--muted-2); } .tile .stock.low { color: var(--warn); font-weight: 600; } .tile .opts { font-family: var(--mono); font-size: .62rem; color: var(--muted-2); letter-spacing: .06em; } .tile.out { opacity: .5; } .tile.out .stock { color: var(--bad); } .tile.flash { animation: flash .35s var(--ease); } @keyframes flash { 0% { background: color-mix(in srgb, var(--c, var(--accent)) 22%, #fff); } 100% { background: var(--panel); } } .empty { grid-column: 1 / -1; padding: 50px 20px; text-align: center; color: var(--muted); } /* ---- ticket */ .ticket { background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; } .ticket-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; flex: none; } .ticket-head .row { display: flex; gap: 8px; align-items: center; } .ticket-head h2 { margin: 0; font-size: 1.1rem; letter-spacing: -.02em; font-weight: 800; flex: 1; } .types { display: flex; gap: 0; border: 1px solid var(--line-2); } .types button { flex: 1; min-height: 36px; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; border-right: 1px solid var(--line-2); } .types button:last-child { border-right: 0; } .types button.on { background: var(--ink); color: #fff; } .field { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--panel); } .field:focus { outline: none; border-color: var(--accent); } textarea.field { height: auto; padding: 10px 12px; resize: vertical; min-height: 70px; } .lines { flex: 1; overflow-y: auto; min-height: 0; } .line { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); align-items: start; } .line:hover { background: var(--paper); } .line.new { animation: slide .3s var(--ease); } @keyframes slide { from { background: color-mix(in srgb, var(--accent) 12%, #fff); } to { background: transparent; } } .line .qty { font-family: var(--mono); font-weight: 700; background: var(--tint); text-align: center; padding: 3px 0; font-size: .85rem; } .line .what b { display: block; font-weight: 700; line-height: 1.25; } .line .what small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; margin-top: 2px; } .line .what em { display: block; color: var(--warn); font-style: normal; font-size: .8rem; margin-top: 2px; } .line .amt { font-family: var(--mono); font-weight: 600; font-size: .92rem; } .no-lines { padding: 60px 24px; text-align: center; color: var(--muted-2); } .no-lines svg { width: 44px; height: 44px; opacity: .35; margin-bottom: 8px; } .totals { border-top: 1px solid var(--line); padding: 10px 14px 4px; flex: none; } .totals .t { display: flex; justify-content: space-between; font-size: .9rem; padding: 2px 0; color: var(--ink-2); } .totals .t span:last-child { font-family: var(--mono); } .totals .t.disc { color: var(--good); } .totals .t.grand { font-size: 1.35rem; font-weight: 800; color: var(--ink); padding-top: 6px; letter-spacing: -.02em; } .totals .t.grand span:last-child { font-weight: 700; } .ticket-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 14px; flex: none; } .ticket-actions .btn { padding: 0 6px; font-size: .64rem; } .pay-wrap { padding: 0 14px 14px; flex: none; } .pay-btn { width: 100%; min-height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; } .pay-btn span:last-child { font-family: var(--mono); } .pay-btn:disabled { background: var(--line-2); color: var(--muted); opacity: 1; } .pay-btn:hover:not(:disabled) { filter: brightness(1.08); } .mobile-bar { display: none; } /* ---- modals */ .scrim { position: fixed; inset: 0; background: rgba(22,18,31,.55); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .15s; } @keyframes fade { from { opacity: 0; } } .modal { background: var(--panel); width: min(560px, 100%); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: pop .2s var(--ease); } .modal.wide { width: min(880px, 100%); } .modal.narrow { width: min(400px, 100%); } @keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } } .modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex: none; } .modal-head h3 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; flex: 1; } .modal-head .x { width: 36px; height: 36px; display: grid; place-items: center; font-size: 1.4rem; color: var(--muted); border: 1px solid var(--line); } .modal-head .x:hover { color: var(--ink); border-color: var(--ink); } .modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; } .modal-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); flex: none; } .modal-foot .btn { flex: 1; } .label { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; } .label:first-child { margin-top: 0; } .label .req { color: var(--accent); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--line-2); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .chip small { font-family: var(--mono); font-weight: 500; font-size: .72rem; color: var(--muted); } .chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chip.on small { color: inherit; opacity: .85; } .group-error { color: var(--bad); font-size: .82rem; margin-top: 4px; } .stepper { display: inline-flex; border: 1px solid var(--line-2); } .stepper button { width: 48px; height: 46px; font-size: 1.3rem; font-weight: 700; } .stepper button:hover { background: var(--tint); } .stepper input { width: 64px; text-align: center; border: 0; border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); font-family: var(--mono); font-weight: 700; font-size: 1.05rem; } .error { background: var(--bad-bg); color: #8f1515; padding: 10px 12px; font-size: .9rem; margin-bottom: 12px; border-left: 3px solid var(--bad); } .okay { background: var(--good-bg); color: #0f5c2e; padding: 10px 12px; font-size: .9rem; margin-bottom: 12px; border-left: 3px solid var(--good); } .seg { display: flex; border: 1px solid var(--line-2); } .seg button { flex: 1; min-height: 42px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; border-right: 1px solid var(--line-2); } .seg button:last-child { border-right: 0; } .seg button.on { background: var(--ink); color: #fff; } .money-input { display: flex; align-items: center; border: 1px solid var(--line-2); height: 56px; background: var(--panel); } .money-input span { padding: 0 4px 0 14px; font-family: var(--mono); font-size: 1.2rem; color: var(--muted); } .money-input input { flex: 1; border: 0; height: 100%; font-family: var(--mono); font-size: 1.5rem; font-weight: 700; padding: 0 12px 0 2px; min-width: 0; background: transparent; } .money-input:focus-within { border-color: var(--accent); } .money-input input:focus { outline: none; } /* ---- payment */ .pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .due { background: var(--dark); color: #fff; padding: 16px 18px; } .due .mono { color: #bdb5cc; } .due .big { font-family: var(--mono); font-size: 2.3rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; } .due .sub { font-family: var(--mono); font-size: .76rem; color: #bdb5cc; margin-top: 4px; } .tenders { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; } .tender { min-height: 56px; border: 1px solid var(--line-2); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; } .tender.on { background: var(--ink); color: #fff; border-color: var(--ink); } .quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; } .quick button { min-height: 46px; border: 1px solid var(--line-2); font-family: var(--mono); font-weight: 600; } .quick button:hover { border-color: var(--ink); } .paid-list { margin-top: 12px; border-top: 1px solid var(--line); } .paid-list div { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; } .paid-list .num { font-weight: 600; } .paid-list button { color: var(--bad); font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; margin-left: 10px; } .change { text-align: center; padding: 18px; background: var(--good-bg); color: #0f5c2e; margin-bottom: 14px; } .change .big { font-family: var(--mono); font-size: 2.6rem; font-weight: 700; line-height: 1.1; } .done-head { text-align: center; padding: 6px 0 14px; } .done-head svg { width: 54px; height: 54px; color: var(--good); } .done-head h4 { margin: 6px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; } /* ---- PIN / lock screen */ .lock { flex: 1; display: grid; place-items: center; background: var(--dark); background-image: linear-gradient(rgba(196,181,253,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(196,181,253,.07) 1px, transparent 1px); background-size: 32px 32px; color: #fff; padding: 20px; overflow-y: auto; } .lock-card { width: min(360px, 100%); text-align: center; } .lock-card .logo { height: 64px; margin: 0 auto 14px; background: #fff; padding: 4px; } .lock-card .initial { width: 64px; height: 64px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 2rem; font-weight: 800; } .lock-card h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; margin: 0; } .lock-card .mono { color: #bdb5cc; margin: 6px 0 22px; } .dots { display: flex; justify-content: center; gap: 12px; height: 18px; margin-bottom: 20px; } .dots i { width: 14px; height: 14px; border: 2px solid #8b82a0; border-radius: 50%; } .dots i.on { background: #fff; border-color: #fff; } .dots.shake { animation: shake .35s; } @keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pad button { height: 64px; font-family: var(--mono); font-size: 1.5rem; font-weight: 600; background: var(--dark-2); color: #fff; border: 1px solid rgba(196,181,253,.16); } .pad button:hover { border-color: rgba(196,181,253,.5); } .pad button:active { background: #2f2745; } .pad .fn { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #bdb5cc; } .pad.light button { background: var(--tint); color: var(--ink); border-color: var(--line); } .pad.light .fn { color: var(--muted); } .dots.light i { border-color: var(--line-2); } .dots.light i.on { background: var(--ink); border-color: var(--ink); } .lock-msg { min-height: 22px; color: #fca5a5; font-size: .9rem; margin-top: 12px; } .lock-foot { margin-top: 22px; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #8b82a0; } .lock-foot a { color: #c4b5fd; text-decoration: none; } /* ---- lists (orders, held) */ .list { border-top: 1px solid var(--line); } .list-row { width: 100%; display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px 4px; border-bottom: 1px solid var(--line); } .list-row:hover { background: var(--paper); } .list-row b { font-family: var(--mono); } .list-row small { display: block; color: var(--muted); font-size: .8rem; } .pill { display: inline-block; font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; background: var(--good-bg); color: var(--good); } .pill.refunded { background: var(--bad-bg); color: var(--bad); } .pill.partially_refunded { background: var(--warn-bg); color: var(--warn); } .pill.offline { background: var(--warn-bg); color: var(--warn); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .kv { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; } .kv span:last-child { font-family: var(--mono); font-weight: 600; } .kv.strong { font-weight: 800; font-size: 1.05rem; border-bottom-style: solid; } .section-title { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 18px 0 6px; } .section-title:first-child { margin-top: 0; } .refund-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); } .refund-line small { color: var(--muted); display: block; } .refund-line .stepper button { width: 38px; height: 36px; font-size: 1.1rem; } .refund-line .stepper input { width: 44px; font-size: .95rem; } .check { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: .92rem; } .check input { width: 20px; height: 20px; accent-color: var(--accent); } .denoms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; } .denom { display: grid; grid-template-columns: 64px 1fr 80px; gap: 8px; align-items: center; font-family: var(--mono); font-size: .86rem; } .split .denoms { grid-template-columns: 1fr; gap: 6px; } .denom input { height: 36px; border: 1px solid var(--line-2); padding: 0 8px; font-family: var(--mono); width: 100%; } .denom span:last-child { text-align: right; color: var(--muted); } .variance { padding: 12px 14px; font-family: var(--mono); display: flex; justify-content: space-between; margin-top: 12px; background: var(--tint); } .variance.over { background: var(--warn-bg); color: var(--warn); } .variance.short { background: var(--bad-bg); color: var(--bad); } .variance.even { background: var(--good-bg); color: var(--good); } .receipt-preview { background: var(--paper); border: 1px solid var(--line); padding: 16px; display: flex; justify-content: center; } /* ---- toast */ .toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; display: grid; gap: 8px; pointer-events: none; } .toast { background: var(--dark); color: #fff; padding: 11px 18px; font-size: .9rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: pop .2s var(--ease); max-width: min(520px, 92vw); } .toast.bad { background: var(--bad); } /* ---- receipt (screen preview and print) */ .receipt { width: 300px; font-family: var(--mono); font-size: 12px; line-height: 1.45; color: #000; background: #fff; padding: 14px 12px; } .receipt .c { text-align: center; } .receipt img { max-width: 140px; max-height: 70px; margin: 0 auto 6px; display: block; } .receipt h5 { font-family: var(--sans); font-size: 17px; font-weight: 800; margin: 0 0 2px; text-align: center; letter-spacing: -.01em; } .receipt .pre { white-space: pre-line; } .receipt hr { border: 0; border-top: 1px dashed #000; margin: 8px 0; } .receipt .r { display: flex; justify-content: space-between; gap: 8px; } .receipt .r span:first-child { flex: 1; } .receipt .mod { padding-left: 14px; color: #333; } .receipt .tot { font-size: 15px; font-weight: 700; } .receipt .big { font-size: 14px; font-weight: 700; } .print-area { display: none; } @media print { @page { size: 80mm auto; margin: 0; } body { background: #fff; overflow: visible; height: auto; } .app, .scrim, .toasts { display: none !important; } .print-area { display: block; } .print-area .receipt { width: 72mm; padding: 2mm 3mm; } .print-area .report { width: 72mm; } } /* ---- tablet / phone */ .ticket-close { display: none !important; } @media (max-width: 1100px) { .main { grid-template-columns: minmax(0, 1fr) 340px; } .bar .who .role { display: none; } } @media (max-width: 860px) { .bar { gap: 8px; padding: 0 10px; } .bar .tool { padding: 0 8px; font-size: .6rem; letter-spacing: .06em; } .bar .brand span { max-width: 34vw; } .bar .clock, .bar .who { display: none; } .main { grid-template-columns: 1fr; } .ticket { position: fixed; inset: 56px 0 0 0; z-index: 30; transform: translateY(100%); transition: transform .25s var(--ease); border-left: 0; } .ticket.open { transform: none; } .mobile-bar { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 1px solid var(--line); flex: none; } .mobile-bar .btn { flex: 1; min-height: 52px; } .grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: 96px; padding: 0 12px 12px; } .finder { padding: 10px 12px 8px; } .cats { padding: 0 12px 10px; } .pay-grid, .split { grid-template-columns: 1fr; } .denoms { grid-template-columns: 1fr; } .scrim { padding: 0; align-items: end; } .modal, .modal.wide, .modal.narrow { width: 100%; max-height: 94dvh; } .ticket-close { display: inline-flex !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }