/* ============================================================================ Wassalni Design System — ds.css A hand-rolled Material Design 3 (M3) inspired token + component layer shared by every web PWA (client / delivery / admin / merchant / auth / public). How it works ------------ • Tokens live in :root (dark = default) and [data-theme="light"] overrides. • Per-app identity (accent + font) is set by [data-app="..."] on . • A legacy alias block maps the old per-page variable names (--bg, --accent, --text, --r, ...) onto the new system tokens, so existing page CSS keeps working unchanged. When a page deletes its local :root, it inherits all of this instantly — and gains light mode for free. • Components are restyled onto the SAME class names the pages already emit, so JS-generated markup keeps rendering. Edit values here, not in the pages. RTL-safe: logical properties only. ========================================================================== */ /* ============================================================================ 1. TOKENS — dark theme (default) ========================================================================== */ :root { color-scheme: dark; /* ---- Brand / primary (overridden per app in §3) ---- */ --primary: #FF6B35; --primary2: #FF8C5A; --on-primary: #1A0E06; --primary-container: color-mix(in srgb, var(--primary) 26%, #0F1E36); --on-primary-container: color-mix(in srgb, var(--primary) 84%, #FFFFFF); --primary-soft: color-mix(in srgb, var(--primary) 14%, transparent); --primary-grad: linear-gradient(135deg, var(--primary), var(--primary2)); /* ---- Neutral surfaces (M3 elevation ramp) ---- */ --surface: #0A1422; --surface-1: #0F1B2E; --surface-2: #14223A; --surface-3: #192A47; --surface-4: #1E3253; --surface-5: #233A60; --surface-variant: #18253D; --surface-glass: color-mix(in srgb, var(--surface-1) 78%, transparent); /* ---- Content colors ---- */ --on-surface: #EAF0FB; --on-surface-strong: #FFFFFF; --on-surface-variant: #97A7C4; --on-surface-dim: #64759A; --outline: #36456180; --outline-strong: #45567A; --outline-variant: #FFFFFF12; /* ---- Semantic colors (text + container per theme) ---- */ --success: #00D08C; --on-success: #00251A; --success-text: #1FE0A0; --success-container: color-mix(in srgb, #00D08C 16%, transparent); --warning: #FFB838; --on-warning: #2A1C00; --warning-text: #FFC65C; --warning-container: color-mix(in srgb, #FFB838 16%, transparent); --error: #FF5470; --on-error: #3A0010; --error-text: #FF7A90; --error-container: color-mix(in srgb, #FF5470 16%, transparent); --info: #3B9EFF; --on-info: #002648; --info-text: #6BB6FF; --info-container: color-mix(in srgb, #3B9EFF 16%, transparent); --accent-blue: #6BA8FF; /* "accepted / picked_up" hue used by client */ /* ---- Elevation (shadow tokens) ---- */ --e0: none; --e1: 0 1px 2px rgba(0,0,0,.40), 0 0 0 1px var(--outline-variant); --e2: 0 2px 8px rgba(0,0,0,.42), 0 0 0 1px var(--outline-variant); --e3: 0 10px 28px rgba(2,6,16,.50), 0 0 0 1px var(--outline-variant); --e4: 0 18px 44px rgba(2,6,16,.58), 0 0 0 1px var(--outline-variant); --e5: 0 28px 64px rgba(2,6,16,.66), 0 0 0 1px var(--outline-variant); --shadow-primary: 0 8px 24px -6px color-mix(in srgb, var(--primary) 55%, transparent); /* ---- Spacing (4 / 8 pt) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ---- Radius ---- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-full: 999px; --r: 16px; /* legacy alias default */ --r-btn: 14px; /* ---- Typography ---- */ --font: 'Tajawal', system-ui, 'Segoe UI', sans-serif; /* overridden per app */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800; --fs-display: clamp(2rem, 6vw, 2.6rem); --fs-headline: clamp(1.5rem, 4.5vw, 2rem); --fs-title-l: 1.375rem; --fs-title: 1.125rem; --fs-body-l: 1rem; --fs-body: .9375rem; --fs-label: .8125rem; --fs-label-s: .6875rem; /* ---- Motion ---- */ --dur-1: 110ms; --dur-2: 180ms; --dur-3: 260ms; --dur-4: 380ms; --dur-5: 520ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-emphasized: cubic-bezier(.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0, 1); --ease-accelerate: cubic-bezier(.3, 0, 1, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* ---- Focus ---- */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 55%, transparent); /* ---- Layering (stay below the Telegram FAB at 9999 / i18n toggle at 10000) ---- */ --z-sticky: 50; --z-nav: 60; --z-fab: 70; --z-overlay: 800; --z-sheet: 820; --z-snackbar: 900; /* ---- Layout ---- */ --container: 1100px; --container-wide: 1280px; } /* ============================================================================ 2. TOKENS — light theme ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --on-primary: #FFFFFF; --primary-container: color-mix(in srgb, var(--primary) 16%, #FFFFFF); --on-primary-container: color-mix(in srgb, var(--primary) 78%, #1B1B1F); --primary-soft: color-mix(in srgb, var(--primary) 12%, transparent); --surface: #F3F6FC; --surface-1: #FFFFFF; --surface-2: #EEF2FA; --surface-3: #E6ECF6; --surface-4: #DEE6F2; --surface-5: #D6E0EF; --surface-variant: #EBF0F8; --surface-glass: color-mix(in srgb, #FFFFFF 72%, transparent); --on-surface: #111B2E; --on-surface-strong: #060C18; --on-surface-variant: #4F5F7A; --on-surface-dim: #8493AC; --outline: #C4CEDE; --outline-strong: #AEBACD; --outline-variant: #11203510; --on-success: #FFFFFF; --success-text: #067A55; --success-container: color-mix(in srgb, #00A876 14%, transparent); --on-warning: #2A1C00; --warning-text: #8A5A00; --warning-container: color-mix(in srgb, #E59700 18%, transparent); --on-error: #FFFFFF; --error-text: #C81F3D; --error-container: color-mix(in srgb, #FF5470 13%, transparent); --on-info: #FFFFFF; --info-text: #1366C9; --info-container: color-mix(in srgb, #3B9EFF 14%, transparent); --accent-blue: #2F74D9; --e1: 0 1px 2px rgba(17,27,46,.08), 0 0 0 1px var(--outline-variant); --e2: 0 2px 8px rgba(17,27,46,.10), 0 0 0 1px var(--outline-variant); --e3: 0 10px 28px rgba(17,27,46,.12), 0 0 0 1px var(--outline-variant); --e4: 0 18px 44px rgba(17,27,46,.15), 0 0 0 1px var(--outline-variant); --e5: 0 28px 64px rgba(17,27,46,.18), 0 0 0 1px var(--outline-variant); } /* ============================================================================ 3. PER-APP IDENTITY — accent + font (one design language, distinct identities) ========================================================================== */ :root[data-app="client"], :root[data-app="merchant"] { --font: 'Tajawal', system-ui, sans-serif; } :root[data-app="delivery"] { --font: 'Cairo', system-ui, sans-serif; } :root[data-app="admin"], :root[data-app="auth"] { --font: 'IBM Plex Sans Arabic', system-ui, sans-serif; } /* Client / merchant keep the warm orange (the :root default). */ :root[data-app="delivery"] { --primary: #00E27A; --primary2: #2BF59A; --on-primary: #00210F; } :root[data-app="admin"] { --primary: #8B5CF6; --primary2: #A98BFF; --on-primary: #1B0640; } :root[data-app="auth"] { --primary: #FF6B35; --primary2: #FF8C5A; --on-primary: #1A0E06; } /* Delivery green needs darker on-primary text in light mode for AA. */ :root[data-theme="light"][data-app="delivery"] { --on-primary: #00210F; } :root[data-theme="light"][data-app="admin"] { --on-primary: #FFFFFF; } /* ============================================================================ 4. LEGACY ALIASES — keep existing page CSS alive after its :root is deleted ========================================================================== */ :root { --bg: var(--surface); --bg2: var(--surface-1); --bg3: var(--surface-2); --bg4: var(--surface-3); --text: var(--on-surface); --text2: var(--on-surface-variant); --text3: var(--on-surface-dim); --card: color-mix(in srgb, var(--on-surface) 4%, transparent); --border: var(--outline-variant); --grid: var(--outline-variant); --accent: var(--primary); --accent2: var(--primary2); --accent-dim: var(--primary-soft); --warn: var(--warning); --danger: var(--error); /* public/marketing/docs pages reuse these bespoke names — map them too */ --code-bg: var(--surface-2); --accent3: var(--on-primary-container); --border2: color-mix(in srgb, var(--primary) 30%, var(--outline-variant)); --dim: var(--primary-soft); --dim2: color-mix(in srgb, var(--primary) 6%, transparent); } /* ============================================================================ 5. RESET + BASE ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--surface); color: var(--on-surface); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur-3) var(--ease-standard), color var(--dur-3) var(--ease-standard); } /* Premium ambient backdrop — soft brand glow, theme-aware, no layout impact. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%), radial-gradient(50% 40% at 0% 100%, color-mix(in srgb, var(--primary2) 9%, transparent), transparent 70%); } ::selection { background: color-mix(in srgb, var(--primary) 40%, transparent); color: var(--on-surface-strong); } /* Modern scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--outline-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--outline-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--on-surface-dim); background-clip: content-box; } a { color: var(--primary); text-decoration: none; } img { max-width: 100%; } /* ============================================================================ 6. LAYOUT HELPERS ========================================================================== */ .wds-container, .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-4); } @media (min-width: 1440px) { .wds-container, .container { max-width: var(--container-wide); } } .wds-stack { display: flex; flex-direction: column; gap: var(--sp-3); } .wds-row { display: flex; align-items: center; gap: var(--sp-3); } .wds-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* ============================================================================ 7. TYPOGRAPHY HELPERS ========================================================================== */ .t-display { font-size: var(--fs-display); font-weight: var(--w-black); line-height: 1.12; letter-spacing: -.02em; } .t-headline { font-size: var(--fs-headline); font-weight: var(--w-black); line-height: 1.18; letter-spacing: -.01em; } .t-title { font-size: var(--fs-title); font-weight: var(--w-bold); line-height: 1.3; } .t-body { font-size: var(--fs-body); font-weight: var(--w-regular); line-height: 1.6; color: var(--on-surface-variant); } .t-label { font-size: var(--fs-label); font-weight: var(--w-semibold); letter-spacing: .01em; } .t-dim { color: var(--on-surface-variant); } /* ============================================================================ 8. BUTTONS (restyle of .btn / .btn-primary / .btn-outline / .btn-ghost ...) ========================================================================== */ .btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 48px; padding: 12px 22px; border: none; border-radius: var(--r-btn); font-family: var(--font); font-size: var(--fs-body-l); font-weight: var(--w-bold); line-height: 1; color: var(--on-primary); background: var(--primary); cursor: pointer; user-select: none; text-align: center; white-space: nowrap; transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), opacity var(--dur-2) var(--ease-standard); } /* M3 state layer */ .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity var(--dur-1) var(--ease-standard); } .btn:hover::after { opacity: .08; } .btn:active::after { opacity: .14; } .btn:active { transform: translateY(1px) scale(.99); } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } .btn:disabled::after { opacity: 0; } .btn-primary { background: var(--primary-grad); color: var(--on-primary); box-shadow: var(--shadow-primary); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -6px color-mix(in srgb, var(--primary) 60%, transparent); } .btn-primary:active { transform: translateY(0) scale(.99); } .btn-outline { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 60%, var(--outline-strong)); } .btn-ghost { background: var(--primary-container); color: var(--on-primary-container); } /* tonal */ .btn-text { background: transparent; color: var(--primary); min-height: 40px; box-shadow: none; } .btn-danger { background: var(--error); color: var(--on-error); } .btn-success { background: var(--success); color: var(--on-success); } .btn-neutral { background: var(--surface-3); color: var(--on-surface); } .btn-warning { background: var(--warning); color: var(--on-warning); } /* delivery accept/refoffer actions (used in static + JS-generated markup) */ .btn-accept { background: var(--primary-grad); color: var(--on-primary); box-shadow: var(--shadow-primary); } .btn-refuse { background: transparent; color: var(--error-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--error) 50%, var(--outline-strong)); } .btn-sm { width: auto; min-height: 38px; padding: 8px 16px; font-size: var(--fs-label); border-radius: var(--r-sm); } .btn-lg { min-height: 56px; font-size: 1.0625rem; border-radius: var(--r-md); } .btn-pill { border-radius: var(--r-full); } .btn-block { width: 100%; } .btn-icon { width: 44px; min-height: 44px; padding: 0; border-radius: var(--r-full); } /* ============================================================================ 9. FAB / Extended FAB (net-new — sits below Telegram FAB z=9999) ========================================================================== */ .fab { position: fixed; inset-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom)); inset-inline-end: var(--sp-5); z-index: var(--z-fab); width: 58px; height: 58px; border: none; border-radius: var(--r-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--primary-grad); color: var(--on-primary); font-size: 1.5rem; box-shadow: var(--e3), var(--shadow-primary); cursor: pointer; transition: transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-standard); } .fab:hover { transform: translateY(-2px) scale(1.04); } .fab:active { transform: scale(.96); } .fab-extended { width: auto; height: 56px; padding-inline: var(--sp-5); gap: var(--sp-2); font-size: var(--fs-body-l); font-weight: var(--w-bold); border-radius: var(--r-full); } /* ============================================================================ 10. CARDS (restyle of .card / .order-card / .auth-card / .kpi) ========================================================================== */ .card, .order-card, .auth-card, .kpi { background: var(--surface-1); border: 1px solid var(--outline-variant); border-radius: var(--r-lg); box-shadow: var(--e1); } .card { padding: var(--sp-4); } .kpi { padding: var(--sp-4); } .order-card { padding: var(--sp-4); transition: transform var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); cursor: pointer; } .order-card:hover { transform: translateY(-2px); box-shadow: var(--e3); border-color: color-mix(in srgb, var(--primary) 45%, var(--outline-variant)); } .order-card:active { transform: translateY(0); } .auth-card { padding: clamp(24px, 5vw, 32px); box-shadow: var(--e4); border-radius: var(--r-xl); } .card-elevated { box-shadow: var(--e3); border-color: transparent; } .card-flat { box-shadow: none; background: var(--surface-2); } /* ============================================================================ 11. FIELDS / INPUTS (restyle of .field, inputs, selects, textareas) ========================================================================== */ .field { margin-bottom: var(--sp-4); } .field label { display: block; font-size: var(--fs-label); font-weight: var(--w-semibold); color: var(--on-surface-variant); margin-bottom: var(--sp-2); } .field input, .field select, .field textarea, input[type="text"], input[type="tel"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="search"], select, textarea { width: 100%; padding: 13px 15px; min-height: 48px; background: var(--surface-2); border: 1.5px solid var(--outline-variant); border-radius: var(--r-sm); color: var(--on-surface); font-family: var(--font); font-size: var(--fs-body-l); outline: none; transition: border-color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); } textarea { min-height: 96px; resize: vertical; line-height: 1.5; } .field input::placeholder, textarea::placeholder { color: var(--on-surface-dim); } .field input:focus, .field select:focus, .field textarea:focus, input:focus, select:focus, textarea:focus { border-color: var(--primary); background: var(--surface-1); box-shadow: 0 0 0 4px var(--primary-soft); } .field select option, select option { background: var(--surface-2); color: var(--on-surface); } /* ============================================================================ 12. SEGMENTED / TABS (restyle of .tab-row / .tab-btn / .tab-btn.active) ========================================================================== */ .tab-row { display: flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--surface-2); border: 1px solid var(--outline-variant); border-radius: var(--r-md); margin-bottom: var(--sp-5); } .tab-btn { flex: 1; min-height: 42px; padding: 10px 14px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--on-surface-variant); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-semibold); cursor: pointer; transition: color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard); } .tab-btn:hover { color: var(--on-surface); } .tab-btn.active { background: var(--surface-1); color: var(--primary); font-weight: var(--w-bold); box-shadow: var(--e1); } /* Filled-accent variant (auth uses solid accent on active) */ .tab-row.accent .tab-btn.active { background: var(--primary-grad); color: var(--on-primary); } /* ============================================================================ 13. CHIPS ========================================================================== */ .chip, .loc-type-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--outline-variant); border-radius: var(--r-full); background: var(--surface-2); color: var(--on-surface-variant); font-family: var(--font); font-size: var(--fs-label); font-weight: var(--w-semibold); cursor: pointer; user-select: none; transition: all var(--dur-2) var(--ease-standard); } .chip:hover, .loc-type-btn:hover { border-color: var(--outline-strong); color: var(--on-surface); } .chip.active, .chip[aria-selected="true"], .loc-type-btn.active { border-color: color-mix(in srgb, var(--primary) 50%, transparent); background: var(--primary-soft); color: var(--primary); font-weight: var(--w-bold); } /* ============================================================================ 14. BOTTOM NAV + DESKTOP SIDE-RAIL (restyle of .bottom-nav / .nav-item) ========================================================================== */ .bottom-nav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-nav); display: flex; align-items: stretch; justify-content: space-around; padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--surface-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--outline-variant); } .nav-item { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: transparent; cursor: pointer; color: var(--on-surface-variant); font-family: var(--font); font-size: var(--fs-label-s); font-weight: var(--w-semibold); transition: color var(--dur-2) var(--ease-standard); } .nav-item .icon { font-size: 1.35rem; line-height: 1; position: relative; transition: transform var(--dur-2) var(--ease-spring); } .nav-item.active { color: var(--primary); } .nav-item.active .icon { transform: translateY(-1px); } /* M3 active indicator pill behind the icon */ .nav-item .icon::before { content: ""; position: absolute; inset: -7px -16px; z-index: -1; border-radius: var(--r-full); background: var(--primary-soft); transform: scale(.4); opacity: 0; transition: transform var(--dur-3) var(--ease-spring), opacity var(--dur-2) var(--ease-standard); } .nav-item.active .icon::before { transform: scale(1); opacity: 1; } @media (min-width: 1024px) { .bottom-nav.rail-desktop { inset-block: 0; inset-inline-end: auto; inset-inline-start: 0; flex-direction: column; justify-content: flex-start; gap: var(--sp-2); width: 96px; padding: var(--sp-5) var(--sp-2); border-top: none; border-inline-end: 1px solid var(--outline-variant); } } /* ============================================================================ 15. OVERLAY + DIALOG + BOTTOM SHEET (restyle of .modal-overlay / .modal) ========================================================================== */ .modal-overlay, .overlay { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; align-items: center; justify-content: center; padding: var(--sp-4); background: color-mix(in srgb, #00060F 62%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: wds-fade var(--dur-3) var(--ease-standard); } .modal-overlay.show, .modal-overlay.active, .modal-overlay.open, .overlay.show { display: flex; } .modal, .dialog { width: 100%; max-width: 440px; background: var(--surface-1); border: 1px solid var(--outline-variant); border-radius: var(--r-xl); box-shadow: var(--e5); padding: var(--sp-6); animation: wds-scale-in var(--dur-3) var(--ease-emphasized); } /* Bottom-sheet variant (admin uses .modal with a grabber handle) */ .modal.sheet, .sheet, .modal.bottom { position: fixed; inset-inline: 0; inset-block-end: 0; max-width: 100%; max-height: 88vh; overflow-y: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); animation: wds-slide-up var(--dur-4) var(--ease-emphasized); } .modal-handle, .sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--outline-strong); margin: 0 auto var(--sp-4); flex-shrink: 0; } /* ============================================================================ 16. SNACKBAR / TOAST (restyle of .toast / .toast.show — keep class contract) ========================================================================== */ .toast, .snackbar { position: fixed; z-index: var(--z-snackbar); inset-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom)); inset-inline: var(--sp-4); margin-inline: auto; width: max-content; max-width: min(92vw, 460px); display: flex; align-items: center; gap: var(--sp-3); padding: 14px 18px; border-radius: var(--r-md); background: var(--surface-5); color: var(--on-surface-strong); border: 1px solid var(--outline-variant); box-shadow: var(--e4); font-family: var(--font); font-size: var(--fs-body); font-weight: var(--w-semibold); opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; transition: opacity var(--dur-3) var(--ease-decelerate), transform var(--dur-3) var(--ease-spring); } .toast.show, .snackbar.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .toast::before, .snackbar::before { content: ""; flex-shrink: 0; width: 4px; align-self: stretch; border-radius: 999px; background: var(--primary); } .toast.success::before, .snackbar.success::before { background: var(--success); } .toast.error::before, .snackbar.error::before { background: var(--error); } .toast.warning::before, .snackbar.warning::before { background: var(--warning); } .toast.info::before, .snackbar.info::before { background: var(--info); } /* ============================================================================ 17. SEARCH BAR (restyle of .map-search-wrap / .map-search-results) ========================================================================== */ .map-search-wrap { position: relative; margin-bottom: var(--sp-2); } .map-search-wrap input { width: 100%; min-height: 46px; padding: 11px 42px 11px 14px; background: var(--surface-2); border: 1.5px solid var(--outline-variant); border-radius: var(--r-full); color: var(--on-surface); font-family: var(--font); font-size: var(--fs-body); outline: none; transition: border-color var(--dur-2) var(--ease-standard), box-shadow var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard); } .map-search-wrap input:focus { border-color: var(--primary); background: var(--surface-1); box-shadow: 0 0 0 4px var(--primary-soft); } .map-search-wrap .ms-clear { display: none; position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); background: none; border: none; color: var(--on-surface-dim); cursor: pointer; font-size: 1.1rem; line-height: 1; } .map-search-results { background: var(--surface-1); border: 1px solid var(--outline-variant); border-radius: var(--r-md); margin-top: var(--sp-1); overflow: hidden; box-shadow: var(--e3); display: none; } .map-search-results button { display: block; width: 100%; text-align: start; padding: 12px 14px; background: none; border: none; border-bottom: 1px solid var(--outline-variant); color: var(--on-surface); font-family: var(--font); font-size: var(--fs-label); cursor: pointer; line-height: 1.45; transition: background var(--dur-1) var(--ease-standard); } .map-search-results button:last-child { border-bottom: none; } .map-search-results button:hover { background: var(--surface-2); } /* ============================================================================ 18. LIST ITEMS (restyle of .loc-item / .modal-row) ========================================================================== */ .loc-item, .modal-row, .list-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); min-height: 56px; background: var(--surface-1); border: 1px solid var(--outline-variant); border-radius: var(--r-md); transition: background var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); } .modal-row { cursor: pointer; } .modal-row:hover, .list-row:hover { background: var(--surface-2); border-color: var(--outline-strong); } /* ============================================================================ 19. AVATARS (restyle of .avatar) ========================================================================== */ .avatar { width: 40px; height: 40px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--primary-grad); color: var(--on-primary); font-weight: var(--w-bold); font-size: .9rem; overflow: hidden; box-shadow: var(--e1); } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================================ 20. STATUS BADGES — both schemes: client .status-* and delivery .s-* ========================================================================== */ .status-badge, .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-full); font-size: var(--fs-label-s); font-weight: var(--w-bold); line-height: 1.4; white-space: nowrap; } .status-badge::before, .badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* client scheme */ .status-pending { background: var(--warning-container); color: var(--warning-text); } .status-negotiating{ background: var(--info-container); color: var(--info-text); } .status-accepted, .status-picked_up { background: var(--info-container); color: var(--accent-blue); } .status-in_transit { background: var(--primary-soft); color: var(--primary); } .status-delivered { background: var(--success-container); color: var(--success-text); } .status-cancelled { background: var(--error-container); color: var(--error-text); } /* delivery scheme (.s-) */ .s-pending { background: var(--warning-container); color: var(--warning-text); } .s-negotiating { background: var(--info-container); color: var(--info-text); } .s-accepted, .s-picked_up { background: var(--info-container); color: var(--accent-blue); } .s-in_transit { background: var(--primary-soft); color: var(--primary); } .s-delivered { background: var(--success-container); color: var(--success-text); } .s-cancelled { background: var(--error-container); color: var(--error-text); } /* ============================================================================ 21. SKELETON + PROGRESS + SPINNER ========================================================================== */ .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--r-sm); min-height: 14px; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--on-surface) 8%, transparent), transparent); transform: translateX(-100%); animation: wds-shimmer 1.4s ease-in-out infinite; } .skeleton-text { height: 12px; margin-bottom: 8px; } .skeleton-card { height: 96px; border-radius: var(--r-lg); } .progress-linear { height: 4px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .progress-linear::before { content: ""; display: block; height: 100%; width: 40%; border-radius: inherit; background: var(--primary-grad); animation: wds-indeterminate 1.3s var(--ease-standard) infinite; } .spinner { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--primary-soft); border-top-color: var(--primary); animation: wds-spin .7s linear infinite; } /* ============================================================================ 22. EMPTY / ERROR / SUCCESS STATES (restyle of .empty-state / .empty) ========================================================================== */ .empty-state, .empty { text-align: center; padding: var(--sp-12) var(--sp-5); color: var(--on-surface-variant); } .empty-state .icon, .empty .icon { font-size: 3.25rem; display: block; margin-bottom: var(--sp-3); opacity: .9; } .empty-state .icon { filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--primary) 25%, transparent)); } /* ============================================================================ 23. THEME TOGGLE (wired by ds.js via [data-wds-theme-toggle]) ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid var(--outline-variant); border-radius: var(--r-full); background: var(--surface-2); color: var(--on-surface-variant); font-size: 1.15rem; cursor: pointer; line-height: 1; transition: color var(--dur-2) var(--ease-standard), background var(--dur-2) var(--ease-standard), transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2) var(--ease-standard); } .theme-toggle:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--outline-variant)); } .theme-toggle:active { transform: rotate(40deg) scale(.92); } /* Floating variant for pages without a header (e.g. login) */ .theme-toggle.floating { position: fixed; z-index: var(--z-fab); inset-block-start: calc(var(--sp-4) + env(safe-area-inset-top)); inset-inline-end: var(--sp-4); background: var(--surface-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--e2); } /* ============================================================================ 24. TABLES — never cause page-level horizontal scroll ========================================================================== */ .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); } .table-scroll table { min-width: 480px; } table th { color: var(--on-surface-variant); font-weight: var(--w-bold); } table th, table td { border-color: var(--outline-variant); } /* Optional card-on-mobile pattern (needs td[data-label]) — opt in via .table-cards */ @media (max-width: 640px) { .table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .table-cards tr { display: block; margin-bottom: var(--sp-3); background: var(--surface-1); border: 1px solid var(--outline-variant); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); } .table-cards td { display: flex; justify-content: space-between; gap: var(--sp-3); border: none !important; padding: 8px 0; } .table-cards td::before { content: attr(data-label); color: var(--on-surface-variant); font-weight: var(--w-semibold); } } /* ============================================================================ 25. MAPS (Leaflet) + misc third-party theming ========================================================================== */ .leaflet-container { border-radius: var(--r-md); font-family: var(--font) !important; background: var(--surface-2) !important; } :root[data-theme="dark"] .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.9); } :root[data-theme="dark"] .leaflet-control, :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip, :root[data-theme="dark"] .leaflet-marker-icon { filter: none; } .leaflet-bar a { background: var(--surface-1) !important; color: var(--on-surface) !important; border-color: var(--outline-variant) !important; } /* ============================================================================ 26. KEYFRAMES ========================================================================== */ @keyframes wds-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes wds-scale-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes wds-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes wds-spin { to { transform: rotate(360deg); } } @keyframes wds-shimmer { 100% { transform: translateX(100%); } } @keyframes wds-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* Reusable entrance utilities */ .wds-fade-in { animation: wds-fade var(--dur-3) var(--ease-standard) both; } .wds-rise { animation: wds-scale-in var(--dur-4) var(--ease-emphasized) both; } /* ============================================================================ 27. ACCESSIBILITY — focus, reduced motion, helpers ========================================================================== */ :where(a, button, input, select, textarea, [tabindex], .btn, .chip, .nav-item, .tab-btn, .theme-toggle, .order-card, .modal-row):focus-visible { outline: none; box-shadow: var(--focus-ring); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }