/* ───────────────────────────────────────────────────────────────────────── tipping-white.css — the light surface for every screen a business owner, a team member, a counter device or an administrator looks at. WHY THIS IS A SEPARATE FILE AND NOT AN EDIT TO tipping-system.css: css/tipping-system.css is the shared design system and is owned by the guest lane. This file is loaded AFTER it on owner/staff/device/admin pages only, and does nothing but re-point the same --mb-* tokens at a light palette. So: • the guest lane can keep changing tipping-system.css freely; • every page that already styles itself from the tokens turns white with no per-page rewrite; • nothing about the guest tip flow changes. Scope: html.mb-white. A page opts in by putting class="mb-white" on . Nothing here leaks onto a page that has not asked for it. Palette page #ffffff panel #f5f6f8 (the soft grey card) hairline rgba(16,20,32,.09) ink #12161f with three softer steps navy #2c2e83 sampled from images/midbank-logo-dark.png. Primary buttons, active tabs, links, every accent. red #dd1726 the other half of the mark. Used sparingly: errors and destructive confirmations only. green #2bb673 success and paid states ONLY — never a button. On a money screen a green button reads as "go", and then green stops meaning "this worked". ───────────────────────────────────────────────────────────────────────── */ html.mb-white{ /* ── surfaces ─────────────────────────────────────── */ --mb-base:#ffffff; --mb-base-2:#ffffff; --mb-surface:#f5f6f8; --mb-surface-2:#eceef2; --mb-hairline:rgba(16,20,32,.09); --mb-hairline-strong:rgba(16,20,32,.16); /* ── brand ──────────────────────────────────────────────────────────── Sampled straight out of images/midbank-logo-dark.png: the mark is navy #2c2e83 and red #dd1726, and nothing else. So: navy every primary button, active tab, link and accent red used sparingly — errors, and destructive confirmations green RESERVED for success and paid states. It is never a button colour, because a green button reads as "go" on a money screen and stops meaning "this worked". No purple and no indigo anywhere; the dark system's #6366f1 is exactly what these tokens exist to displace. ── */ --mb-primary:#2c2e83; --mb-primary-press:#1f2160; --mb-accent:#2c2e83; --mb-accent-soft:#2c2e83; /* links; readable on white, unlike the dark page's soft lavender */ --mb-navy:#2c2e83; --mb-red:#dd1726; --mb-danger:#c0111f; /* the mark's red, darkened for AA on white */ --mb-success:#15784b; /* text/icon weight of the success green */ --mb-success-ink:#2bb673; /* the fill/edge weight */ /* ── ink ──────────────────────────────────────────── */ --mb-ink:#12161f; --mb-ink-2:rgba(18,22,31,.78); --mb-ink-3:rgba(18,22,31,.60); --mb-ink-4:rgba(18,22,31,.44); /* ── shape ────────────────────────────────────────── */ --mb-r-card:22px; /* bigger, softer cards than the dark system */ --mb-card-pad:clamp(20px,4.5vw,28px); --mb-shadow-ambient:0 1px 2px rgba(16,20,32,.06); --mb-shadow-glow:0 18px 50px -28px rgba(16,20,32,.28); /* Inter only. Playfair on white at these sizes reads like a menu, not a console — the owner surface is an instrument, so it uses one voice for text and the mono for every figure. */ --mb-font-display:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; } /* The browser's own [hidden]{display:none} is a UA rule and loses to any author `display` — and this file sets display on .w-tap, .w-grid, .w-person and friends. Without this line an el.hidden = true silently does nothing, which is the kind of bug that ships a "Joined" badge to a tablet that has not joined anything. */ html.mb-white [hidden]{display:none !important} /* ── page ground ──────────────────────────────────────────────────────── */ html.mb-white, html.mb-white body{ background-color:#ffffff; background-image:none; color:var(--mb-ink); -webkit-font-smoothing:antialiased; } /* The dark system paints atmosphere behind every hero. On white that reads as a smudge, so both atmosphere layers are switched off rather than retuned. */ html.mb-white .mb-field::before, html.mb-white .mb-grain::after{display:none !important} /* ── components the dark system hard-codes for a dark ground ──────────── */ html.mb-white .mb-card, html.mb-white .mb-receipt{ background:var(--mb-surface); border:1px solid var(--mb-hairline); box-shadow:none; } html.mb-white .mb-btn--primary{background:var(--mb-primary);color:#fff} html.mb-white .mb-btn--primary:active{background:var(--mb-primary-press)} html.mb-white .mb-btn--ghost{ background:#fff;color:var(--mb-ink-2); box-shadow:inset 0 0 0 1px var(--mb-hairline-strong); } html.mb-white :where(a,button,input,textarea,select,[tabindex]):focus-visible{ outline:none; box-shadow:0 0 0 2px #fff,0 0 0 4px var(--mb-primary); } html.mb-white .mb-sandbox{ background:#fff;border:1px solid var(--mb-hairline-strong);color:var(--mb-ink-3); } html.mb-white .mb-tear{ background-image:radial-gradient(circle at 6px 0,transparent 6px,#ffffff 6.5px); } html.mb-white .mb-receipt .row.total .amt{color:var(--mb-ink)} html.mb-white .mb-stickycta{ background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.97) 38%); border-top:1px solid var(--mb-hairline); } /* The topbar logo asset is the white-on-transparent mark. On white it is invisible, so these pages use the dark mark instead — set in the page, but the opacity the dark system applied to it is undone here. */ html.mb-white .topbar img{opacity:1} /* ───────────────────────────────────────────────────────────────────────── Shared light-surface furniture used by the owner console, the staff dashboard, the device home and the admin list. Defined once here so the four pages cannot drift apart. ───────────────────────────────────────────────────────────────────────── */ /* Page frame */ html.mb-white .w-shell{width:100%;max-width:1040px;margin:0 auto;padding:0 20px} @media (max-width:520px){ html.mb-white .w-shell{padding:0 16px} } /* App bar — white, one hairline, nothing floating */ html.mb-white .w-bar{ position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--mb-hairline); padding-top:env(safe-area-inset-top,0px); } html.mb-white .w-bar .in{ max-width:1040px;margin:0 auto;padding:12px 20px; display:flex;align-items:center;gap:14px;min-height:56px; } html.mb-white .w-bar img{height:22px;display:block} html.mb-white .w-bar .who{ min-width:0;font:600 .95rem/1.2 var(--mb-font-ui);color:var(--mb-ink); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } html.mb-white .w-bar .who small{ display:block;font:400 .78rem/1.3 var(--mb-font-ui);color:var(--mb-ink-3); } html.mb-white .w-bar .sp{flex:1} /* Big soft card — the unit the whole light system is built from */ html.mb-white .w-card{ background:var(--mb-surface);border:1px solid var(--mb-hairline); border-radius:var(--mb-r-card);padding:var(--mb-card-pad); } html.mb-white .w-card.plain{background:#fff} /* Tappable card (device home, kiosk link, connect bank) */ html.mb-white .w-tap{ display:block;width:100%;text-align:left;border:1px solid var(--mb-hairline); background:var(--mb-surface);border-radius:var(--mb-r-card); padding:var(--mb-card-pad);cursor:pointer;color:inherit; transition:background var(--mb-dur-fast) var(--mb-ease-out), transform var(--mb-dur-fast) var(--mb-ease-out), border-color var(--mb-dur-fast) var(--mb-ease-out); } html.mb-white .w-tap:hover{background:#eef0f4;border-color:var(--mb-hairline-strong)} html.mb-white .w-tap:active{transform:scale(.99)} html.mb-white .w-tap .t{ display:flex;align-items:center;gap:8px; font:600 1rem/1.3 var(--mb-font-ui);color:var(--mb-ink); } html.mb-white .w-tap .t::after{content:'›';color:var(--mb-accent);font-size:1.25rem;line-height:1} html.mb-white .w-tap .d{ margin-top:8px;font:400 .875rem/1.55 var(--mb-font-ui);color:var(--mb-ink-3); } html.mb-white .w-tap[aria-disabled="true"]{cursor:default;opacity:.72} html.mb-white .w-tap[aria-disabled="true"]:hover{background:var(--mb-surface);transform:none} html.mb-white .w-tap[aria-disabled="true"] .t::after{color:var(--mb-ink-4)} /* Grid of cards — the device home and console section layout */ html.mb-white .w-grid{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)} html.mb-white .w-grid.two{grid-template-columns:repeat(2,1fr)} @media (max-width:820px){ html.mb-white .w-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ html.mb-white .w-grid, html.mb-white .w-grid.two{grid-template-columns:1fr} } /* Money figures — one mono voice, tabular, never a proportional digit */ html.mb-white .w-fig{ font-family:var(--mb-font-mono);font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;font-weight:600;letter-spacing:-.02em; color:var(--mb-ink); } html.mb-white .w-stat .k{ font:500 .72rem/1 var(--mb-font-ui);text-transform:uppercase;letter-spacing:.09em; color:var(--mb-ink-4); } html.mb-white .w-stat .v{margin-top:10px;font-size:clamp(1.6rem,4.5vw,2.1rem);} /* Section heads */ html.mb-white .w-h{ margin:36px 0 14px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap; } html.mb-white .w-h h2{ font:600 1.2rem/1.25 var(--mb-font-ui);letter-spacing:-.02em;color:var(--mb-ink); } html.mb-white .w-h p{ flex-basis:100%;margin-top:2px; font:400 .875rem/1.6 var(--mb-font-ui);color:var(--mb-ink-3);max-width:62ch; } /* Status pills — colour carries meaning, never decoration */ html.mb-white .w-pill{ display:inline-flex;align-items:center;gap:6px;padding:5px 11px; border-radius:999px;font:600 .72rem/1 var(--mb-font-ui);letter-spacing:.02em; background:#fff;border:1px solid var(--mb-hairline-strong);color:var(--mb-ink-3); } html.mb-white .w-pill.good{background:rgba(43,182,115,.10);border-color:rgba(43,182,115,.34);color:#15784b} html.mb-white .w-pill.wait{background:rgba(180,120,10,.09);border-color:rgba(180,120,10,.30);color:#8a5c05} html.mb-white .w-pill.off {background:#fff;border-color:var(--mb-hairline-strong);color:var(--mb-ink-4)} /* Inputs */ html.mb-white .w-in{ width:100%;min-height:52px;padding:14px 16px;border-radius:14px; background:#fff;border:1px solid var(--mb-hairline-strong); font:400 1rem/1.3 var(--mb-font-ui);color:var(--mb-ink); } html.mb-white .w-in::placeholder{color:var(--mb-ink-4)} html.mb-white .w-in:focus{border-color:var(--mb-primary)} html.mb-white label.w-lb{ display:block;margin-bottom:8px; font:500 .8rem/1 var(--mb-font-ui);color:var(--mb-ink-3); text-transform:uppercase;letter-spacing:.07em; } /* Buttons */ html.mb-white .w-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:52px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer; font:600 .98rem/1 var(--mb-font-ui); background:var(--mb-primary);color:#fff; transition:background var(--mb-dur-fast) var(--mb-ease-out), transform var(--mb-dur-fast) var(--mb-ease-out); } html.mb-white .w-btn:hover{background:var(--mb-primary-press)} html.mb-white .w-btn:active{transform:scale(.98)} html.mb-white .w-btn[disabled]{background:#c8ccd4;cursor:not-allowed;transform:none} html.mb-white .w-btn.ghost{ background:#fff;color:var(--mb-ink); box-shadow:inset 0 0 0 1px var(--mb-hairline-strong); } html.mb-white .w-btn.ghost:hover{background:#f5f6f8} html.mb-white .w-btn.sm{min-height:40px;padding:10px 18px;font-size:.86rem} /* Notice — the honest state, used wherever money has not moved */ html.mb-white .w-note{ border-radius:16px;padding:16px 18px; background:#fff;border:1px solid var(--mb-hairline-strong); font:400 .875rem/1.6 var(--mb-font-ui);color:var(--mb-ink-2); } html.mb-white .w-note b{color:var(--mb-ink);font-weight:600} html.mb-white .w-note.accent{border-left:3px solid var(--mb-primary)} /* Empty state */ html.mb-white .w-empty{ padding:34px 20px;text-align:center; font:400 .9rem/1.6 var(--mb-font-ui);color:var(--mb-ink-3); } /* Person row (roster, feed, leaderboard) */ html.mb-white .w-person{display:flex;gap:14px;align-items:center;min-width:0} html.mb-white .w-av{ flex:0 0 auto;width:48px;height:48px;border-radius:999px;overflow:hidden; background:#e4e7ec;display:flex;align-items:center;justify-content:center; font:600 .95rem/1 var(--mb-font-ui);color:var(--mb-ink-3); } html.mb-white .w-av img{width:100%;height:100%;object-fit:cover;object-position:50% 35%;display:block} html.mb-white .w-person .nm{min-width:0;font:600 .96rem/1.3 var(--mb-font-ui);color:var(--mb-ink)} html.mb-white .w-person .rl{font:400 .8rem/1.4 var(--mb-font-ui);color:var(--mb-ink-3)} /* Rows in a list card */ html.mb-white .w-rows{display:flex;flex-direction:column} html.mb-white .w-row{ display:flex;align-items:center;gap:14px; padding:14px 0;border-top:1px solid var(--mb-hairline); } html.mb-white .w-row:first-child{border-top:0;padding-top:0} html.mb-white .w-row .sp{flex:1;min-width:0} /* Tables scroll rather than squash */ html.mb-white .w-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} html.mb-white table.w-tb{width:100%;border-collapse:collapse;min-width:520px} html.mb-white table.w-tb th{ text-align:left;padding:10px 12px;border-bottom:1px solid var(--mb-hairline-strong); font:600 .72rem/1 var(--mb-font-ui);text-transform:uppercase;letter-spacing:.08em; color:var(--mb-ink-4);white-space:nowrap; } html.mb-white table.w-tb td{ padding:12px;border-bottom:1px solid var(--mb-hairline); font:400 .875rem/1.4 var(--mb-font-ui);color:var(--mb-ink-2); } html.mb-white table.w-tb td.num{ font-family:var(--mb-font-mono);font-variant-numeric:tabular-nums; text-align:right;color:var(--mb-ink); } /* A live feed item arriving */ @keyframes wIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} html.mb-white .w-new{animation:wIn var(--mb-dur-base) var(--mb-ease-out) both} /* Footer line */ html.mb-white .w-foot{ margin:52px 0 40px;padding-top:20px;border-top:1px solid var(--mb-hairline); font:400 .78rem/1.7 var(--mb-font-ui);color:var(--mb-ink-4); } html.mb-white .w-foot a{color:var(--mb-accent-soft)}