/* Shoofly — "Workshop" design system Cool machined-steel canvas · high-vis safety orange as the single bold accent · green reserved strictly for WhatsApp actions · tight radii (tool, not brochure) Display: Sora (AR: Noto Sans Arabic 800) · Body: Inter/Noto Sans Arabic · Data: IBM Plex Mono Brand signatures: live WhatsApp-chat hero mockup + caution-stripe job card Colour rule, so this doesn't drift again: --orange fills, borders, graphics. Put --ink on it (5.10:1), never white (3.50:1). --orange-ink any orange TEXT on a light background (5.04:1). --wa WhatsApp actions only, with --ink on it (8.99:1). Every grey/accent pair in :root was contrast-checked against --bg, ratios noted inline. */ :root { /* Canvas: cool machined-steel paper. Every grey below is verified ≥4.5:1 on it. */ --bg: #F4F5F6; --surface: #E9EBED; --card: #FFFFFF; --ink: #14181C; /* 16.34:1 on --bg */ --body: #3D454D; /* 8.92:1 */ --steel: #5E676F; /* 5.28:1 */ --faint: #666F77; /* 4.69:1 (was #93A0AA at 2.45:1 — failed AA) */ --line: rgba(20, 24, 28, 0.10); --line-solid: #DCE0E3; /* High-vis safety orange — the one bold colour, spent sparingly. --orange is a FILL colour: put --ink on it (5.10:1), never white (3.50:1). --orange-ink is the text-safe version for light backgrounds (5.04:1 on --bg). */ --orange: #E85D04; --peach: #FF8A3D; --grad-accent: linear-gradient(135deg, #E85D04, #FF8A3D); --orange-tint: #FFF0E4; --orange-line: #F8CFA8; --orange-ink: #B34700; /* Green is reserved for WhatsApp actions only, so green reads as "message now" rather than brand wallpaper. Real WhatsApp green, with ink on it: 8.99:1. */ --wa: #25D366; --wa-hover: #1FBE5A; --emerald: #10B981; --grad-emerald: linear-gradient(135deg, #10B981, #7DD3A0); --emerald-tint: #E7F6EF; --emerald-ink: #0A6B4C; /* was #0E7A57 — only 4.20:1 on the chat-mockup surface */ --red: #C0272C; /* was #E5484D — 3.91:1 on white, failed AA */ --red-tint: #FDEBEC; --violet-tint: #F1EBFD; --violet-ink: #7C3AED; /* Tighter than the previous soft-card look — sharper corners read as tool, not brochure */ --r-card: 14px; --r-tile: 10px; --r-panel: 18px; --r-input: 10px; --shadow-sm: 0 1px 2px rgba(11, 16, 32, 0.04), 0 2px 6px rgba(11, 16, 32, 0.04); --shadow-md: 0 4px 14px -4px rgba(11, 16, 32, 0.1); --shadow-lg: 0 16px 40px -12px rgba(11, 16, 32, 0.16); --display: "Sora", "Noto Sans Arabic", sans-serif; --mono: "IBM Plex Mono", Consolas, monospace; --stripe: repeating-linear-gradient(-45deg, var(--orange) 0 10px, var(--ink) 10px 20px); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); overflow-x: hidden; scrollbar-gutter: stable; } body { font-family: "Inter", "Noto Sans Arabic", -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--body); min-height: 100dvh; line-height: 1.6; overflow-x: hidden; } /* soft warm washes, MenusForge-style */ .bg-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(640px 380px at 85% -8%, rgba(10, 110, 99, 0.08), transparent 62%), radial-gradient(520px 360px at -6% 30%, rgba(16, 185, 129, 0.05), transparent 62%); } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 8px; } /* The green/orange ring disappears on the dark panels, so flip it there. */ .hero-panel :focus-visible, .cta-card :focus-visible, .footer :focus-visible { outline-color: var(--wa); } /* ---------- top bar: cream glass, ink pills ---------- */ .topbar { /* NOT position:sticky — body/html need overflow-x:hidden for a real mobile overflow bug, and sticky silently fails under any ancestor with non-visible overflow on either axis (confirmed live: it scrolled away with the page instead of staying put). position:fixed isn't affected by that, but it does need main's padding-top below to make room for it, since fixed elements don't reserve their own space. */ position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; /* was rgba(255,249,243,.85) — a warm cream left over from the old palette, sitting as a visible warm band above the cool canvas on every screen. Matches --bg now. */ background: rgba(244, 245, 246, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); border-bottom: 1px solid var(--line); } .topbar::after { content: none; } .topbar-start { display: flex; align-items: center; gap: 8px; } .btn-back { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font-size: 1.05rem; line-height: 1; cursor: pointer; transition: background 0.18s, transform 0.15s; } .btn-back:hover { background: var(--orange-tint); border-color: var(--orange-line); } .btn-back:active { transform: scale(0.94); } [dir="rtl"] .btn-back { transform: scaleX(-1); } [dir="rtl"] .btn-back:active { transform: scaleX(-1) scale(0.94); } .logo { font-family: var(--display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.3px; color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px; } [dir="rtl"] .logo { letter-spacing: 0; } .logo-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--grad-accent); } .topbar-actions { display: flex; gap: 7px; align-items: center; } .topbar-username { font-size: 0.85rem; font-weight: 600; color: var(--ink); opacity: 0.75; } .topbar-username:empty { display: none; } .btn-ghost { background: var(--ink); color: #fff; border: 1px solid var(--ink); padding: 8px 17px; border-radius: 999px; font-size: 0.85rem; font-family: inherit; font-weight: 600; cursor: pointer; transition: opacity 0.18s, transform 0.15s; } .btn-ghost:hover { opacity: 0.85; } .btn-ghost:active { transform: scale(0.97); } #lang-toggle { background: var(--surface); color: var(--ink); border-color: var(--line); } #lang-toggle:hover { background: var(--orange-tint); opacity: 1; } main { max-width: 1200px; margin: 0 auto; padding: 72px 16px 64px; } /* every screen change eases in as a whole, not just the individual cards inside it */ #view.view-enter { animation: viewEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes viewEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #view.view-enter { animation: none; } } /* dark full-width footer band */ .footer { text-align: center; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; padding: 30px 16px 36px; margin-top: 26px; background: radial-gradient(420px 200px at 50% -30%, rgba(10, 110, 99, 0.22), transparent 60%), linear-gradient(165deg, #0F1D19, #0A1512); } .footer-brand { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; } .footer-brand .logo-icon { width: 28px; height: 28px; border-radius: 10px; } .footer-tag { color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; } .footer-areas { font-size: 0.74rem; color: rgba(37, 211, 102, 0.9); margin-bottom: 12px; } .footer-made { font-family: var(--mono); font-size: 0.68rem; color: rgba(255, 255, 255, 0.4); } /* ---------- hero: cream, ink headline, dark showcase panel ---------- */ .hero { position: relative; overflow: visible; margin: 22px 0 0; padding: 14px 2px 0; color: var(--ink); text-align: center; animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.25, 1); } .hero .blob { position: absolute; border-radius: 50%; filter: blur(60px); z-index: -1; pointer-events: none; animation: drift 17s ease-in-out infinite alternate; } .hero .blob.b1 { width: 260px; height: 260px; background: rgba(10, 110, 99, 0.14); top: -80px; inset-inline-start: -70px; } .hero .blob.b2 { width: 220px; height: 220px; background: rgba(16, 185, 129, 0.1); top: 30px; inset-inline-end: -60px; animation-delay: -8s; } @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(26px, 18px) scale(1.12); } } .hero h1 { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 7.2vw, 2.7rem); line-height: 1.16; letter-spacing: -0.9px; color: var(--ink); margin-bottom: 10px; } /* landing hero extras */ .eyebrow { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line-solid); border-radius: 999px; padding: 6px 15px; margin-bottom: 14px; box-shadow: var(--shadow-sm); } .cta-row { position: relative; z-index: 1; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0 16px; } .cta-row .btn { width: auto; margin-top: 0; } .btn.hero-cta { padding: 14px 30px; background: var(--grad-accent); color: var(--ink); font-weight: 800; } .btn.hero-cta:hover { opacity: 1; filter: brightness(1.04); } .btn.hero-ghost { padding: 14px 24px; text-decoration: none; } .lhero { padding-top: 26px; } .lhero .hero-panel { margin-top: 18px; } /* main itself is now wide (1200px) so every section shares the same width — this wrapper used to break the hero out of a narrower main on its own; kept as a plain, no-op element so the markup doesn't need touching, styled to do nothing special. */ .hero-top-wrap { display: block; } .hero-top { display: flex; flex-direction: column; gap: 20px; } .hero-top .hero-main { flex: 1 1 auto; margin-top: 0; } /* Live stats moved out of the hero row entirely (was a sidebar card next to the tall phone/wheel visual — its own content was much shorter, leaving a large dead gap below it however the row was aligned). A full-width strip sidesteps the height fight and lets the phone visual stay full-size. */ .live-strip { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 22px; box-shadow: var(--shadow-sm); margin: 20px 0; animation: rise 0.5s cubic-bezier(0.2, 0.8, 0.25, 1); display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; } .live-strip .band-head { margin: 0; justify-content: flex-start; } .live-strip .live-stats { margin: 0; justify-content: flex-start; gap: 26px; } .live-strip .live-stat { flex: none; text-align: start; } .live-strip .live-chart { max-width: 360px; margin: 0; flex: 1 1 260px; } .week-badge { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: var(--orange-ink, var(--orange)); background: var(--orange-tint); border: 1px solid var(--orange-line); border-radius: 999px; padding: 3px 9px; } /* full-bleed surface band */ .band { margin: 30px calc(50% - 50vw) 0; padding: 26px calc(50vw - 50%) 28px; background: #fff; border-block: 1px solid var(--line); } .band-head { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 14px; } .band-head h2 { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.3px; color: var(--ink); } [dir="rtl"] .band-head h2 { letter-spacing: 0; } .live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); animation: livepulse 2s infinite; } @keyframes livepulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); } 70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } .ticker { margin-top: 0; } .ticker .m-pill.ticker-pill { background: var(--bg); color: var(--ink); border: 1px solid var(--line-solid); font-weight: 600; } .ticker .m-pill.ticker-pill .ic { color: var(--orange); } .ticker .m-pill.ticker-pill .req-sub { font-size: 0.7rem; } .ticker .m-pill.ticker-pill .badge { font-size: 0.62rem; padding: 2px 8px; } .live-stats { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .live-stat { flex: 0 1 150px; text-align: center; } .live-stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.15; color: var(--orange-ink); } .live-stat span { font-size: 0.76rem; color: var(--steel); font-weight: 500; } .live-chart { max-width: 420px; margin: 0 auto 18px; } /* road-marking divider (automotive wink) */ .road { width: 150px; height: 9px; border-radius: 5px; background: var(--ink); opacity: 0.9; position: relative; margin: 30px auto 4px; } .road::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; border-top: 2px dashed rgba(255, 255, 255, 0.55); transform: translateY(-50%); } /* trust pillars */ .pillars-wrap { margin-top: 26px; } .sec-title { font-family: var(--display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.4px; color: var(--ink); text-align: center; margin-bottom: 14px; } [dir="rtl"] .sec-title { letter-spacing: 0; } .pillars { display: grid; grid-template-columns: 1fr; gap: 10px; } @media (min-width: 560px) { .pillars { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .pillar { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 18px; box-shadow: var(--shadow-sm); transition: transform 0.16s, box-shadow 0.16s; } .pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .pillar-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: var(--grad-accent); color: var(--ink); margin-bottom: 10px; } .pillar-icon svg { width: 24px; height: 24px; } .pillar-t { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 3px; } /* compact logged-in home header */ .home-head { padding: 22px 4px 0; } .home-head h2 { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.5px; color: var(--ink); } [dir="rtl"] .home-head h2 { letter-spacing: 0; } [dir="rtl"] .hero h1 { letter-spacing: 0; line-height: 1.35; } .hero h1 .accent { color: var(--orange-ink); } .hero p { position: relative; z-index: 1; color: var(--steel); font-size: 0.95rem; max-width: 440px; margin: 0 auto; } /* dark showcase panel — the "product shot" (brand signature #1 lives here) */ .hero-panel { position: relative; z-index: 1; overflow: hidden; margin-top: 20px; padding: 24px 18px 20px; border-radius: var(--r-panel); background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), radial-gradient(420px 260px at 85% -12%, rgba(10, 110, 99, 0.32), transparent 60%), radial-gradient(380px 260px at 0% 112%, rgba(37, 211, 102, 0.18), transparent 58%), linear-gradient(165deg, #0F1D19 0%, #0A1512 100%); background-size: 30px 30px, 30px 30px, auto, auto, auto; box-shadow: var(--shadow-lg); } /* live WhatsApp-chat mockup in real 3D space (brand signature #1) — the deal, actually happening, floating with genuine perspective/rotateX/Y/translateZ, not a flat sticker */ .stage { position: relative; z-index: 1; perspective: 1000px; perspective-origin: 50% 30%; height: 340px; margin-top: 8px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; } /* real WebGL 3D object (hero3d.js) — sits full-bleed behind the phone mockup */ .hero3d-mount { position: absolute; inset: 0; z-index: 0; } .hero3d-mount canvas { display: block; width: 100% !important; height: 100% !important; } .float-chip { position: absolute; z-index: 2; background: #fff; color: var(--ink); border-radius: 12px; padding: 7px 11px; font-size: 0.68rem; font-weight: 700; box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.35); animation: chipFloat 5s ease-in-out infinite; } .float-chip.c1 { top: 8%; inset-inline-start: 4%; transform: translateZ(50px) rotate(-6deg); animation-delay: -1.5s; } .float-chip.c2 { bottom: 8%; inset-inline-end: 2%; transform: translateZ(65px) rotate(5deg); animation-delay: -3.5s; } @keyframes chipFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } .phone-3d { position: relative; z-index: 1; width: min(210px, 78%); transform-style: preserve-3d; animation: phoneFloat 6s ease-in-out infinite; } @keyframes phoneFloat { 0%, 100% { transform: rotateY(-14deg) rotateX(5deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateX(2deg) translateY(-12px); } } .phone-body { background: #0B1210; border-radius: 22px; padding: 8px; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35); transform-style: preserve-3d; } .phone-notch { width: 38px; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 4px; margin: 0 auto 6px; } .wa-screen { background: #DCE7DF; border-radius: 16px; padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; min-height: 188px; transform: translateZ(5px); } @media (prefers-reduced-motion: reduce) { .float-chip, .phone-3d { animation: none; } .phone-3d { transform: rotateY(-10deg) rotateX(3deg); } } @media (max-width: 420px) { .stage { height: 300px; } } .wa-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid rgba(11, 16, 32, 0.08); } .wa-av { width: 22px; height: 22px; border-radius: 50%; background: var(--grad-accent); flex-shrink: 0; } .wa-bar b { font-size: 0.7rem; color: var(--ink); display: block; line-height: 1.2; } .wa-bar span { font-size: 0.6rem; color: var(--emerald-ink); } .wa-bubble { max-width: 82%; padding: 7px 10px; border-radius: 12px; font-size: 0.68rem; line-height: 1.4; opacity: 0; animation: waBubbleIn 0.4s ease forwards; } /* Logical radii, not bottom-left/right: the tail must sit on whichever edge the bubble is aligned to, and align-self flips under dir="rtl". With physical corners the tail pointed away from the speaker in Arabic — on the landing page, in the market's main language. */ .wa-bubble.out { align-self: flex-end; background: var(--orange); color: var(--ink); border-end-end-radius: 3px; animation-delay: 0.3s; } .wa-bubble.in { align-self: flex-start; background: #fff; color: var(--ink); border-end-start-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,0.05); animation-delay: 2.1s; } @keyframes waBubbleIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .wa-typing { align-self: flex-start; background: #fff; border-radius: 12px; border-bottom-left-radius: 3px; padding: 8px 11px; display: flex; gap: 3px; opacity: 0; animation: waBubbleIn 0.4s ease forwards; animation-delay: 0.9s; } .wa-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--steel); animation: waTyp 1s infinite; } .wa-typing i:nth-child(2) { animation-delay: 0.15s; } .wa-typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes waTyp { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .wa-bubble, .wa-typing { animation: none; opacity: 1; } } /* services marquee — inside the dark panel */ .marquee { position: relative; z-index: 1; overflow: hidden; margin-top: 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee + .marquee { margin-top: 9px; } .marquee-track { display: flex; gap: 9px; width: max-content; animation: marquee 36s linear infinite; } .marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 44s; } @keyframes marquee { to { transform: translateX(-50%); } } [dir="rtl"] .marquee-track { animation-name: marquee-rtl; } @keyframes marquee-rtl { to { transform: translateX(50%); } } .m-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 8px 15px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); } .m-pill .ic { font-size: 0.95rem; display: inline-flex; color: var(--peach); } .m-pill .ic svg { width: 15px; height: 15px; } @media (max-width: 420px) { .m-pill { padding: 7px 12px; font-size: 0.72rem; gap: 6px; } .marquee-track { gap: 7px; } } /* ---------- cards: flat, warm, generous radius ---------- */ .card { background: var(--card); border-radius: var(--r-card); padding: 24px; margin: 16px 0; border: 1px solid var(--line); box-shadow: var(--shadow-sm); animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.25, 1); } .card h2 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.4px; color: var(--ink); margin-bottom: 10px; } .card h3 { font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--ink); } [dir="rtl"] .card h2, [dir="rtl"] .card h3 { letter-spacing: 0; } /* the wizard is a garage job card (brand signature #2) */ /* forms read badly stretched to main's new 1200px width — cap this one at a normal form measure, centered, regardless of how wide the page around it is */ .job-card { position: relative; padding-top: 30px; overflow: hidden; max-width: 480px; margin-inline: auto; } .job-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; background: var(--stripe); } /* Same caution-stripe motif as .job-card, pulled into the hero so the "workshop, not brochure" identity shows up before someone ever reaches a form. */ .hero-stripe { width: 64px; height: 8px; border-radius: 4px; background: var(--stripe); margin: 4px 0 22px; } /* same problem as .job-card above, for the account/specialties settings forms */ .form-card { max-width: 520px; margin-inline: auto; } @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } main > .card:nth-of-type(2), #view > .card:nth-of-type(2) { animation-delay: 0.06s; animation-fill-mode: backwards; } main > .card:nth-of-type(3), #view > .card:nth-of-type(3) { animation-delay: 0.12s; animation-fill-mode: backwards; } main > .card:nth-of-type(4), #view > .card:nth-of-type(4) { animation-delay: 0.18s; animation-fill-mode: backwards; } /* ---------- forms ---------- */ label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--steel); margin: 15px 0 6px; } [dir="rtl"] label { letter-spacing: 0; } input, select, textarea { width: 100%; padding: 12px 16px; font-size: 1rem; border: 1.5px solid var(--line-solid); border-radius: var(--r-input); background: #fff; color: var(--ink); font-family: inherit; transition: border-color 0.18s, box-shadow 0.18s; } /* No `outline: none` here: this selector's specificity beats :focus-visible, so it was silently removing the focus ring from every input, select and textarea in the app. The old 0.14-alpha glow that replaced it composited to 1.23:1 — invisible. */ input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(232, 93, 4, 0.28); } textarea { resize: vertical; min-height: 84px; } /* Tapping Next on an incomplete wizard step red-flags the actual field that's missing, on top of the explanatory toast — clears itself the moment the customer touches that field. */ input.field-error, select.field-error, textarea.field-error, .brand-picker-trigger.field-error { border-color: var(--red) !important; } .chip-row.field-error, #w-shop-list.field-error { outline: 2px solid var(--red); outline-offset: 5px; border-radius: var(--r-tile); } input[type="file"] { padding: 10px; font-size: 0.85rem; color: var(--steel); } input[type="file"]::file-selector-button { font-family: inherit; font-weight: 700; font-size: 0.82rem; color: var(--orange-ink); background: var(--orange-tint); border: 1px solid var(--orange-line); border-radius: 999px; padding: 8px 16px; margin-inline-end: 10px; cursor: pointer; transition: filter 0.15s; } input[type="file"]::file-selector-button:hover { filter: brightness(0.97); } /* buttons: flat ink pills (MenusForge primary) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 20px; margin-top: 16px; background: var(--ink); color: #fff; border: none; border-radius: 999px; font-size: 0.98rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s; } .btn:hover { opacity: 0.88; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0) scale(0.985); } .btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; } /* Looks disabled but stays tappable — clicking while a wizard step is incomplete needs to explain what's missing (via toast) instead of a real disabled button silently eating the tap, which is exactly what customers were getting stuck on. */ .btn.soft-disabled { opacity: 0.35; } .btn.soft-disabled:hover { opacity: 0.35; transform: none; box-shadow: none; } .btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .btn.secondary:hover { background: var(--surface); opacity: 1; } .btn.small { width: auto; padding: 9px 18px; font-size: 0.85rem; margin-top: 10px; } .btn.danger { background: #fff; color: var(--red); border: 1.5px solid #F5C6C8; } .btn.danger:hover { background: var(--red-tint); opacity: 1; } /* Dark label on the green, not white: white on #25D366 is 1.98:1 (unreadable), ink is 8.99:1. Also matches the workshop-signage language — dark type on a high-vis field. */ .btn.wa-btn { background: var(--wa); color: var(--ink); text-decoration: none; margin-top: 12px; } .btn.wa-btn:hover { background: var(--wa-hover); opacity: 1; } /* ---------- wizard steps ---------- */ .steps { display: flex; gap: 6px; margin: 4px 0 8px; } .step-dot { flex: 1; height: 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); transition: background 0.35s; } .step-dot.active { background: var(--grad-accent); border-color: transparent; } .step-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--steel); margin-bottom: 6px; } [dir="rtl"] .step-label { letter-spacing: 0; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; } .cat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px 13px; border: 1.5px solid var(--line); border-radius: var(--r-tile); background: #fff; cursor: pointer; text-align: center; font-family: inherit; transition: transform 0.16s, border-color 0.2s, box-shadow 0.2s, background 0.2s; } .cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .cat-tile .icon { display: grid; place-items: center; width: 48px; height: 48px; font-size: 1.4rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: background 0.2s, border-color 0.2s, color 0.2s; } .cat-tile .icon svg { width: 23px; height: 23px; } .cat-tile .name { font-size: 0.73rem; font-weight: 700; color: var(--ink); line-height: 1.3; /* fixed 2-line height so a tile never stretches taller just because a row-mate's label happens to wrap — every tile in the grid stays the same height */ min-height: calc(1.3em * 2); display: flex; align-items: center; } .cat-tile.selected { border-color: var(--orange); background: var(--orange-tint); } .cat-tile.selected .icon { background: var(--grad-accent); border-color: transparent; color: var(--ink); } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .chip { padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 0.84rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.16s; color: var(--ink); } .chip:hover { border-color: var(--orange-line); background: var(--orange-tint); } .chip.selected { border-color: var(--orange); background: var(--orange-tint); color: var(--orange-ink); } .chip.suggest { background: var(--surface); font-weight: 500; } .chip.big { padding: 12px 26px; font-size: 1rem; font-weight: 700; } /* lead-card quick actions + first-3 states */ .lead-actions { display: flex; gap: 8px; margin-top: 14px; } .lead-actions .btn { flex: 1; margin-top: 0; } .req-card.lead-full { opacity: 0.55; } .req-card.lead-full:hover { transform: none; box-shadow: var(--shadow-sm); } .select-all-row { display: flex; justify-content: space-between; align-items: center; } .select-all-row label { margin: 13px 0 5px; } .link-btn { background: none; border: none; color: var(--orange-ink); font-size: 0.76rem; font-weight: 700; cursor: pointer; padding: 4px; } .link-btn:hover { text-decoration: underline; } /* vendor specialty rule builder */ .rule-builder { border: 1.5px dashed var(--line-solid); border-radius: var(--r-tile); padding: 15px; margin-top: 10px; background: var(--surface); } .rule-builder label { margin-top: 8px; } .rule-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .rule-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--orange-tint); border: 1px solid var(--orange-line); border-radius: var(--r-tile); padding: 10px 12px; animation: rise 0.25s ease; } .rule-item select { flex: 1 1 110px; min-width: 90px; font-size: 0.82rem; padding: 6px 8px; } .rule-item .rm { background: none; border: none; color: var(--red); font-size: 1rem; font-weight: 700; cursor: pointer; padding: 2px 7px; border-radius: 999px; transition: background 0.15s; flex: 0 0 auto; } .rule-item .rm:hover { background: rgba(229, 72, 77, 0.1); } .photo-preview { max-width: 100%; max-height: 200px; border-radius: var(--r-tile); margin-top: 10px; display: block; box-shadow: var(--shadow-md); } /* customer shop-picker */ .shop-pick-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; max-height: 340px; overflow-y: auto; padding: 2px; } .shop-pick-list::-webkit-scrollbar { width: 6px; } .shop-pick-list::-webkit-scrollbar-thumb { background: var(--line-solid); border-radius: 3px; } .shop-pick-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1.5px solid var(--line); border-radius: var(--r-tile); cursor: pointer; background: #fff; transition: border-color 0.16s, background 0.16s; } .shop-pick-row:hover { border-color: var(--orange-line); } .shop-pick-row.checked { border-color: var(--orange); background: var(--orange-tint); } .shop-pick-row input[type="checkbox"] { width: 19px; height: 19px; accent-color: var(--orange); flex-shrink: 0; } .shop-pick-row .nm { font-weight: 700; font-size: 0.92rem; color: var(--ink); } /* star rating */ .rate-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .stars { display: inline-flex; gap: 2px; } .star { background: none; border: none; font-size: 1.35rem; line-height: 1; cursor: pointer; /* was --line-solid at 1.22:1 on white — the unrated state was effectively invisible. A rating control has to show how many stars are available before you pick one. */ color: #85918C; padding: 0; transition: color 0.15s, transform 0.12s; } .star:hover { transform: scale(1.18); } .star.filled { color: var(--orange-ink); } /* notification preference toggles */ .notify-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; font-weight: 600; font-size: 0.9rem; color: var(--ink); border-bottom: 1px solid var(--line); } .notify-row:last-of-type { border-bottom: none; } .log-chan { font-size: 1.3rem; flex-shrink: 0; width: 34px; text-align: center; } /* landing sign-in call to action — dark panel like MenusForge footer CTA */ .cta-card { text-align: center; color: #fff; background: radial-gradient(420px 240px at 85% -20%, rgba(10, 110, 99, 0.32), transparent 60%), radial-gradient(380px 240px at 0% 120%, rgba(37, 211, 102, 0.18), transparent 60%), linear-gradient(160deg, #0F1D19, #0A1512); border-color: rgba(255, 255, 255, 0.06); border-radius: var(--r-panel); box-shadow: var(--shadow-lg); } .cta-card h2 { color: #fff; } .cta-card .req-sub { color: rgba(255, 255, 255, 0.62); max-width: 380px; margin: 0 auto; } .cta-card .btn { max-width: 320px; margin-left: auto; margin-right: auto; background: var(--grad-accent); color: var(--ink); } /* how it works */ .hiw h2 { margin-bottom: 4px; } .hiw-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--line-solid); } .hiw-row:last-child { border-bottom: none; padding-bottom: 2px; } .hiw-num { font-family: var(--mono); font-weight: 600; font-size: 0.8rem; color: var(--ink); background: var(--grad-accent); border-radius: 999px; padding: 3px 10px; margin-top: 2px; flex-shrink: 0; } .hiw-t { font-weight: 700; font-size: 0.95rem; color: var(--ink); } /* ---------- role chooser ---------- */ .role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; } .role-card { padding: 22px 14px; border: 1.5px solid var(--line); border-radius: var(--r-card); background: #fff; cursor: pointer; text-align: center; font-family: inherit; transition: all 0.2s; } .role-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .role-card.selected { border-color: var(--orange); background: var(--orange-tint); } .role-card-wide { grid-column: 1 / -1; } .role-card .big { font-size: 2.3rem; display: block; margin-bottom: 8px; } .role-card .title { font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--ink); } .role-card .sub { font-size: 0.76rem; color: var(--steel); margin-top: 4px; line-height: 1.45; } /* ---------- request lists ---------- */ /* main's now 1200px wide, so a single column of cards reads as a long thin strip — let cards flow into columns instead, same fix already applied to .cat-grid etc. */ .req-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin: 12px 0; } .req-list > .card, .req-list > div > .card { margin: 0; } .req-card { display: block; text-decoration: none; color: inherit; transition: transform 0.16s, box-shadow 0.16s; } .req-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .req-head { display: flex; align-items: center; gap: 12px; } .req-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; font-size: 1.35rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); } .req-icon svg { width: 23px; height: 23px; } .req-title { font-weight: 700; font-size: 0.98rem; color: var(--ink); } .req-sub { color: var(--steel); font-size: 0.84rem; } /* Manufacturer badge next to the vehicle line. Logos are full-colour PNGs on a white chip so marks with white in them (Ford, BMW) stay legible on the cool canvas. */ .req-sub-brand { display: flex; align-items: center; gap: 7px; } .brand-mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; object-fit: contain; background: #fff; padding: 2px; border: 1px solid var(--line-solid); } /* Custom brand dropdown (see brandPickerHtml/wireBrandPicker in app.js) — a native