/* portal.css — the EBUTECH portal design system. * * Shared by BOTH signed-in areas of the website: the worker portal * (/worker/dashboard) and the customer account (/account). It deliberately * mirrors the mobile app screen for screen and borrows the app's tokens * verbatim, so someone who uses the app and the site does not feel like they * have moved between two products. * * One system, two portals: a change here lands on both, which is the point. * Anything genuinely specific to one of them belongs in its own file, not * here. * * Theming * ------- * The app is a light surface with a gold accent. The portal supports that * light theme AND a dark one, because a worker is often on a phone outdoors at * night, and the previous portal was dark-only. The rules: * * :root → light tokens (the default) * @media (prefers-color-scheme: dark) → dark, unless the worker forced light * :root[data-theme="dark"] → dark, chosen explicitly * * Every colour is defined on bare :root first, so nothing depends on a media * query having matched. The toggle writes data-theme onto and persists * it, which is why the explicit selectors have to win in both directions. * * The gold changes between themes on purpose: #DFA828 is tuned for contrast on * white and turns muddy on black, while #F0D060 is tuned for black and is * unreadable as text on white. */ /* ── Web fonts (self-hosted, same as style.css does for Inter) ────────────── * * Archivo carries the display sizes and every numeral in the customer * account; IBM Plex Sans carries the reading copy. The system stack they * replace is a large part of why the account read as generic. * * SELF-HOSTED ON PURPOSE, not loaded from Google. Three reasons, and the * first is the one that matters here: this product is used on Nigerian mobile * data, where a blocked or slow third-party font host means the premium type * silently disappears and nobody can tell you why. It also keeps the CSP shut * (no extra style-src or font-src origins) and removes a render-blocking * request to someone else's server. Every file is variable, so one file per * family per range covers every weight. * * THREE RANGES PER FAMILY, and this is not optional on a Nigerian product. * The first cut shipped only the `latin` subset, which does NOT contain: * * • U+20A6 ₦ — the Naira sign, on every price in the product. It fell * through to whatever font the device happened to have, so the one glyph * every price starts with was drawn in a different typeface, at a * different weight and width, from the digits beside it — and at 12px its * crossbars sit at the same height as the tops of the digits, so the pair * reads as struck through. It lives in `latin-ext`. * • ọ ụ ẹ ị — the dot-below vowels Igbo and Yoruba names are written with. * Google files these under `vietnamese`, not `latin-ext`, because that is * the language its subsetter had in mind. A client called Ọlaide or a * professional called Ụchenna had one letter of their name in a different * font from the rest of it. * • ń — Igbo n-acute, in `latin-ext`. * * So all three ranges ship, with the exact unicode-range values Google's own * split uses. The browser fetches a file only when a character in its range is * on the page: latin always, latin-ext as soon as a price is shown, vietnamese * only for a name that needs it. Give EVERY face an explicit range — a face * without one claims U+0-10FFFF, wins the match for ₦, has no glyph for it, * and the fallback happens all over again. * * ONE GLYPH IS STILL MISSING and subsetting cannot fix it: IBM Plex Sans has * no ṣ / Ṣ (U+1E63/U+1E62, Yoruba s-dot) in any published subset, IBM's own * build included. Archivo does. That is why every IBM Plex Sans stack in this * file names Archivo as its FIRST fallback: a Yoruba ṣ then renders in the * other family already on the page instead of an arbitrary system font. * * scripts/check-money-glyphs.js measures all of the above — it forces each * face to load and compares glyph advance widths, because document.fonts * .check() answers "would this family be used", not "did it load and does it * have this glyph", and returns true for a font whose file never arrived. * * Every rule that uses them still names a real fallback stack — a font that * fails to load must leave a legible page, not an invisible one. */ /* Vietnamese first: it is the narrowest range, and it is the one that carries ọ ụ ẹ ị for Igbo and Yoruba names. */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/archivo-vietnamese-var.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/archivo-latin-ext-var.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/archivo-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/ibm-plex-sans-vietnamese-var.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-ext-var.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap; src: url('/fonts/ibm-plex-sans-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Tokens ───────────────────────────────────────────────────────────────── */ :root { color-scheme: light; --bg: #F2F2F4; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-strong: #F1F1F3; --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.12); --text: #33333B; --text-dim: #6B6B72; --text-faint: #9A9AA2; --gold: #DFA828; --gold-deep: #B8860F; --gold-soft: rgba(223, 168, 40, 0.12); --gold-line: rgba(223, 168, 40, 0.28); --on-gold: #1A1A1A; --success: #1FA45C; --success-bg: rgba(31, 164, 92, 0.12); --danger: #D64545; --danger-bg: rgba(214, 69, 69, 0.10); --info: #2F7BE8; /* Job stage accents, matching the app's `colors.stage`. */ --stage-assigned: #DFA828; --stage-en_route: #2F7BE8; --stage-arrived: #8B5CF6; --stage-in_progress: #0EA5E9; --stage-completed: #1FA45C; --stage-awaiting_payment: #DFA828; --stage-paid: #1FA45C; --stage-closed: #6B6B72; --stage-cancelled: #D64545; /* ── The ink surface ──────────────────────────────────────────────────── * One deep surface, used for the ONE thing happening right now: a * professional on their way to your door. Everything else on these screens * is light and quiet so this reads as the only live thing on the page. * * It exists because the account read as flat: every card was a white * rounded rectangle on light grey, so a job in progress carried the same * weight as a link to the safety page. And gold spent as a large flat fill * reads cheap — the same gold, small and precise on near-black, reads * expensive. `--gold-on-ink` is the dark-theme gold (#F0D060), which is the * one tuned for black; the light-theme #DFA828 goes muddy there. */ --ink: #17171C; --ink-2: #212128; --ink-line: rgba(255, 255, 255, 0.10); --on-ink: #F5F5F7; --on-ink-dim: rgba(245, 245, 247, 0.62); --on-ink-faint: rgba(245, 245, 247, 0.40); --gold-on-ink: #F0D060; --shadow-ink: 0 10px 30px rgba(23, 23, 28, 0.28); --shadow-card: 0 3px 12px rgba(0, 0, 0, 0.06); --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.16); /* ── THE MOTION SCALE ──────────────────────────────────────────────────── Four steps, matching src/motion.ts in the app number for number, the same way --radius-* matches its radius scale. THE SIZE OF THE MOVE PICKS THE STEP: tap 90ms an icon, a press state, a dot control 180ms ONE control changing what it is: a chip selecting, a switch throwing, a chevron turning surface 260ms something with an EDGE moving: the tab bar leaving, a sheet, a drawer, a banner arriving screen 320ms a whole view replacing another A step up is visibly slower than the one below it, which is what makes the hierarchy legible: a sheet cannot be mistaken for a toggle. LEAVING IS FASTER THAN ARRIVING (`-out`, about 0.75). What is going away has already been read. This replaced nine durations chosen one at a time — .08 .1 .12 .15 .16 .17 .18 .2 .26 — which is exactly the state the app was in before its own scale. No single one was wrong; the whole was chaotic, and two things the same size moved differently. `--ease` is the decelerating curve almost everything uses. Reduced motion is NOT handled here: it is handled where it belongs, in the `prefers-reduced-motion` blocks beside each rule, because what that setting asks us to drop is large positional movement rather than the fact that something changed. */ --motion-tap: 90ms; --motion-control: 180ms; --motion-surface: 260ms; --motion-screen: 320ms; --motion-tap-out: 70ms; --motion-control-out: 140ms; --motion-surface-out: 200ms; --ease: cubic-bezier(.4, 0, .2, 1); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-pill: 999px; --nav-h: 56px; /* The top bar's real height, used by EBUCHAT to size a conversation against the viewport. `.topbar` sets `min-height` from this token and everything is border-box, so the number cannot drift from the thing it measures — which it previously had: the old comment added up 12+26+12+1=51 and forgot that .topbar-brand carries min-height:40 to stay a tap target, so the bar was really 65px and every conversation was sized 14px too tall. */ --topbar-h: 56px; --wrap: 620px; /* Type weight scale. * * Deliberately one notch lighter than a typical bold scale — the same move * the app made in src/theme.ts. At these sizes 700/800 everywhere reads as * shouting: the page looks heavy and nothing stands out, because when every * line is bold none of them is. Dropping a notch restores the hierarchy and * the surfaces read as premium rather than loud. * * Tune here, not at the call sites. */ --fw-display: 600; /* big screen-opening headings */ --fw-heading: 600; /* card titles, service names */ --fw-label: 500; /* row labels, tabs, segmented controls */ --fw-medium: 600; /* buttons, values, the emphasised line */ --fw-caps: 600; /* small uppercase eyebrows and group titles */ --fw-figure: 700; /* big numbers, codes and pills — these still need presence */ /* ── Type scale ───────────────────────────────────────────────────────── * * TUNE THE SIZE OF THE WHOLE PORTAL HERE. Nothing below this block should * write a literal px font-size. * * This used to be 87 literal sizes across 23 magic numbers, which is how the * portal got asked to shrink twice: a pass would catch some call sites and * miss the rest, so the result was uneven rather than smaller. Tokens mean * one edit moves the set and nothing is left behind. * * Three floors are NOT negotiable, and they are expressed as their own * tokens so a future shrink cannot quietly cross them: * * --fs-input 16px less and iOS zooms the page the instant an input * takes focus, which throws the layout sideways * --tap 40px the height of anything you touch. A separate axis * from type: text can shrink, thumbs cannot. * --fs-badge 9.5px the smallest legible size on a cheap LCD outdoors * * Figures come down LESS than headings on purpose. An ID code, a payout * amount or an arrival code is what somebody squints at across a room or * reads out over a phone — those earn their size, a screen title does not. */ --fs-display: 20px; /* screen titles, auth headings */ --fs-h1: 17px; /* card + section headings */ --fs-h2: 15px; /* service names, tile values, empty states */ --fs-h3: 16px; /* sheet titles, ID-card name */ --fs-body: 14px; /* buttons, list rows */ --fs-label: 13.5px; /* row labels, the emphasised line */ --fs-sub: 13px; /* timeline labels, key/value pairs */ --fs-meta: 12.5px; /* secondary text, job meta, amounts in lists */ --fs-small: 12px; /* hints, field labels, tile labels */ --fs-caps: 11px; /* uppercase eyebrows and group titles */ --fs-tiny: 10.5px; /* pills, counts */ --fs-nav: 10px; /* tab-bar labels */ --fs-badge: 9.5px; /* unread counts — the floor */ /* Figures. */ --fs-figure-xl: 26px; /* the payout total */ /* The one thing on the client's screen allowed to be bigger than a screen * title: how far away their professional is. It is the number they opened * the page for, and it sits on the ink card, not in the body copy — so it * does not reopen the "everything is too big" complaint that produced this * scale. Nothing else may use it. */ --fs-live: 28px; --fs-figure-lg: 22px; /* amount due */ --fs-figure: 20px; /* arrival / ID codes */ /* Floors. */ --fs-input: 16px; --tap: 40px; /* ── Spacing ──────────────────────────────────────────────────────────── * The other half of "it feels too big". Type was shrunk once on its own and * the screens still read as oversized, because the padding around every card * and row had not moved. Same rule: tune here, not at the call sites. */ --sp-wrap-y: 14px; /* screen padding, top/bottom */ --sp-wrap-x: 13px; /* screen padding, sides */ --sp-card: 13px; /* inside a card */ --sp-gap: 10px; /* between cards */ --sp-group: 14px; /* between grouped-list sections */ --sp-row-y: 11px; /* inside a list row */ --sp-row-x: 13px; } /* Dark, when the device asks for it and the worker has not forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0C0C0D; --bg-elevated: #151517; --surface: #151517; --surface-strong: #1E1E22; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #F2F2F4; --text-dim: #B9B9C2; --text-faint: #8A8A93; --gold: #F0D060; --gold-deep: #C09820; --gold-soft: rgba(240, 208, 96, 0.10); --gold-line: rgba(240, 208, 96, 0.26); --on-gold: #1A1A1A; --success: #6FD79B; --success-bg: rgba(111, 215, 155, 0.14); --danger: #FF8A80; --danger-bg: rgba(255, 138, 128, 0.14); --info: #7FB3F5; --stage-assigned: #F0D060; --stage-en_route: #7FB3F5; --stage-arrived: #B79BFF; --stage-in_progress: #67C7F0; --stage-completed: #6FD79B; --stage-awaiting_payment: #F0D060; --stage-paid: #6FD79B; --stage-closed: #9A9AA2; --stage-cancelled: #FF8A80; /* The ink surface LIFTS here rather than deepening. Its job is to be the * most distinct surface on the screen; against a #0C0C0D page a darker * card would vanish, so the role inverts even though the colour does not * flip. Same idea, opposite direction. */ --ink: #24242D; --ink-2: #2E2E39; --ink-line: rgba(255, 255, 255, 0.13); --on-ink: #F5F5F7; --on-ink-dim: rgba(245, 245, 247, 0.64); --on-ink-faint: rgba(245, 245, 247, 0.42); --gold-on-ink: #F0D060; --shadow-ink: 0 10px 34px rgba(0, 0, 0, 0.6); --shadow-card: 0 3px 14px rgba(0, 0, 0, 0.5); --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.65); } } /* Dark, chosen explicitly — must also win on a light-preferring device. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0C0C0D; --bg-elevated: #151517; --surface: #151517; --surface-strong: #1E1E22; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #F2F2F4; --text-dim: #B9B9C2; --text-faint: #8A8A93; --gold: #F0D060; --gold-deep: #C09820; --gold-soft: rgba(240, 208, 96, 0.10); --gold-line: rgba(240, 208, 96, 0.26); --on-gold: #1A1A1A; --success: #6FD79B; --success-bg: rgba(111, 215, 155, 0.14); --danger: #FF8A80; --danger-bg: rgba(255, 138, 128, 0.14); --info: #7FB3F5; --stage-assigned: #F0D060; --stage-en_route: #7FB3F5; --stage-arrived: #B79BFF; --stage-in_progress: #67C7F0; --stage-completed: #6FD79B; --stage-awaiting_payment: #F0D060; --stage-paid: #6FD79B; --stage-closed: #9A9AA2; --stage-cancelled: #FF8A80; /* Lifts, for the same reason as the media-query block above. */ --ink: #24242D; --ink-2: #2E2E39; --ink-line: rgba(255, 255, 255, 0.13); --on-ink: #F5F5F7; --on-ink-dim: rgba(245, 245, 247, 0.64); --on-ink-faint: rgba(245, 245, 247, 0.42); --gold-on-ink: #F0D060; --shadow-ink: 0 10px 34px rgba(0, 0, 0, 0.6); --shadow-card: 0 3px 14px rgba(0, 0, 0, 0.5); --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.65); } /* ── Base ─────────────────────────────────────────────────────────────────── */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: var(--fs-label); line-height: 1.4; -webkit-font-smoothing: antialiased; transition: background-color var(--motion-control) ease, color var(--motion-control) ease; } img { max-width: 100%; display: block; } a { color: var(--gold-deep); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── App shell ────────────────────────────────────────────────────────────── */ /* Mobile: a top bar and a bottom tab bar, exactly like the app. Desktop (>=900px): the tabs become a left rail and the content centres. */ .app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--topbar-h); padding: 7px var(--sp-wrap-x); padding-top: calc(7px + env(safe-area-inset-top)); /* `floating`: content passes under this, which is what earns the blur. */ background: var(--s-floating); backdrop-filter: saturate(180%) blur(var(--blur-floating)); -webkit-backdrop-filter: saturate(180%) blur(var(--blur-floating)); border-bottom: 1px solid var(--e-chrome); } .topbar-brand { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; /* The logo is 26px; without this the link is 26px tall to aim at. */ min-height: var(--tap); } .topbar-brand img { width: 24px; height: 24px; object-fit: contain; } .topbar-word { font-size: var(--fs-small); font-weight: var(--fw-figure); letter-spacing: 1.6px; color: var(--gold-deep); text-transform: uppercase; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; font-size: var(--fs-h3); line-height: 1; transition: background-color var(--motion-control) ease, color var(--motion-control) ease, transform var(--motion-tap) ease; } .icon-btn:hover { color: var(--text); background: var(--surface-strong); } .icon-btn:active { transform: scale(.94); } .icon-btn svg { width: 18px; height: 18px; } .main { flex: 1; width: 100%; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: var(--sp-wrap-y) var(--sp-wrap-x) calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); } /* ── Bottom tabs (mobile) → left rail (desktop) ───────────────────────────── */ .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: stretch; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); /* The other `floating` surface, and the other place the blur is paid for: a list scrolls under this bar on every screen that has one. */ background: var(--s-floating); backdrop-filter: saturate(180%) blur(var(--blur-floating)); -webkit-backdrop-filter: saturate(180%) blur(var(--blur-floating)); border-top: 1px solid var(--e-chrome); box-shadow: var(--lift-floating); /* Slides out of the way while you read — autoHideTabs() in portal-chrome.js decides when. The easing is deliberately asymmetric to the eye: 260ms is long enough to read as a movement rather than a flicker, and the curve leaves quickly and arrives softly, which is what makes the thing feel like it got out of your way rather than fell off the screen. */ transition: transform var(--motion-surface) var(--ease); } /* Off the bottom, not shrunk. `transform` composites on the GPU and moves nothing else on the page, so nothing under it reflows while it goes. */ body.tabs-hidden .tabs { transform: translateY(100%); } /* Someone who has asked for less motion still gets the space back — it just arrives instead of sliding. Vestibular sensitivity is not a reason to keep 56px of chrome they did not want. */ @media (prefers-reduced-motion: reduce) { .tabs { transition: none; } } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: none; cursor: pointer; color: var(--text-faint); font-family: inherit; font-size: var(--fs-nav); font-weight: var(--fw-label); letter-spacing: .2px; padding: 0; position: relative; transition: color var(--motion-control) ease; } .tab svg { width: 19px; height: 19px; } /* The rail toggle is a desktop control — the phone has a tab bar and there is nothing to collapse. Without this it has no display rule at small widths, so it becomes a 4px flex sliver wedged into the left of the tab bar, stealing space from Home. */ .rail-toggle { display: none; } .tab[aria-selected="true"] { color: var(--gold-deep); } .tab-badge { position: absolute; top: 8px; left: 50%; margin-left: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: var(--fs-badge); font-weight: var(--fw-figure); line-height: 16px; text-align: center; } /* ── Typography ───────────────────────────────────────────────────────────── */ .display { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: -.5px; line-height: 1.2; } .h1 { font-size: var(--fs-h1); font-weight: var(--fw-heading); letter-spacing: -.4px; } .h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.25px; } .small { font-size: var(--fs-meta); } .dim { color: var(--text-dim); } .faint { color: var(--text-faint); } .eyebrow { font-size: var(--fs-caps); font-weight: var(--fw-caps); letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); } .screen-title { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: -.5px; margin-bottom: 11px; } /* ── Cards ────────────────────────────────────────────────────────────────── */ .card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-card); margin-bottom: var(--sp-gap); box-shadow: var(--shadow-card); } .card-gold { background: var(--gold-soft); border-color: var(--gold-line); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--tap); padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--gold); color: var(--on-gold); font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); cursor: pointer; text-decoration: none; transition: filter var(--motion-control) ease, transform var(--motion-tap) ease, background-color var(--motion-control) ease; } .btn:hover { filter: brightness(1.04); } .btn:active { transform: scale(.985); } .btn:disabled { opacity: .55; cursor: default; transform: none; filter: none; } .btn svg { width: 16px; height: 16px; } .btn-quiet { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-quiet:hover { background: var(--surface-strong); } /* Declining loses the job, so it must never look like the primary action. */ .btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border-strong); font-weight: var(--fw-label); } .btn-ghost:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); } .btn-sm { width: auto; min-height: var(--tap); padding: 8px 14px; font-size: var(--fs-meta); } /* ── Forms ────────────────────────────────────────────────────────────────── */ /* 16px minimum: anything smaller makes iOS zoom the page on focus. */ .field { width: 100%; min-height: var(--tap); padding: 10px 13px; background: var(--surface-strong); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text); font-family: inherit; font-size: var(--fs-input); transition: border-color var(--motion-control) ease, background-color var(--motion-control) ease; } .field::placeholder { color: var(--text-faint); } .field:focus { outline: none; border-color: var(--gold); background: var(--surface); } .field-label { display: block; font-size: var(--fs-small); font-weight: var(--fw-caps); color: var(--text-dim); margin-bottom: 7px; } /* A consent tick. The whole row is the target, not the box: an 18px square is a thing you miss, and "I did not agree to that" is an expensive thing for a user to be wrong about. */ .consent { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tap); margin-top: 13px; padding: 9px 0; cursor: pointer; } .consent input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold); cursor: pointer; } .consent-text { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.45; white-space: normal; } /* An inline link inside a sentence cannot be 40px tall without shoving the line apart. So the HIT AREA grows and the layout does not: padding pushes the touchable box out, an equal negative margin pulls the flow back. A worker tapping a client's number on a bumpy road gets a real target, and the row stays the height it looks. */ .val a[href^="tel:"], .row-value a[href^="tel:"], a.tel-link { display: inline-block; padding: 13px 4px; margin: -13px -4px; text-decoration: none; color: var(--gold-deep); font-weight: var(--fw-medium); } .val a[href^="tel:"]:hover, .row-value a[href^="tel:"]:hover, a.tel-link:hover { text-decoration: underline; } .inline-form { display: flex; gap: 8px; align-items: stretch; } .inline-form .field { flex: 1; min-width: 0; } .inline-form .btn { width: auto; flex: 0 0 auto; } /* ── Rows / grouped lists (the app's settings pattern) ────────────────────── */ .group { margin-bottom: var(--sp-group); } .group-title { font-size: var(--fs-caps); font-weight: var(--fw-caps); letter-spacing: .5px; text-transform: uppercase; color: var(--text-faint); margin: 0 0 7px 4px; } .group-body { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .row { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: var(--sp-row-y) var(--sp-row-x); text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: var(--fs-body); cursor: pointer; text-decoration: none; transition: background-color var(--motion-tap) ease; } .row:last-child { border-bottom: none; } .row:hover { background: var(--surface-strong); } .row-static { cursor: default; } .row-static:hover { background: none; } .row-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--surface-strong); color: var(--text-dim); } .row-icon svg { width: 17px; height: 17px; } .row-icon-gold { background: var(--gold-soft); color: var(--gold-deep); } .row-body { flex: 1; min-width: 0; } .row-label { display: block; font-size: var(--fs-label); font-weight: var(--fw-label); } .row-hint { display: block; font-size: var(--fs-small); color: var(--text-dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-value { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--text-dim); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-chev { flex: 0 0 auto; color: var(--text-faint); } .row-chev svg { width: 17px; height: 17px; } .row-danger, .row-danger .row-label { color: var(--danger); } /* ── Switch ───────────────────────────────────────────────────────────────── */ /* A real checkbox, visually hidden but still focusable and announced; the track and thumb are drawn from it so keyboard and screen-reader users get the control for free. */ .switch { position: relative; flex: 0 0 auto; display: inline-flex; } .switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; z-index: 1; } .switch-track { width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--border-strong); display: inline-flex; align-items: center; padding: 3px; transition: background-color var(--motion-control) ease; } .switch-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--motion-control) cubic-bezier(.2, .8, .2, 1); } .switch input:checked + .switch-track { background: var(--gold); } .switch input:checked + .switch-track .switch-thumb { transform: translateX(18px); } .switch input:disabled + .switch-track { opacity: .55; } .switch input:focus-visible + .switch-track { outline: 2px solid var(--gold); outline-offset: 2px; } /* ── Avatar ───────────────────────────────────────────────────────────────── */ .avatar { border-radius: var(--radius-pill); background: var(--surface-strong); object-fit: cover; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--gold-deep); font-weight: var(--fw-figure); border: 1px solid var(--border); overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-sm { width: 38px; height: 38px; font-size: var(--fs-meta); } .avatar-md { width: 42px; height: 42px; font-size: var(--fs-sub); } .avatar-lg { width: 76px; height: 76px; font-size: var(--fs-figure-lg); } .avatar-edit { position: relative; display: inline-block; cursor: pointer; } .avatar-edit-badge { position: absolute; right: -1px; bottom: -1px; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--gold); color: var(--on-gold); display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--bg); } .avatar-edit-badge svg { width: 13px; height: 13px; } /* A small copy button beside a value worth copying — an account number, a code. Sized to the tap floor even though it looks smaller than that: the icon is 15px and the target around it is 40. */ .btn-copy { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); margin: -10px -8px -10px 2px; vertical-align: middle; background: none; border: none; color: var(--text-faint); cursor: pointer; border-radius: var(--radius-sm); } .btn-copy:hover { color: var(--gold-deep); background: var(--surface-strong); } .btn-copy svg { width: 15px; height: 15px; } /* The code a client reads out loud. Deliberately unlike `.verify-code` — the worker's EBUTECH ID sits on the same screen, and the two are opposite jobs: one you check, one you give. */ .code-digits { display: flex; justify-content: center; gap: 6px; margin-top: 4px; } .code-digit { flex: 0 0 auto; min-width: 38px; padding: 10px 0; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--gold-line); color: var(--gold-deep); font-size: var(--fs-figure); font-weight: var(--fw-figure); text-align: center; line-height: 1; /* Tabular so the boxes do not shimmy as digits change width. */ font-variant-numeric: tabular-nums; } @media (max-width: 359px) { /* Six 38px boxes plus gaps do not fit a 360px screen once the card padding is taken off. */ .code-digit { min-width: 32px; font-size: var(--fs-h1); } .code-digits { gap: 4px; } } /* The rating stars. */ .rate-stars { display: flex; gap: 4px; margin-bottom: 10px; } .rate-star { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--border-strong); transition: color var(--motion-tap) ease, transform var(--motion-tap) ease; } .rate-star svg { width: 26px; height: 26px; } .rate-star:active { transform: scale(.92); } .rate-star.is-on { color: var(--gold); } .rate-star.is-on svg { fill: currentColor; } /* ── Pills / badges ───────────────────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); /* A .pill is usually a label. Where it is a button — the removable chips on the booking form — 20px tall is not something a finger hits. */ font-size: var(--fs-tiny); font-weight: var(--fw-figure); letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; } /* A .pill used as a BUTTON has to bring its own surface. Without one the browser's default `background: buttonface` shows through, and the saved address chips on the booking form rendered as raw grey UA buttons in the middle of a designed form — a 40px min-height around 10px uppercase text made them grey circles. The tap floor stays; the padding widens so the chip is a chip and not a coin. */ button.pill { min-height: var(--tap); padding: 0 14px; cursor: pointer; background: var(--surface-strong); color: var(--text); border: 1px solid var(--border); } button.pill:hover { border-color: var(--gold-line); } .pill-gold, button.pill-gold { background: var(--gold); color: var(--on-gold); border-color: var(--gold); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Stage colour comes in as --stage-c on the element's own style attribute, so one rule covers every stage. NO ATTRIBUTE SELECTOR. This was `.pill-stage[data-stage]`, and the customer account's stagePill() sets --stage-c but never sets data-stage — only the worker portal's does. So the selector missed every pill in the account and the whole lifecycle rendered in the same grey: en route, at your door and paid were visually identical on the bookings list and the detail screen. The fallback does the guarding the attribute was there for — a pill with no --stage-c still reads as a neutral chip instead of an invalid colour. */ .pill-stage { color: var(--stage-c, var(--text-dim)); background: color-mix(in srgb, var(--stage-c, var(--text-dim)) 14%, transparent); } /* ── Tiles / stats ────────────────────────────────────────────────────────── */ .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .tile { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .tile-icon { color: var(--gold); } .tile-icon svg { width: 17px; height: 17px; } .tile-value { font-size: var(--fs-h2); font-weight: var(--fw-medium); letter-spacing: -.3px; } .tile-label { font-size: var(--fs-small); color: var(--text-faint); } /* ── Job card ─────────────────────────────────────────────────────────────── */ .job-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; } .job-service { font-size: var(--fs-h2); font-weight: var(--fw-heading); letter-spacing: -.2px; } .job-meta { font-size: var(--fs-meta); color: var(--text-dim); margin-top: 2px; } .job-rows { border-top: 1px solid var(--border); padding-top: 9px; margin: 9px 0; } .job-row { display: flex; gap: 10px; font-size: var(--fs-sub); padding: 2px 0; color: var(--text); } .job-row .lbl { flex: 0 0 84px; color: var(--text-faint); } .job-row .val { min-width: 0; overflow-wrap: anywhere; } .job-actions { display: flex; flex-direction: column; gap: 7px; } .hint { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.45; } .hint-ok { color: var(--success); font-weight: 600; } .job-msg { font-size: var(--fs-small); margin-top: 8px; min-height: 16px; } .job-msg.error { color: var(--danger); } .job-msg.success { color: var(--success); } /* ── Empty / loading states ───────────────────────────────────────────────── */ .empty { text-align: center; padding: 44px 22px; } .empty-circle { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; background: var(--surface-strong); color: var(--text-faint); display: flex; align-items: center; justify-content: center; } .empty-circle svg { width: 26px; height: 26px; } .empty-title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -.25px; } .empty-text { font-size: var(--fs-meta); color: var(--text-dim); margin-top: 5px; line-height: 1.5; } .skeleton { background: linear-gradient(90deg, var(--surface-strong) 25%, var(--border) 37%, var(--surface-strong) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: var(--radius-md); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .skeleton-card { height: 132px; margin-bottom: 12px; border-radius: var(--radius-lg); } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ── Toast ────────────────────────────────────────────────────────────────── */ .toast-host { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 60; width: calc(100% - 32px); max-width: 420px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .toast { background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 15px; box-shadow: var(--shadow-pop); font-size: var(--fs-body); font-weight: 500; animation: toast-in .22s ease; } .toast-error { border-color: var(--danger); color: var(--danger); } .toast-ok { border-color: var(--success); color: var(--success); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ── Sheet / modal ────────────────────────────────────────────────────────── */ .sheet-backdrop { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.5); display: flex; align-items: flex-end; justify-content: center; animation: fade-in .18s ease; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .sheet { width: 100%; max-width: 520px; background: var(--bg); color: var(--text); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; animation: sheet-up .24s cubic-bezier(.2, .8, .2, 1); } @keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sheet-title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.25px; } .sheet-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; } /* ── EBUTECH ID card ──────────────────────────────────────────────────────── */ .idcard { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 26px 22px; text-align: center; } .idcard-logo { width: 52px; height: 52px; border-radius: var(--radius-md); background: #1E1E22; margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; } .idcard-logo img { width: 38px; height: 38px; object-fit: contain; } .idcard-word { font-size: var(--fs-small); font-weight: var(--fw-figure); letter-spacing: 1.6px; color: var(--gold-deep); } .idcard-photo { margin: 16px auto 0; width: 70px; height: 70px; font-size: var(--fs-h1); } .idcard-name { font-size: var(--fs-h3); font-weight: 600; margin-top: 12px; } .idcard-role { font-size: var(--fs-meta); color: var(--text-dim); margin-top: 2px; } .idcard-code-label { font-size: var(--fs-caps); font-weight: var(--fw-caps); letter-spacing: .5px; text-transform: uppercase; color: var(--gold-deep); margin-top: 22px; } .idcard-code { font-size: var(--fs-figure-xl); font-weight: var(--fw-figure); letter-spacing: 4px; margin-top: 8px; word-break: break-all; } .idcard-hint { font-size: var(--fs-meta); color: var(--text-dim); margin-top: 16px; line-height: 1.5; } .notice { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-top: 14px; } .notice-icon { flex: 0 0 auto; color: var(--gold); } .notice-icon svg { width: 18px; height: 18px; } .notice-text { font-size: var(--fs-meta); color: var(--text-dim); line-height: 1.5; } /* ── Payout account ─────────────────────────────────────────────────────── Where the worker's money lands. The confirmation block is the only loud thing here on purpose: it is the moment someone checks that a stranger is not about to be paid instead of them, and it should not read as a caption under a text field. No amounts appear anywhere on this screen. */ .btn-block { display: block; width: 100%; } /* A settings row that is asking for something, rather than listing it. Used for "set up where you get paid" — earnings with nowhere to go is the one thing on the Earnings screen a worker has to act on. */ .row-prompt { border: 1px solid var(--gold-line); border-radius: var(--radius-md); background: var(--gold-soft); margin-bottom: 14px; } .py-intro { text-align: center; padding: 22px 8px 26px; } .py-intro-icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-deep); } .py-intro-icon svg { width: 24px; height: 24px; } .py-intro-title { font-size: var(--fs-h2, 18px); font-weight: var(--fw-bold, 700); } .py-intro-text { margin: 8px auto 0; max-width: 34ch; font-size: var(--fs-meta); color: var(--text-dim); line-height: 1.55; } /* The account on file, shown as a card because that is what it is. */ .py-card { background: var(--bg-elevated); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 20px; } .py-card-bank { font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; } .py-card-acct { margin-top: 8px; font-size: 21px; font-weight: var(--fw-bold, 700); letter-spacing: .08em; font-variant-numeric: tabular-nums; } .py-card-name { margin-top: 6px; font-size: var(--fs-small); color: var(--text-dim); } .py-card-status { margin-top: 12px; font-size: var(--fs-meta); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: .06em; } /* The confirmation. The single most important thing on the screen. */ .py-confirm { margin-top: 16px; padding: 16px; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--radius-md); text-align: center; } .py-confirm-label { font-size: var(--fs-meta); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; } .py-confirm-name { margin-top: 6px; font-size: 18px; font-weight: var(--fw-bold, 700); line-height: 1.3; } .py-confirm-ok { margin-top: 8px; font-size: var(--fs-meta); color: var(--success); display: inline-flex; align-items: center; gap: 6px; } .py-confirm-ok svg { width: 15px; height: 15px; } .py-confirm-warn { margin-top: 8px; font-size: var(--fs-meta); color: var(--text-dim); line-height: 1.5; } .py-err { margin-top: 10px; font-size: var(--fs-meta); color: var(--danger, #c62828); line-height: 1.5; } /* ── Earnings ─────────────────────────────────────────────────────────────── */ .earn-hero { background: radial-gradient(circle at 12% 12%, var(--gold-soft) 0%, transparent 55%), var(--bg-elevated); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); padding: 22px; margin-bottom: 14px; } /* The estimated next payout on the worker's home screen. */ .payout-figure { display: block; margin-top: 2px; font-size: var(--fs-figure-lg); font-weight: var(--fw-figure); color: var(--gold-deep); } .earn-amount { font-size: var(--fs-figure-xl); font-weight: var(--fw-figure); letter-spacing: -1px; margin: 4px 0 2px; } .earn-sub { font-size: var(--fs-meta); color: var(--text-dim); } .earn-processing { display: inline-block; margin-top: 12px; padding: 6px 13px; border-radius: var(--radius-pill); background: var(--gold); color: var(--on-gold); font-size: var(--fs-small); font-weight: var(--fw-medium); } .payout-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: var(--fs-sub); } .payout-row:first-child { border-top: none; } .payout-amt { font-weight: var(--fw-medium); } /* ── Scanner overlay ──────────────────────────────────────────────────────── */ .scan-overlay { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; align-items: center; justify-content: center; } .scan-overlay video { width: 100%; height: 100%; object-fit: cover; } .scan-frame { position: absolute; width: 226px; height: 226px; border: 3px solid var(--gold); border-radius: var(--radius-lg); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); } .scan-tip { position: absolute; bottom: 122px; color: #fff; font-size: var(--fs-body); font-weight: 600; text-shadow: 0 1px 6px rgba(0, 0, 0, .85); padding: 0 24px; text-align: center; } .scan-close { position: absolute; bottom: 46px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); padding: 12px 28px; border-radius: var(--radius-pill); cursor: pointer; } /* ── Sign-in page ─────────────────────────────────────────────────────────── */ .auth-page { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); } .auth-card { width: 100%; max-width: 400px; } .auth-brand { text-align: center; margin-bottom: 26px; } .auth-brand img { width: 56px; height: 56px; margin: 0 auto 12px; object-fit: contain; } .auth-title { font-size: var(--fs-display); font-weight: var(--fw-heading); letter-spacing: -.5px; } .auth-sub { font-size: var(--fs-sub); color: var(--text-dim); margin-top: 5px; } .auth-fields { display: flex; flex-direction: column; gap: 14px; } .auth-msg { font-size: var(--fs-sub); margin-top: 14px; min-height: 18px; text-align: center; } .auth-msg.error { color: var(--danger); } .auth-msg.success { color: var(--success); } .auth-foot { text-align: center; font-size: var(--fs-meta); color: var(--text-dim); margin-top: 20px; line-height: 1.6; } .auth-theme { position: fixed; top: calc(14px + env(safe-area-inset-top)); right: 16px; z-index: 10; } /* ── Desktop: tabs become a left rail ─────────────────────────────────────── */ @media (min-width: 900px) { .app { flex-direction: row; } .tabs { position: sticky; top: 0; bottom: auto; left: auto; right: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 232px; flex: 0 0 232px; height: 100vh; height: 100dvh; padding: 84px 14px 18px; gap: 4px; border-top: none; border-right: 1px solid var(--border); background: var(--bg-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; } .tab { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 13px; padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--fs-label); } .tab:hover { background: var(--surface-strong); color: var(--text); } .tab[aria-selected="true"] { background: var(--gold-soft); color: var(--gold-deep); } .tab-badge { position: static; margin: 0 0 0 auto; } .shell { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-left: 20px; padding-right: 20px; } .main { padding-top: 64px; } .wrap { padding-bottom: 48px; } .toast-host { bottom: 24px; left: auto; right: 24px; transform: none; } /* ── The rail collapses ── A left rail is the right shape for a desktop, but 232px of it is a lot to hold open for three destinations you already know the icons of. Collapsing is one click and the choice is remembered, so it is a preference rather than something to redo every visit. */ .rail-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 0 10px auto; flex: 0 0 auto; border-radius: var(--radius-md); background: none; border: 1px solid transparent; color: var(--text-faint); cursor: pointer; transition: background-color var(--motion-control) ease, color var(--motion-control) ease; } .rail-toggle:hover { background: var(--surface-strong); color: var(--text); } .rail-toggle svg { width: 18px; height: 18px; } /* The rail is persistent navigation and never hides — belt and braces against a tablet rotated from portrait, where the bar may already be translated off-screen when the layout becomes a rail. */ body.tabs-hidden .tabs { transform: none; } .tabs { transition: width var(--motion-control) ease, flex-basis var(--motion-control) ease; } :root[data-rail="mini"] .tabs { width: 74px; flex: 0 0 74px; padding-left: 12px; padding-right: 12px; } :root[data-rail="mini"] .rail-toggle { margin-right: auto; margin-left: auto; } :root[data-rail="mini"] .tab { justify-content: center; padding: 12px 0; gap: 0; } /* The label goes, the icon stays put. `title` carries the name for anyone who needs it, and the tab keeps its accessible name from the span. */ :root[data-rail="mini"] .tab > span:not(.tab-badge) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :root[data-rail="mini"] .tab-badge { position: absolute; top: 4px; right: 12px; margin: 0; } .sheet-backdrop { align-items: center; } .sheet { border-radius: var(--radius-xl); max-height: 84vh; } } /* ── Customer account ─────────────────────────────────────────────────────── */ /* Used by /account. Everything above is shared with the worker portal; these are the pieces only the customer side needs. */ /* Hide the topbar's inline CTA where there is no room for it. */ @media (max-width: 480px) { .hide-sm { display: none; } } /* Detail views push over a list, so they carry their own back button. */ .detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } /* Segmented control: Active / Past. */ .seg { display: flex; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--surface-strong); border-radius: var(--radius-md); } .seg-btn { flex: 1; min-height: var(--tap); padding: 8px 10px; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-dim); font-family: inherit; font-size: var(--fs-label); font-weight: var(--fw-label); cursor: pointer; transition: background-color var(--motion-control) ease, color var(--motion-control) ease; } .seg-btn.is-on { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-card); } .seg-count { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--gold-soft); color: var(--gold-deep); font-size: var(--fs-small); font-weight: var(--fw-figure); } /* Booking list card — a button, so the whole row is one tap target. */ .booking-card { display: block; width: 100%; text-align: left; font-family: inherit; color: inherit; cursor: pointer; } .booking-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } /* Journey timeline on a booking. */ .tl-row { display: flex; gap: 12px; align-items: flex-start; } .tl-rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; width: 14px; } .tl-dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; background: var(--surface-strong); border: 2px solid var(--border-strong); } .tl-line { flex: 1; width: 2px; min-height: 22px; background: var(--border); } .tl-label { font-size: var(--fs-sub); color: var(--text-faint); padding-bottom: 14px; } .tl-row.is-done .tl-dot { background: var(--success); border-color: var(--success); } .tl-row.is-done .tl-line { background: var(--success); } .tl-row.is-done .tl-label { color: var(--text-dim); } .tl-row.is-now .tl-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); } .tl-row.is-now .tl-label { color: var(--text); font-weight: var(--fw-medium); } /* The distance/ETA, hung under the step it belongs to. `block` rather than an inline span, so a long line ("About 24 min away · set off 09:12") wraps under the label instead of pushing the row wide on a 360px phone. */ .tl-eta { display: block; margin-top: 2px; font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--gold); } /* The assigned professional. */ .worker-row { display: flex; align-items: center; gap: 14px; } .worker-photo { width: 50px; height: 50px; font-size: var(--fs-h2); } .verify-box { margin-top: 14px; padding: 14px; text-align: center; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: var(--radius-md); } .verify-code { font-size: var(--fs-figure); font-weight: var(--fw-figure); letter-spacing: 3px; margin: 4px 0 6px; word-break: break-all; } .pay-amount { font-size: var(--fs-figure-lg); font-weight: var(--fw-figure); letter-spacing: -.6px; } /* Inline icon sitting in a line of text. */ .inline-ic { width: 14px; height: 14px; vertical-align: -2px; } /* Forms inside cards stack rather than sit on one line. */ #profileForm .field, #addrForm .field { width: 100%; } /* ── EBUCHAT ───────────────────────────────────────────────────────────────── A client and their professional talking about one job. Shared by the account and the worker portal, because two people reading one conversation should be reading the same thing. Deliberately not styled as a live messenger: no typing dots, no read receipts. This is a job thread that may run for weeks — a "seen" mark invites arguments about response times, and a typing indicator promises a presence nobody agreed to. */ /* ── The inbox ── */ .chat-list { display: flex; flex-direction: column; } .chat-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 4px; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); font-family: inherit; color: inherit; cursor: pointer; } .chat-row:last-child { border-bottom: none; } .chat-row:hover { background: var(--surface); } /* Which conversation is open. Only meaningful beside the thread, so only desktop paints it — on a phone the list is not on screen at the time. */ .chat-row.is-open { background: transparent; } .chat-avatar { position: relative; flex: 0 0 auto; overflow: hidden; width: 46px; height: 46px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-deep); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: var(--fw-medium); } /* The photo sits over the initials rather than replacing them, so a broken or slow image degrades to initials instead of an empty circle. JS removes the img on error; until then the initials are what shows through. */ .chat-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .chat-avatar-sm { width: 38px; height: 38px; font-size: var(--fs-meta); } /* A dot as well as the count, so an unread row reads as unread to someone who scans left to right and stops. */ .chat-dot { position: absolute; top: 0; right: 0; z-index: 2; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); border: 2px solid var(--bg); } .chat-main { flex: 1; min-width: 0; } .chat-top { display: flex; align-items: center; gap: 8px; } .chat-name { flex: 1; min-width: 0; font-size: var(--fs-label); font-weight: var(--fw-label); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-name.is-unread { font-weight: var(--fw-figure); } .chat-when { flex: 0 0 auto; font-size: var(--fs-caps); color: var(--text-faint); } .chat-preview { display: block; margin-top: 2px; font-size: var(--fs-sub); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-preview.is-unread { color: var(--text); font-weight: var(--fw-label); } .chat-bottom { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .chat-service { flex: 1; min-width: 0; font-size: var(--fs-caps); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-closed { font-size: var(--fs-nav); font-weight: var(--fw-medium); color: var(--text-faint); } .chat-badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--gold); color: var(--on-gold); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-tiny); font-weight: var(--fw-figure); } /* ── The shell: one pane on a phone, two on a desktop ──────────────────────── Both panes are always in the markup and CSS decides which are on screen. The alternative — asking JS which layout we are in — means a resize across the breakpoint renders the wrong thing until something re-renders, and a phone rotated to landscape is exactly that resize. */ .chat-pane { display: block; } /* One pane at a time on a phone, so there is nothing to divide. */ .chat-grip { display: none; } .chat-pane.has-thread .chat-side { display: none; } .chat-pane:not(.has-thread) .chat-thread { display: none; } .chat-side-head { display: none; } /* the phone has a screen title instead */ .chat-blank { display: none; } /* only a two-pane layout has a blank side */ /* ── One conversation ── */ .chat-thread { display: flex; flex-direction: column; min-width: 0; } .chat-head { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 8px 0 12px; border-bottom: 1px solid var(--border); } .chat-head-body { flex: 1; min-width: 0; } .chat-head-name { display: block; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-head-role { display: block; font-size: var(--fs-small); color: var(--text-dim); margin-top: 1px; } /* The worker's side of the same slot. NOT .chat-head-role: the client's side puts the worker's PROFESSION there, and reusing it here put the service booked under the client's name — so "Backend developer" read as the client's job title. The icon and the booking code are what make this read as the job the conversation is about. */ .chat-head-job { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: var(--fs-small); color: var(--text-faint); overflow: hidden; } .chat-head-job svg { width: 12px; height: 12px; flex: 0 0 auto; } .chat-head-job > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-body { /* min-height:0 is what lets a flex child actually scroll rather than grow. */ flex: 1; min-height: 0; overflow-y: auto; /* A flick at the top of the thread must not start dragging the page behind it — on a phone that reads as the chat falling apart. */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 2px; display: flex; flex-direction: column; } .chat-day { text-align: center; margin: 14px 0 10px; } .chat-day span { display: inline-block; padding: 4px 10px; border-radius: 10px; background: var(--surface-strong); color: var(--text-faint); font-size: var(--fs-caps); font-weight: var(--fw-medium); } .msg { max-width: 82%; align-self: flex-start; margin-top: 8px; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--surface-strong); border: 1px solid var(--border); } .msg-mine { align-self: flex-end; background: var(--gold); border-color: transparent; border-radius: 18px 18px 6px 18px; } /* A run from one side sits tighter, so it reads as one turn. */ .msg-run { margin-top: 2px; } .msg-body { font-size: var(--fs-body); line-height: 1.5; color: var(--text); /* A pasted URL wraps instead of widening the bubble. */ white-space: pre-wrap; overflow-wrap: anywhere; } .msg-mine .msg-body { color: var(--on-gold); } .msg-meta { margin-top: 4px; font-size: var(--fs-nav); color: var(--text-faint); text-align: right; } .msg-mine .msg-meta { color: var(--on-gold); opacity: 0.7; } /* A message that has left the composer but not yet reached the server. It is on screen immediately because the alternative — a message that vanishes for 400ms — makes people send it twice. */ .msg-pending { opacity: 0.62; } .msg-failed { background: var(--danger-bg); border-color: var(--danger); } .msg-failed .msg-body { color: var(--text); } .msg-retry { margin-top: 6px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-caps); font-weight: var(--fw-medium); color: var(--danger); text-decoration: underline; } .chat-composer { display: flex; align-items: flex-end; gap: 8px; flex: 0 0 auto; padding-top: 12px; border-top: 1px solid var(--border); } .chat-input { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 12px 16px; border-radius: 22px; background: var(--surface-strong); border: 1px solid var(--border-strong); color: var(--text); font-family: inherit; /* 16px or iOS zooms the page the moment this takes focus. */ font-size: var(--fs-input); line-height: 1.4; } .chat-input:focus { outline: none; border-color: var(--gold); } .chat-send { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--on-gold); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* Without this the button is an empty gold circle: an inline with a viewBox and no dimensions has no intrinsic size, and as a flex item it collapses to nothing. Every other icon on the site is sized by its own component rule, and this one was simply missing. */ .chat-send svg { width: 20px; height: 20px; } .chat-send:disabled { opacity: 0.45; cursor: default; } .chat-closed-bar { flex: 0 0 auto; margin-top: 12px; padding: 14px; border-top: 1px solid var(--border); text-align: center; font-size: var(--fs-small); color: var(--text-faint); } /* ── Full-bleed on a phone ─────────────────────────────────────────────────── A conversation takes the whole screen. The site's top bar and tab bar are navigation for a page you are reading; a chat is a place you are *in*, and every app that does this well gets out of the way while you are in it. The back button in the chat header is the way out. Fixed to the VISUAL viewport rather than the layout one. That is the whole trick for the keyboard: on iOS the layout viewport does not shrink when the keyboard opens, so anything positioned against it ends up underneath the keys. --vv-h and --vv-top are written by JS from window.visualViewport and fall back to dvh where the API is missing. */ /* Phones only. On a desktop the rail is the navigation and there is nothing to get out of the way of — the conversation sits beside the list instead. */ @media (max-width: 899px) { /* THE SHELL IS NOT THIS RULE'S JOB ANY MORE. `chat-open` used to strip the top bar and the tabs itself, which is how the product ended up with three different mechanisms for the same idea. EbuPortal.chrome() marks a conversation `off` like every other task, and what is left here is the part that is genuinely about a conversation: pinning to the visual viewport so the keyboard cannot cover the composer. */ body.chat-open { overflow: hidden; } body.chat-open .wrap { padding: 0; max-width: none; } body.chat-open .chat-thread { position: fixed; z-index: 60; top: var(--vv-top, 0px); left: 0; right: 0; height: var(--vv-h, 100dvh); background: var(--bg); padding: 0 14px; } /* The top bar is gone, so the header takes over clearing the notch. */ body.chat-open .chat-head { padding-top: calc(8px + env(safe-area-inset-top)); } /* And the tab bar is gone, so the composer clears the home indicator — except while the keyboard is up, where the keys already fill that space. */ body.chat-open .chat-composer { padding-bottom: max(env(safe-area-inset-bottom), 10px); } body.chat-open.kb-open .chat-composer { padding-bottom: 8px; } } /* ── EBUCHAT on a desktop ──────────────────────────────────────────────────── Placed after the phone rules on purpose: these are overrides, and letting source order do that work is what keeps !important out of the file. */ @media (min-width: 900px) { /* ── EBUCHAT: the list and the conversation, side by side ── One pane is right on a phone and wasteful here: the inbox is the thing you move between conversations with, and hiding it to read one of them means a round trip through a back button for every switch. */ /* The portal is a 620px reading column, which is right for a settings screen and absurd for two panes — messages wrapped after three words. EBUCHAT is the one view that wants the desk. */ body.chat-view .wrap { max-width: 1180px; } .chat-pane { display: flex; align-items: stretch; height: calc(100dvh - 64px - 18px - 48px); min-height: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* The list stays on screen with a conversation open, unlike the phone. */ .chat-pane.has-thread .chat-side { display: flex; } .chat-grip { display: block; } /* RESIZABLE, and the width is a custom property so it survives the wholesale re-render both portals do on every poll — a width held in a JS variable would have to be re-applied by whoever remembered to, after every render. portal-chrome.js writes it; the stylesheet reads it. */ .chat-side { flex: 0 0 var(--chat-side-w, 320px); min-width: 0; display: flex; flex-direction: column; background: var(--bg-elevated); } /* THE GRIP. Six pixels of hit area around a one-pixel line, which is what makes it grabbable without making it look like a component. */ .chat-grip { flex: 0 0 6px; align-self: stretch; position: relative; cursor: col-resize; background: none; border: 0; padding: 0; touch-action: none; /* or a drag scrolls the page on a touch laptop */ } .chat-grip::before { content: ''; position: absolute; inset: 0 auto 0 2px; width: 1px; background: var(--border); transition: background var(--motion-tap) ease, width var(--motion-tap) ease; } .chat-grip:hover::before, .chat-grip:focus-visible::before { width: 2px; background: var(--gold); } .chat-grip:focus-visible { outline: none; } /* While dragging, the cursor stays a resize cursor everywhere and nothing selects — without this a fast drag highlights the whole conversation. */ body.is-resizing { cursor: col-resize; user-select: none; } body.is-resizing .chat-grip::before { width: 2px; background: var(--gold); } @media (prefers-reduced-motion: reduce) { .chat-grip::before { transition: none; } } .chat-side-head { display: block; flex: 0 0 auto; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); } .chat-side-title { font-size: var(--fs-body); font-weight: var(--fw-heading); letter-spacing: -.2px; } .chat-side-sub { font-size: var(--fs-small); color: var(--text-dim); margin-top: 2px; } .chat-side .chat-list { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px; } .chat-side .chat-row { padding: 11px 8px; border-radius: var(--radius-md); border-bottom: none; } .chat-side .chat-row.is-open { background: var(--gold-soft); } .chat-thread { flex: 1; min-width: 0; padding: 0 18px; } /* The list is right there, so there is nothing to go back to. */ .chat-thread .chat-back { display: none; } .chat-head { padding-top: 14px; } .chat-composer { padding-bottom: 16px; } /* Nothing open yet. An empty right-hand pane with no explanation reads as a page that failed to load. */ .chat-blank { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; color: var(--text-dim); } .chat-blank .empty-circle { margin-bottom: 14px; } .chat-blank-title { font-size: var(--fs-body); font-weight: var(--fw-heading); color: var(--text); } .chat-blank-text { font-size: var(--fs-sub); margin-top: 6px; max-width: 34ch; } /* Wide enough to read, capped so a long message does not run past a comfortable measure across a large screen. */ .msg { max-width: min(68%, 58ch); } } /* A link into EBUCHAT from a booking. */ .row-chat { width: 100%; background: none; border: none; font-family: inherit; color: inherit; cursor: pointer; text-align: left; } .hint-error { color: var(--danger); font-weight: 600; } /* ── Am I free today? ────────────────────────────────────────────────────── The worker's own availability, at the top of their home screen. Big enough to be a decision rather than a setting: it is the first thing they change when they finish for the day, and the last thing anyone should have to hunt for in a settings list. */ .duty { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); font-family: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color var(--motion-control) ease, background-color var(--motion-control) ease; } .duty.is-on { border-color: var(--gold-line); background: var(--gold-soft); } .duty:disabled { opacity: .6; cursor: default; } .duty-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); } .duty.is-on .duty-dot { background: var(--success); /* A quiet halo rather than an animation — this sits on screen all day. */ box-shadow: 0 0 0 4px var(--success-bg); } .duty-body { flex: 1; min-width: 0; } .duty-label { display: block; font-size: var(--fs-label); font-weight: var(--fw-medium); color: var(--text); } .duty-hint { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duty-switch { flex: 0 0 auto; position: relative; width: 46px; height: 28px; border-radius: var(--radius-pill); background: var(--surface-strong); border: 1px solid var(--border-strong); transition: background-color var(--motion-control) ease, border-color var(--motion-control) ease; } .duty.is-on .duty-switch { background: var(--gold); border-color: transparent; } /* The knob is LIGHT in both themes, not --bg-elevated. In dark, --bg-elevated is #151517 — a near-black knob on a near-black track, so the switch had no visible off state at all: the "I'm at this address now" toggle on the booking form and the worker's duty switch both read as an empty dark pill. .switch-thumb next door already hardcodes #fff for the same reason. On the gold ON track a light knob still reads, so one colour serves both states. */ .duty-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #F1F1F4; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform var(--motion-control) ease; } .duty.is-on .duty-knob { transform: translateX(18px); } /* "I'm at this address now", on the booking form. Same switch, different job: it qualifies the address field above it rather than standing alone, so it loses the card and gains a hairline. */ .at-here { margin: 14px 0 0; padding: 14px 0 0; background: none; border: none; border-top: 1px solid var(--border); border-radius: var(--radius-md); } .at-here.is-on { background: none; border-color: var(--border); } /* The base hint is one line with an ellipsis, because a worker's off-duty line is short and lives in a fixed row. This copy is a sentence and must wrap — truncated to "Optional. Turn on for a live dist…" it says nothing. */ .at-here .duty-hint { white-space: normal; overflow: visible; line-height: 1.45; } /* Waiting on the browser's permission prompt. A pulse rather than a spinner: the wait is on a dialog the browser is drawing, not on us, so the right signal is "this is live and listening", not "we are computing something". */ .at-here.is-busy { opacity: .72; cursor: progress; } .at-here.is-busy .duty-switch { animation: at-here-wait 1.1s ease-in-out infinite; } @keyframes at-here-wait { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .at-here.is-busy .duty-switch { animation: none; opacity: .6; } } /* ── The notification feed ───────────────────────────────────────────────── A bell in the top bar rather than a tab: it is a place you check, not a place you work, and both tab bars are already full. */ .bell { position: relative; } .bell-badge { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: var(--fs-badge); font-weight: var(--fw-figure); line-height: 17px; text-align: center; /* A ring in the bar's own colour, so the badge reads as sitting on the bell rather than smeared into whatever is behind it. */ box-shadow: 0 0 0 2px var(--bg); } .notif-list { display: flex; flex-direction: column; } .notif { display: flex; align-items: flex-start; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--border); } .notif:last-child { border-bottom: none; } .notif-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-strong); color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; } .notif-icon svg { width: 16px; height: 16px; } .notif.is-new .notif-icon { background: var(--gold-soft); color: var(--gold-deep); } .notif-main { flex: 1; min-width: 0; padding: 0; min-height: var(--tap); background: none; border: none; font-family: inherit; color: inherit; text-align: left; cursor: pointer; } .notif-title { display: block; font-size: var(--fs-body); font-weight: var(--fw-label); color: var(--text); } .notif.is-new .notif-title { font-weight: var(--fw-figure); } .notif-body { display: block; margin-top: 1px; font-size: var(--fs-meta); color: var(--text-dim); /* Wrapped, not truncated. A notification is one or two lines and the whole point of the feed is reading the one you missed. */ overflow-wrap: anywhere; } .notif-when { display: block; margin-top: 3px; font-size: var(--fs-caps); color: var(--text-faint); } .notif-x { flex: 0 0 auto; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-faint); cursor: pointer; border-radius: var(--radius-pill); } .notif-x:hover { color: var(--text); background: var(--surface-strong); } .notif-x svg { width: 14px; height: 14px; } /* ═══════════════════════════════════════════════════════════════════════════ THE LIVE CARD --------------------------------------------------------------------------- One dark surface for the one thing happening right now: a verified professional on their way to a client's door. It is the only element on these screens allowed to be loud, and everything around it is deliberately quiet so it reads as the live thing rather than another card in a stack. Why it exists. The account section was every-card-the-same: white rounded rectangles on light grey, so a job in progress carried the same weight as a link to the safety page. Worse, the ETA was already in the data and being computed — "About 18 min away" — but only rendered two taps deep on the detail screen. The number a client actually opens the page for was the one thing the page did not show them. Used on Home (the hero) and at the top of a booking's detail. ═══════════════════════════════════════════════════════════════════════════ */ .live { position: relative; display: block; width: 100%; text-align: left; font: inherit; color: var(--on-ink); background: var(--ink); background-image: radial-gradient(120% 80% at 100% 0%, rgba(240, 208, 96, 0.13) 0%, rgba(240, 208, 96, 0) 60%); border: 1px solid var(--ink-line); border-radius: var(--radius-xl); box-shadow: var(--shadow-ink); padding: var(--sp-card) var(--sp-card) calc(var(--sp-card) + 2px); margin-bottom: var(--sp-gap); cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }/* Status line: a live dot, the stage, and the tracking code sitting quietly at the far end where it is findable but not shouting. */ .live-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(240, 208, 96, 0.5); } 70% { box-shadow: 0 0 0 7px rgba(240, 208, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 208, 96, 0); } }/* The ETA is the hero. When there is no estimate yet the stage headline takes its place at the same size, so the card never collapses into a smaller, sadder version of itself while it waits for a number. */ .live-eta { font-size: var(--fs-live); font-weight: var(--fw-heading); letter-spacing: -.6px; line-height: 1.06; color: var(--on-ink); text-wrap: balance; }/* The professional, with a face. `photoUrl` was already on the API and the old card showed initials in a grey circle; on Bolt you see your driver. */ .live-pro { display: flex; align-items: center; gap: 11px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--ink-line); } .live-pro .avatar { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid rgba(240, 208, 96, 0.34); background: var(--ink-2); color: var(--gold-on-ink); }/* The journey, as four ticks rather than a seven-item bulleted list. The list belongs on the detail screen where there is room to explain each step; here it only has to answer "how far along is this". */ .live-rail { display: flex; gap: 4px; margin-top: 15px; }.live-tick.is-done { background: var(--gold-on-ink); } .live-tick.is-now { background: var(--gold-on-ink); animation: live-now 2s ease-in-out infinite; } @keyframes live-now { 0%, 100% { opacity: 1; } 50% { opacity: .42; } } .live-rail-label { display: flex; justify-content: space-between; font-size: var(--fs-tiny); color: var(--on-ink-faint); margin-top: 7px; }@media (prefers-reduced-motion: reduce) { .live-dot, .live-tick.is-now { animation: none; } } /* ── Quick actions ───────────────────────────────────────────────────────── Replaces a row of stat tiles that read "2 Bookings / 2 Saved addresses" — numbers nobody needs at a glance and, worse, nothing you could press. Three things a client actually wants to do, at a size that says so. */ .qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: var(--sp-gap); }/* ── Booking cards in the list ───────────────────────────────────────────── The old list card was a service name, a code, a date and a worker's name on a white rectangle — no photo, no ETA, no amount, and 60% of the screen left empty underneath. */ .bcard { display: block; /* .bcard-main is the row; the card is a stack */ position: relative; overflow: hidden; width: 100%; padding: 12px var(--sp-card); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text); font: inherit; text-align: left; cursor: pointer; margin-bottom: 8px; }.bcard .avatar { flex: 0 0 auto; width: 40px; height: 40px; } /* These are s inside a