/* White-label guest screens. Brand tokens are the only per-venue part. */ :root{ --brand:#BB1D2C; /* sampled from the TIM'S logo */ --brand-ink:#BB1D2C; --brand-2:#A66A4D; /* coffee brown */ --cream:#F7F2EE; --card:#FFFFFF; --ink:#1A1614; --dim:#7A6C64; --line:#E7DCD4; --ok:#1F7A4D; --radius:18px; --shadow:0 1px 2px rgba(26,22,20,.05), 0 12px 32px -18px rgba(26,22,20,.35); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --cream:#141110; --card:#1D1917; --ink:#F1EAE5; --dim:#A2938A; --line:#2E2723; --brand:#A01825; --brand-ink:#A01825; --ok:#43B57E; --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 36px -20px rgba(0,0,0,.9); } } :root[data-theme="dark"]{ --cream:#141110; --card:#1D1917; --ink:#F1EAE5; --dim:#A2938A; --line:#2E2723; --brand:#A01825; --brand-ink:#A01825; --ok:#43B57E; --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 36px -20px rgba(0,0,0,.9); } *{box-sizing:border-box} html,body{overflow-x:clip} /* the canvas behind the page — shows through the overscroll at both ends */ html{background:var(--brand-ink); -webkit-text-size-adjust:100%; text-size-adjust:100%} body{ margin:0; background:var(--brand-ink); color:var(--ink); font:400 15px/1.55 "Golos Text","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; } .screen{ max-width:430px; margin:0 auto; padding:0; position:relative; min-height:100dvh; display:flex; flex-direction:column; background:var(--cream); } /* venue ribbon — per-venue tagline */ .ribbon{ position:sticky; top:0; z-index:12; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; text-align:center; background:var(--brand-ink); color:#fff; font:600 11px/1 "IBM Plex Mono",monospace; letter-spacing:.18em; text-transform:uppercase; padding:7px 10px; } /* venue header */ .venue{ position:sticky; top:25px; z-index:11; background:var(--card); border-bottom:1px solid var(--line); padding:16px 20px 14px; text-align:center; } /* The venue's logo, not an avatar: it keeps its proportions, whatever shape it is. In the dark theme it sits on a light plate — most brand marks are drawn in black for white paper, and a black logo on a dark screen is an invisible logo. */ .venue img{display:block; margin:0 auto 10px; width:auto; height:auto; max-width:62%; max-height:54px; object-fit:contain} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .venue img{background:#F4F1EC; border-radius:10px; padding:6px 10px; max-height:60px} } :root[data-theme="dark"] .venue img{background:#F4F1EC; border-radius:10px; padding:6px 10px; max-height:60px} .venue h1{margin:0; font:600 19px/1.2 "Golos Text",sans-serif} .venue p{margin:4px 0 0; color:var(--dim); font-size:13px} /* language switcher: dropdown with full names in the right corner of the ribbon */ .lang-menu{position:relative; text-transform:none; letter-spacing:0; font:500 11px/1 "Golos Text",sans-serif; margin:-3px 0} .lang-menu-text{grid-column:3; justify-self:end; margin-right:6px} .lang-menu summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; color:#fff; padding:4px 6px; white-space:nowrap} .lang-menu summary::-webkit-details-marker{display:none} .lang-menu .chev{width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4px solid rgba(255,255,255,.85)} .lang-menu[open] .chev{transform:rotate(180deg)} .lang-menu .list{ position:absolute; top:calc(100% + 6px); z-index:20; min-width:140px; padding:4px; display:grid; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); } .lang-menu-text .list{right:0} .lang-menu .list button{ border:0; background:transparent; color:var(--ink); cursor:pointer; -webkit-appearance:none; appearance:none; text-align:left; font:500 13.5px/1.2 "Golos Text",sans-serif; padding:9px 10px; border-radius:8px; white-space:nowrap; } .lang-menu .list button:hover{background:var(--cream)} .lang-menu .list button.on{font-weight:600; color:var(--brand)} .lang-menu summary:focus-visible{outline:2px solid #fff; outline-offset:1px; border-radius:4px} /* staff + tips, one card */ .staff{ background:var(--card); margin:14px 14px 28px; border:1px solid var(--line); border-radius:var(--radius); padding:14px 15px; box-shadow:var(--shadow); } .staff .row{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px} .staff .row + .tips-grid{margin-top:14px; padding-top:14px; border-top:1px solid var(--line)} .staff .avatar{ width:76px; height:76px; border-radius:50%; flex:none; display:block; object-fit:cover; background:color-mix(in srgb, var(--brand) 12%, var(--cream)); } /* The drawn waiter shown until there is a photo. --brand is the venue's colour in the light theme and its lighter tint in the dark one, so the jacket reads on either ground. */ /* A light ground in both themes, for the drawn waiter and for a cut-out portrait alike (its background is transparent): on the dark theme's circle dark hair would vanish. */ .staff .avatar{background:color-mix(in srgb, var(--brand) 16%, #F3EFE6)} /* A waiter who chose initials over a face: the venue's colour, their letters in white. */ .staff .avatar.initials:not([hidden]){display:grid; place-items:center; background:var(--brand); color:#fff; font:600 26px/1 "Golos Text",sans-serif; letter-spacing:.02em} .figure .fig-jacket{fill:var(--brand)} .figure .fig-shirt{fill:#F3EFE6} .figure .fig-neck{fill:#E9B48E} .figure .fig-face{fill:#F0C3A0} .figure .fig-hair, .figure .fig-ink{fill:#2A1C14} .figure .fig-smile{fill:none; stroke:#9A4A3A; stroke-width:3.5; stroke-linecap:round} .staff .who{width:100%; min-width:0} .staff .who b{display:block; font-weight:600; font-size:16px} .staff .who span{color:var(--dim); font-size:13px} .staff .rating{font:600 13px/1 "IBM Plex Mono",monospace; color:var(--brand-2); white-space:nowrap} /* generic block */ .block{ background:var(--card); margin:14px 14px 0; border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); } .block h2{margin:0 0 12px; font:600 14px/1 "Golos Text",sans-serif; letter-spacing:.01em} .block h2 small{float:right; color:var(--dim); font-weight:400; font-size:13px} /* bill */ .item{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14.5px} .item span{color:var(--dim)} .item b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap} .sum{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:10px; padding-top:12px; border-top:1px dashed var(--line); } .sum span{color:var(--dim); font-size:14px} .sum b{font:600 19px/1 "Golos Text",sans-serif; font-variant-numeric:tabular-nums} /* tips */ .tips-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px} .tips-grid button{ font:600 15px/1 "Golos Text",sans-serif; color:var(--ink); background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:10px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; min-height:52px; justify-content:center; } .tips-grid button b{font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.02em} .tips-grid button i{ font-style:normal; font-weight:500; font-size:11px; opacity:.7; font-variant-numeric:tabular-nums; letter-spacing:.01em; } /* own amount */ .custom-tip{ display:flex; align-items:center; gap:8px; margin-top:10px; padding:11px 14px; background:var(--cream); border:1px solid var(--brand); border-radius:12px; } .custom-tip input{ flex:1; min-width:0; border:0; background:transparent; color:var(--ink); padding:0; font:600 18px/1 "Golos Text",sans-serif; font-variant-numeric:tabular-nums; } .custom-tip input:focus{outline:none} .custom-tip span{color:var(--dim); font-size:14px; flex:none} /* other payment methods, in a bottom sheet */ /* The dialog is only a transparent full-viewport layer (Safari stretches a bottom-anchored top-layer dialog); the visible sheet is .sheet-panel. */ dialog.sheet{ position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0; padding:0; background:transparent; overflow:hidden; color:var(--ink); } dialog.sheet[open]{display:flex; align-items:flex-end; justify-content:center} .sheet-panel{ width:100%; max-width:430px; max-height:72dvh; overflow:auto; overscroll-behavior:contain; background:var(--card); border-radius:20px 20px 0 0; box-shadow:var(--shadow); } dialog.sheet[open] .sheet-panel{animation:sheet-in .28s cubic-bezier(.2,.7,.3,1)} dialog.sheet:focus{outline:none} dialog.sheet::backdrop{background:rgba(10,8,7,.5)} dialog.sheet[open]::backdrop{animation:sheet-fade .28s ease} @keyframes sheet-in{from{transform:translateY(100%)} to{transform:translateY(0)}} @keyframes sheet-fade{from{opacity:0} to{opacity:1}} @media (prefers-reduced-motion:reduce){ dialog.sheet[open] .sheet-panel, dialog.sheet[open]::backdrop{animation:none} } .sheet-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px 6px} .sheet-head b{font:600 16px/1 "Golos Text",sans-serif} .sheet-head button{border:0; background:transparent; color:var(--dim); font-size:19px; cursor:pointer; padding:4px 8px} .sheet .more-list{padding:2px 14px calc(14px + env(safe-area-inset-bottom)); gap:7px} .more{margin:14px 14px 0} .more summary{ list-style:none; cursor:pointer; text-align:center; color:var(--dim); font:500 14px/1 "Golos Text",sans-serif; padding:12px; border-radius:12px; } .more summary::-webkit-details-marker{display:none} .more summary::after{content:" ›"; display:inline-block; transform:rotate(90deg); margin-left:5px} .more[open] summary::after{transform:rotate(-90deg)} .more summary:hover{color:var(--ink)} .more-list{display:grid; gap:8px; margin-top:4px} .more-item{ display:flex; align-items:center; gap:11px; padding:10px 13px; background:var(--card); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); font-size:14.5px; cursor:pointer; } .more-item i, .more-item img{ width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; object-fit:contain; background:var(--cream); } .more-item i{color:#fff; font:700 13px/1 "Golos Text",sans-serif; font-style:normal} .more-item img.appicon{background:transparent; object-fit:cover; border-radius:8px} /* app picker: icon grid like the guest sees in any wallet */ .app-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px 6px; padding:6px 14px calc(16px + env(safe-area-inset-bottom))} .app-tile{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--ink)} .app-tile img{width:54px; height:54px; border-radius:13px; object-fit:cover; box-shadow:0 1px 2px rgba(26,22,20,.08), 0 6px 14px -8px rgba(26,22,20,.35)} .app-tile span{font-size:11.5px; line-height:1.2; text-align:center; color:var(--dim); max-width:76px} .app-tile:active img{transform:scale(.94)} .app-tile:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:10px} .more-item small{margin-left:auto; color:var(--dim); font-size:12.5px} .m-uzum{background:#7000FF} .m-card{background:linear-gradient(135deg,#4B5563,#111827)} .m-paynet{background:#E8482F} .m-anor{background:#D71920} .m-tbc{background:#00A3E0} /* collapsible bill */ .bill h2{display:flex; align-items:baseline; gap:7px; margin-bottom:10px} .bill h2 small{float:none; color:var(--dim); font-weight:400; font-size:13.5px} .bill h2 b{margin-left:auto; font:600 17px/1 "Golos Text",sans-serif; font-variant-numeric:tabular-nums} .bill .items{position:relative; max-height:150px; overflow:hidden} .bill .items.open{max-height:none} .bill .fade{ position:absolute; left:0; right:0; bottom:0; padding:30px 0 2px; text-align:center; background:linear-gradient(to bottom, transparent, var(--card) 62%); } .bill .items.open .fade{display:none} .bill .fade button{ border:0; background:transparent; color:var(--brand); cursor:pointer; padding:6px 10px; font:600 13px/1 "Golos Text",sans-serif; } details.bill{padding:0} details.bill summary{ list-style:none; cursor:pointer; padding:16px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; } details.bill summary::-webkit-details-marker{display:none} details.bill summary .t{font:600 14px/1.3 "Golos Text",sans-serif} details.bill summary .t small{display:block; color:var(--dim); font-weight:400; font-size:12.5px; margin-top:3px} details.bill summary .t small::after{content:" · развернуть"; color:var(--brand)} details.bill[open] summary .t small::after{content:" · свернуть"} details.bill summary b{font:600 17px/1 "Golos Text",sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap} details.bill .items{padding:0 16px 16px; border-top:1px solid var(--line); margin-top:2px; padding-top:8px} .tips-grid button[aria-pressed="true"]{background:var(--brand-ink); border-color:var(--brand-ink); color:#fff} .tips-grid button:focus-visible{outline:2px solid var(--brand); outline-offset:2px} .tips-note{margin:11px 0 0; font-size:12.5px; color:var(--dim); text-align:center} /* totals */ .totals{margin:16px 14px 0; padding:0 4px} .totals .grand{display:flex; justify-content:space-between; align-items:baseline; gap:12px} .totals .nofee{margin:6px 0 0; font-size:12.5px; color:var(--ok)} .totals .grand span{font-size:15px; font-weight:500} .totals .grand b{font:700 25px/1 "Golos Text",sans-serif; font-variant-numeric:tabular-nums} /* payment buttons — the payment method IS the action. Kept on a fixed white ground in both themes so the official marks stay correct. */ .paybar{ margin-top:auto; padding:16px 14px calc(20px + env(safe-area-inset-bottom)); background:var(--brand-ink); } .pay-list{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:30px} /* A waiter with a Click link and no card: one button, the whole width. */ .pay-list.one{grid-template-columns:1fr} /* A lone button says what it does: «Перевести через Click», «Перевести» + the app icons. */ .paybtn .one-label{display:none; color:#1A1614; font:600 15.5px/1.2 "Golos Text",sans-serif; white-space:nowrap} .pay-list.one .paybtn .one-label:not(:empty){display:inline} .pay-list.one .paybtn.others{gap:10px} .more-btn{ display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:8px; padding:10px; background:transparent; border:0; color:rgba(255,255,255,.85); font:500 14px/1 "Golos Text",sans-serif; cursor:pointer; } .more-btn svg{ width:12px; height:8px; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; transform:translateY(1px); } .more-btn:hover{color:#fff} .paybtn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:10px 10px; background:#fff; border:1px solid rgba(26,22,20,.14); border-radius:15px; text-decoration:none; cursor:pointer; box-shadow:0 1px 2px rgba(26,22,20,.06), 0 10px 26px -18px rgba(26,22,20,.5); } .paybtn:active{transform:translateY(1px)} .paybtn:focus-visible{outline:2px solid var(--brand); outline-offset:3px} .paybtn img{height:22px; width:auto; flex:none; display:block} .paybtn .amount{color:#1A1614; font:600 14.5px/1.2 "Golos Text",sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap} .pay-hint{margin:12px 20px 0; font-size:12.5px; color:var(--dim); text-align:center} .hint-box{margin:12px 14px 0; padding:11px 12px 12px; background:var(--cream); border-radius:14px} .hint-title{display:block; font:500 11px/1 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:9px; text-align:center} /* Sums to go by, not buttons: grey text split by hairlines, nothing to tap. */ .hint-grid{display:grid; grid-template-columns:repeat(3,1fr)} .hint-grid div{display:flex; flex-direction:column; align-items:center; gap:2px; padding:2px 4px} .hint-grid div + div{border-left:1px solid var(--line)} .hint-grid b{font-weight:500; font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--dim)} .hint-grid i{font-style:normal; font-size:11.5px; color:var(--dim); text-align:center; line-height:1.2} .enter-hint{margin:12px 0 0; text-align:center; color:rgba(255,255,255,.82); font:400 14px/1.4 "Golos Text",sans-serif} .enter-hint b{color:#fff; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums} .paybtn.others{font:inherit; color:#1A1614; gap:7px} .paybtn.others .app-row{display:flex; gap:7px} .paybtn.others .app-row img{width:26px; height:26px; border-radius:7px; display:block; box-shadow:0 0 0 1px rgba(26,22,20,.08)} .paybtn.others .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} .paybtn.others .amount{font-weight:500; color:var(--dim)} .card-copied{margin:6px 16px 10px; padding:12px 14px; background:var(--cream); border-radius:12px; text-align:center} .card-copied .who-card{display:block; font-size:12.5px; color:var(--dim); margin-bottom:3px} .pan-row{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:nowrap; min-height:32px} .copy-mini{ display:block; flex:none; position:relative; -webkit-text-size-adjust:100%; text-size-adjust:100%; width:122px; height:32px; min-height:32px; max-height:32px; padding:0; margin:0; border:0; border-radius:9px; -webkit-appearance:none; appearance:none; box-sizing:border-box; overflow:hidden; background:var(--brand-ink); color:#fff; cursor:pointer; font:600 12.5px/32px "Golos Text",sans-serif; white-space:nowrap; transition:background-color .2s ease; } /* Both labels are absolutely stacked inside a fixed 32px box (grid/flex on