/* --------------------------------------------------------------------------- B2B design tokens + component classes. Colour lives in SnappyTaxi.B2B.Wasm/Theme/B2BTheme.cs. MudThemeProvider emits that palette as --mud-palette-* on :root and re-emits it whenever IsDarkMode flips, so most tokens below are just aliases and switch for free - including inside dialogs and popovers, which render outside the layout element. The literals further down are surfaces MudBlazor has no slot for. They all carry a light value under [data-stx-theme="light"], which window.setStxTheme sets on - the tablet shares the desktop's picker, slots and buttons, so scoping any of them dark-only leaves dark ink on dark cells in light mode. --------------------------------------------------------------------------- */ :root { /* --- aliased to the MudBlazor palette: these flip with IsDarkMode --- */ --stx-bg: var(--mud-palette-background); --stx-surface: var(--mud-palette-surface); --stx-surface-2: var(--mud-palette-background-gray); --stx-surface-3: var(--mud-palette-drawer-background); --stx-accent: var(--mud-palette-primary); --stx-on-accent: var(--mud-palette-primary-text); --stx-accent-deep: var(--mud-palette-secondary); --stx-ink: var(--mud-palette-text-primary); --stx-ink-2: var(--mud-palette-tertiary); --stx-ink-3: var(--mud-palette-text-secondary); --stx-ink-4: var(--mud-palette-drawer-text); --stx-ink-5: var(--mud-palette-text-disabled); --stx-line: var(--mud-palette-lines-default); --stx-line-2: var(--mud-palette-lines-inputs); --stx-disabled-bg: var(--mud-palette-action-disabled-background); --stx-disabled-ink: var(--mud-palette-action-disabled); --stx-info: var(--mud-palette-info); --stx-danger: var(--mud-palette-error); --stx-muted: var(--mud-palette-drawer-icon); --stx-chip: var(--mud-palette-gray-default); --stx-dot-idle: var(--mud-palette-gray-light); /* --- literals: every one of these has a light value below --- */ --stx-accent-hover: #FFB04D; --stx-disabled-line: #2E2E2C; --stx-frame: #131313; --stx-rail: #161616; --stx-rail-line: #262624; --stx-map-bg: #1A1A18; --stx-cell: #242422; --stx-cell-line: #34342F; --stx-cell-past: #1A1A18; --stx-cell-past-line: #232321; --stx-cell-past-ink: #57544F; --stx-seg-inactive: #1E1E1C; --stx-seg-ink: #BFBCB7; --stx-slot-bg: #1E2430; --stx-slot-caption: #A8B0BD; --stx-row-surface: #FBFAF8; --stx-row-ink: #16150F; --stx-row-ink-2: #6B675F; --stx-on-accent-eyebrow: #5C3E00; --stx-rule: #3A3A36; --stx-rule-2: #4A4A45; /* --- geometry --- */ --stx-r-card: 20px; --stx-r-field: 14px; --stx-r-desktop: 10px; } /* The desktop is dark only, but the tablet shares its schedule picker, quick slots and CTAs - so every literal above needs a light value, not just the ones the tablet uniquely renders. Without this the light kiosk draws dark cells with dark ink on them. */ :root[data-stx-theme="light"] { --stx-accent-hover: #C25F00; --stx-disabled-line: #E3E0DA; --stx-frame: #F1EFEA; --stx-rail: #FBFAF8; --stx-rail-line: #E3E0DA; --stx-map-bg: #EFECE6; --stx-cell: #FFFFFF; --stx-cell-line: #DDD9D2; --stx-cell-past: #EFECE6; --stx-cell-past-line: #E7E4DE; --stx-cell-past-ink: #B4AFA6; --stx-seg-inactive: #F4F2EE; --stx-seg-ink: #6B675F; --stx-slot-bg: #FFF4E6; --stx-slot-caption: #78746C; --stx-row-surface: #FFFFFF; --stx-row-ink: #16150F; --stx-row-ink-2: #6B675F; --stx-rule: #E3E0DA; --stx-rule-2: #DDD9D2; } /* --------------------------------------------------------------------------- Kiosk touch hardening, moved out of the TabletComponent inline style block. --------------------------------------------------------------------------- */ html, body, #app, .mud-app { -webkit-user-select: none; /* Safari, Chrome, Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE / Edge */ user-select: none; /* Modern browsers */ -webkit-touch-callout: none; /* iOS long-press menu */ } input, textarea { user-select: text !important; } /* --------------------------------------------------------------------------- Shells --------------------------------------------------------------------------- */ .stx-card { display: flex; flex-direction: column; align-items: center; gap: 22px; box-sizing: border-box; height: 100%; width: 100%; padding: 32px 36px 36px; background-color: var(--stx-surface); } .stx-frame { display: flex; height: 100%; width: 100%; overflow: hidden; background: var(--stx-frame); } .stx-rail { display: flex; flex-direction: column; flex: none; width: 520px; min-height: 0; box-sizing: border-box; background: var(--stx-rail); border-right: 1px solid var(--stx-rail-line); } .stx-rail__section { display: flex; flex-direction: column; min-height: 0; } .stx-map { position: relative; display: flex; flex: 1; min-width: 0; background: var(--stx-map-bg); } .stx-map__canvas { flex: 1; min-width: 0; height: 100%; } /* The access-token fingerprint, top-left of every mockup frame. */ .stx-hash { position: absolute; top: 14px; left: 18px; z-index: 200; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--stx-muted); } /* The login card. Themed rather than hardcoded white: MudBlazor now runs the dark palette, so a white card would render white text on white. */ .stx-login-card { box-sizing: border-box; width: 600px; max-width: calc(100vw - 32px); background: var(--stx-surface); border: 1px solid var(--stx-line); border-radius: 16px; } /* --------------------------------------------------------------------------- Wordmark --------------------------------------------------------------------------- */ .stx-wordmark { font-weight: 800; letter-spacing: 0.01em; color: var(--stx-ink); text-transform: uppercase; line-height: 1.15; } .stx-wordmark__mark { color: var(--stx-accent); } .stx-wordmark__sub { margin-top: 6px; font-size: 17px; font-weight: 500; color: var(--stx-ink-3); } /* --------------------------------------------------------------------------- Fields. Boxed on the tablet, underlined on the desktop. --------------------------------------------------------------------------- */ .stx-field { box-sizing: border-box; width: 100%; display: flex; flex-direction: column; gap: 4px; } .stx-field--boxed { padding: 12px 18px 14px; background: var(--stx-surface-2); border: 1px solid var(--stx-line-2); border-radius: var(--stx-r-field); } .stx-field--boxed.stx-field--filled { background: var(--stx-surface-3); border-color: var(--stx-line); } .stx-field--boxed.stx-field--active { background: var(--stx-surface-3); border: 1.5px solid var(--stx-accent); padding: 11.5px 17.5px 13.5px; } .stx-field__label { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stx-ink-4); } .stx-field--active > .stx-field__label { color: var(--stx-accent); } .stx-field__row { display: flex; align-items: center; gap: 10px; min-width: 0; } .stx-field__input { flex: 1; min-width: 0; } /* Desktop variant: a rule under the value instead of a box. */ .stx-field--underline { gap: 6px; } .stx-field--underline > .stx-field__label { font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--stx-seg-ink); } .stx-field--underline > .stx-field__row { gap: 12px; padding-bottom: 2px; border-bottom: 2px solid var(--stx-rule-2); } .stx-field--underline.stx-field--active > .stx-field__row { border-bottom-color: var(--stx-accent); } .stx-field--underline.stx-field--active > .stx-field__label { color: var(--stx-seg-ink); } .stx-field__static { flex: 1; min-width: 0; font-size: 21px; font-weight: 600; color: var(--stx-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Leading dot on the destination row. */ .stx-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--stx-dot-idle); } .stx-dot--active { background: var(--stx-accent); } .stx-dot--lg { width: 14px; height: 14px; } .stx-dot--info { background: var(--stx-info); } .stx-dot--neutral { background: #C8C4BD; } /* Desktop dot rail beside the trip-details fields. */ .stx-railing { display: flex; flex: none; flex-direction: column; align-items: center; width: 14px; } .stx-railing__head { margin-top: 28px; } .stx-railing__line { width: 2px; flex: 1; background: var(--stx-rule); } .stx-railing__tail { width: 2px; height: 28px; background: var(--stx-rule); } /* --------------------------------------------------------------------------- MudBlazor input chrome, scoped to our fields only. This replaces the old unscoped `input, label { color: white !important }` in TabletComponent and DesktopComponent, which also restyled the login screen. --------------------------------------------------------------------------- */ .stx-field .mud-input-control, .stx-field .mud-input-control-input-container { margin: 0; } .stx-field .mud-input > input.mud-input-slot { padding: 0; color: var(--stx-ink); font-size: 24px; font-weight: 600; line-height: 1.3; } .stx-field .mud-input > input.mud-input-slot::placeholder { color: var(--stx-ink-5); font-weight: 500; opacity: 1; } .stx-field .mud-input.mud-input-underline::before, .stx-field .mud-input.mud-input-underline::after { display: none; } /* A static "+47" prefix, not a disabled adornment. */ .stx-field .mud-input-adornment-start { color: var(--stx-ink-3); font-size: 24px; font-weight: 600; margin-right: 10px; } .stx-field .mud-input-adornment .mud-icon-root { color: var(--stx-accent); } /* The autocomplete clear button becomes the round chip from the mockup. */ .stx-field .mud-input-adornment-end .mud-button-root { width: 44px; height: 44px; min-width: 44px; border-radius: 50%; background: var(--stx-chip); color: var(--stx-ink-3); } .stx-field--underline .mud-input > input.mud-input-slot { font-size: 21px; } /* --------------------------------------------------------------------------- Quick slots --------------------------------------------------------------------------- */ .stx-section-label { align-self: stretch; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stx-ink-3); } .stx-slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; } .stx-slot-row { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; } .stx-slot { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; font-family: inherit; text-align: left; cursor: pointer; background: var(--stx-surface-2); border: 1px solid var(--stx-line-2); border-radius: var(--stx-r-field); transition: border-color 120ms linear, background-color 120ms linear; } .stx-slot:hover { border-color: var(--stx-accent); } .stx-slot__name, .stx-slot__price { font-size: 23px; font-weight: 600; text-transform: uppercase; color: var(--stx-ink-2); } .stx-slot__price { font-weight: 700; } /* Desktop chip variant. */ .stx-slot--compact { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 18px; background: var(--stx-slot-bg); border: 1px solid var(--stx-accent); border-radius: 8px; } .stx-slot__caption { font-size: 13px; font-weight: 500; color: var(--stx-slot-caption); } .stx-slot__line { display: flex; align-items: baseline; gap: 20px; } .stx-slot--compact .stx-slot__name, .stx-slot--compact .stx-slot__price { font-size: 20px; font-weight: 700; color: #FFFFFF; } /* --------------------------------------------------------------------------- Calls to action --------------------------------------------------------------------------- */ .stx-cta { box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 78px; padding: 0 20px; font-family: inherit; font-size: 21px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; border-radius: var(--stx-r-field); border: 1.5px solid transparent; background: var(--stx-disabled-bg); color: var(--stx-disabled-ink); transition: background-color 200ms linear, color 200ms linear, border-color 200ms linear; } .stx-cta--primary:enabled { background: var(--stx-accent); border-color: var(--stx-accent); color: var(--stx-on-accent); } .stx-cta--ghost:enabled { background: transparent; border-color: var(--stx-accent); color: var(--stx-accent); } .stx-cta:disabled { cursor: default; background: var(--stx-disabled-bg); border-color: var(--stx-disabled-line); color: var(--stx-disabled-ink); } .stx-cta--primary:enabled:hover, .stx-cta--ghost:enabled:hover { background: var(--stx-accent-hover); border-color: var(--stx-accent-hover); color: var(--stx-on-accent); } /* Attract-mode pulse, applied only while the button is enabled so that the grey disabled state is actually reachable. The old .colorPulse repainted background-color on every cycle regardless of the disabled attribute. */ @keyframes stxPulse { 0% { background-color: var(--stx-accent); } 80% { background-color: var(--stx-accent); } 90% { background-color: var(--stx-accent-hover); } 100% { background-color: var(--stx-accent); } } .stx-cta--pulse:enabled { animation: stxPulse 5s infinite; } .stx-cta--pulse-delayed:enabled { animation: stxPulse 5s infinite 300ms; } /* Desktop sizing. */ .stx-cta--desktop { height: 62px; border-radius: var(--stx-r-desktop); font-size: 18px; letter-spacing: 0.08em; justify-content: space-between; } .stx-cta--stacked { flex-direction: column; justify-content: center; gap: 2px; height: 76px; } .stx-cta__eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; color: var(--stx-on-accent-eyebrow); } .stx-cta__value { font-size: 22px; font-weight: 700; letter-spacing: normal; color: var(--stx-on-accent); } .stx-helper { width: 100%; text-align: center; font-size: 15px; font-weight: 500; color: var(--stx-ink-3); } .stx-helper--start { text-align: left; font-size: 14px; } /* --------------------------------------------------------------------------- Splash / attract screen --------------------------------------------------------------------------- */ .stx-splash { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; width: 100%; } .stx-splash__title { font-size: 40px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--stx-ink); } .stx-splash__sub { margin-top: 6px; font-size: 22px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--stx-ink-3); } .stx-splash-circle { display: flex; align-items: center; justify-content: center; width: 212px; height: 212px; margin-top: 70px; padding: 0; cursor: pointer; border: none; border-radius: 50%; background: var(--stx-accent); box-shadow: 0 18px 50px rgb(255 149 0 / 22%); animation: stxPulse 5s infinite; } /* The play triangle from the mockup, as a CSS triangle. */ .stx-splash-circle__glyph { width: 0; height: 0; margin-left: 14px; border-left: 58px solid var(--stx-on-accent); border-top: 38px solid transparent; border-bottom: 38px solid transparent; } .stx-splash__hint { margin-top: 34px; font-size: 17px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stx-ink-3); } /* --------------------------------------------------------------------------- Schedule picker --------------------------------------------------------------------------- */ .stx-picker { display: flex; flex: 1; flex-direction: column; min-height: 0; width: 100%; gap: 4px; } .stx-seg { display: flex; flex: none; width: 100%; overflow: hidden; border: 1px solid var(--stx-rule); border-radius: var(--stx-r-desktop); } .stx-seg__btn { flex: 1; height: 52px; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border: none; background: var(--stx-seg-inactive); color: var(--stx-seg-ink); transition: background-color 160ms linear, color 160ms linear; } .stx-seg__btn--active { background: var(--stx-accent); color: var(--stx-on-accent); font-weight: 700; } .stx-seg--lg .stx-seg__btn { height: 80px; font-size: 24px; } .stx-time { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex: none; padding: 14px 0; } .stx-time__part { font-size: 52px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; color: var(--stx-ink); background: none; border: none; font-family: inherit; padding: 0; } .stx-time__part--active { color: var(--stx-accent); } .stx-time__sep { font-size: 44px; font-weight: 600; color: var(--stx-ink-3); } .stx-time--lg .stx-time__part { font-size: 80px; } .stx-time--lg .stx-time__sep { font-size: 70px; } .stx-cell-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: none; width: 100%; } .stx-cell-grid--minutes { grid-template-columns: repeat(3, 1fr); } .stx-cell { display: flex; align-items: center; justify-content: center; height: 44px; font-family: inherit; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; border-radius: 8px; background: var(--stx-cell); border: 1px solid var(--stx-cell-line); color: var(--stx-ink-2); transition: background-color 120ms linear; } .stx-cell:disabled { cursor: default; background: var(--stx-cell-past); border-color: var(--stx-cell-past-line); color: var(--stx-cell-past-ink); } .stx-cell--selected, .stx-cell--selected:disabled { background: var(--stx-accent); border-color: var(--stx-accent); color: var(--stx-on-accent); font-weight: 700; } .stx-cell-grid--lg .stx-cell { height: 64px; font-size: 22px; } /* --------------------------------------------------------------------------- Desktop: passenger chip and active-bookings overlay --------------------------------------------------------------------------- */ .stx-chip { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--stx-r-desktop); background: var(--stx-cell); border: 1px solid var(--stx-cell-line); font-size: 16px; font-weight: 600; color: var(--stx-ink-2); } .stx-chip__ring { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #C8C4BD; } .stx-trips { position: absolute; top: 40px; right: 40px; bottom: 40px; z-index: 50; width: 400px; box-sizing: border-box; display: flex; flex-direction: column; padding: 16px; border-radius: 14px; background: rgb(11 11 11 / 72%); backdrop-filter: blur(6px); border: 1px solid var(--stx-rail-line); } .stx-trips__head { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 6px 14px; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; color: var(--stx-ink-3); } .stx-trips__count { letter-spacing: normal; color: var(--stx-accent); } .stx-trips__list { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .stx-trips__hint { padding: 18px 6px 4px; font-size: 13px; font-weight: 500; color: #7A766F; } .stx-trip-row { display: flex; overflow: hidden; border-radius: var(--stx-r-desktop); border: 1px solid var(--stx-rule); } .stx-trip-row__body { flex: 1; min-width: 0; box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 12px 16px; background: var(--stx-row-surface); } .stx-trip-row__cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .stx-trip-row__label { font-size: 13px; font-weight: 600; color: var(--stx-row-ink-2); } .stx-trip-row__value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--stx-row-ink); overflow: hidden; text-overflow: ellipsis; } .stx-trip-row__value--time { color: var(--stx-accent-deep); } .stx-trip-row__value--struck { text-decoration: line-through; } .stx-trip-row__value--cancelled { color: var(--stx-danger); } .stx-trip-row__next-day { font-size: 14px; color: var(--stx-row-ink-2); } /* The bin rail widens on hover instead of sliding in from outside the row. */ .stx-bin { flex: none; width: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; border: none; padding: 0; background: var(--stx-danger); transition: width 0.16s ease; } .stx-trip-row:hover .stx-bin { width: 56px; } .stx-bin:hover { background: #8C1818; } /* --------------------------------------------------------------------------- Booking confirmation --------------------------------------------------------------------------- */ .stx-confirm { display: flex; flex-direction: column; gap: 10px; padding: 44px 48px; } .stx-confirm__eyebrow { font-size: 15px; font-weight: 600; letter-spacing: 0.12em; color: #8C887F; } .stx-confirm__title { font-size: 34px; font-weight: 700; color: #16150F; } .stx-confirm__ref { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; } .stx-confirm__ref-label { font-size: 26px; font-weight: 600; color: #4A463E; } .stx-confirm__ref-value { font-size: 38px; font-weight: 800; letter-spacing: 0.01em; color: #C25F00; } .stx-confirm__rule { height: 1px; margin: 16px 0 4px; background: #E3E0DA; } .stx-confirm__facts { display: flex; gap: 44px; } .stx-confirm__fact { display: flex; flex-direction: column; gap: 2px; } .stx-confirm__fact-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: #8C887F; } .stx-confirm__fact-value { font-size: 21px; font-weight: 700; color: #16150F; }