/* ============================================================================= * RCAI demo-kit.css — SHARED styles/tokens/components for the bilingual hero * chat-window demos. Authored ONCE; variants set window.DEMO_CONFIG and boot. * * Owns: stage geometry (desktop 1440x880 / mobile 430x900), headline + ES|EN * toggle, the phone (376x760 desktop) and widget surfaces, per-platform chrome * (whatsapp / messenger / facebook / instagram incl. the IG profile-visible * header / widget panel), bubbles + beats (photo / bookingButton / orderConfirm * / publicReply), and the two honest finale SCENES (order = dashboard order * detail; booking = the RCAI booking page). Theming flips on * #rcai-stage[data-platform="…"] via CSS custom properties. * * Companion: demo-engine.js (builds the DOM from DEMO_CONFIG + drives the * timeline) and chat-kit.js (real-SVG icon kit — window.RCAI_ICON). * ========================================================================== */ :root { /* Brand (globals.css :root, verbatim). */ --brand-secondary: #7f56d9; --brand-700: #7354ef; --brand-500: #9e77ed; --gray-50: #f9fafb; --gray-100: #f2f4f7; --gray-300: #d0d5dd; --gray-500: #667085; --gray-700: #344054; --gray-900: #101828; --ok-green: #129578; --ok-green-bg: #f1fdfb; --font-urbanist: 'Urbanist', sans-serif; /* Inside the phone: the platform's OWN system font (reads native). */ --sys-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Default platform theme (overridden per data-platform below). */ --sent-bg: var(--brand-secondary); --sent-color: #fff; --recv-bg: #efefef; --recv-color: #0a0a0a; --accent: var(--brand-700); --header-bg: #fff; --header-ink: #101828; --header-sub: #8e8e8e; --hairline: #ededed; --screen-bg: #fff; --composer-bg: #fff; --tick-blue: #53bdeb; } * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; } html, body { margin: 0; height: 100%; background: #fff; } /* Painted kit icons: the injected sizes itself; host just centers it. */ .ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .ic svg { display: block; } /* ============================================================================ * STAGE — fixed canvas. data-mode flips desktop (1440x880) vs mobile (430x900). * ========================================================================== */ #rcai-stage { position: relative; width: 1440px; height: 880px; margin: 0 auto; overflow: hidden; background: radial-gradient(1200px 700px at 50% 38%, #ffffff 0%, #faf8ff 46%, #f3effc 100%), linear-gradient(180deg, #ffffff, #f6f3fe); font-family: var(--font-urbanist); color: #1d2939; } #rcai-stage[data-mode="mobile"] { width: 430px; height: 900px; } #rcai-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(115,84,239,0.06) 1.4px, transparent 1.4px); background-size: 30px 30px; pointer-events: none; } .orb { position: absolute; border-radius: 9999px; filter: blur(60px); pointer-events: none; opacity: 0.5; } .orb-1 { width: 420px; height: 420px; left: -120px; top: -90px; background: radial-gradient(circle, rgba(158,119,237,0.45), transparent 70%); } .orb-2 { width: 480px; height: 480px; right: -150px; bottom: -130px; background: radial-gradient(circle, rgba(115,84,239,0.40), transparent 70%); } /* ---------------------------------------------------------------------------- * Per-platform theme (custom properties consumed by chrome + bubbles). * -------------------------------------------------------------------------- */ #rcai-stage[data-platform="whatsapp"] { --sent-bg: #d9fdd3; --sent-color: #111b21; --recv-bg: #fff; --recv-color: #111b21; --accent: #008069; --header-bg: #fff; --header-ink: #111b21; --header-sub: #667781; --hairline: rgba(11,20,26,0.10); --screen-bg: #efeae2; --composer-bg: #efeae2; } #rcai-stage[data-platform="messenger"], #rcai-stage[data-platform="facebook"] { --sent-bg: #0084ff; --sent-color: #fff; --recv-bg: #f0f0f0; --recv-color: #050505; --accent: #0084ff; --header-bg: #fff; --header-ink: #050505; --header-sub: #8a8d91; --hairline: #ededed; --screen-bg: #fff; --composer-bg: #fff; } #rcai-stage[data-platform="instagram"] { --sent-bg: linear-gradient(135deg, #3A7BDE 0%, #4F5BD5 34%, #6D3DC4 72%, #8A3AB9 100%); --sent-color: #fff; --recv-bg: #efefef; --recv-color: #0a0a0a; --accent: #c2255c; --header-bg: #fff; --header-ink: #0a0a0a; --header-sub: #8e8e8e; --hairline: #efefef; --screen-bg: #fff; --composer-bg: #fff; } #rcai-stage[data-platform="widget"] { --sent-bg: #e9ecf1; --sent-color: #1d2939; --recv-bg: #e7f7f4; --recv-color: #103a34; --accent: #0fae96; --header-bg: #0fae96; --header-ink: #fff; --header-sub: rgba(255,255,255,0.85); --hairline: #e6e9ee; --screen-bg: #fff; --composer-bg: #fff; } /* ============================================================================ * HEADLINE — the only marketing copy. Lives on the stage, NEVER in the chat. * ========================================================================== */ .headline { position: absolute; left: 560px; top: 132px; width: 720px; z-index: 6; } .lang-toggle { display: inline-flex; gap: 6px; margin: 0 0 18px; background: rgba(115,84,239,0.08); padding: 5px; border-radius: 9999px; } .lang-pill { border: 0; cursor: pointer; font-family: var(--font-urbanist); font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: #7354ef; background: transparent; padding: 7px 16px; border-radius: 9999px; transition: background 0.2s ease, color 0.2s ease; } .lang-pill.active { background: #7354ef; color: #fff; box-shadow: 0 6px 14px -6px rgba(115,84,239,0.6); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: 0.03em; color: #7354ef; background: rgba(115,84,239,0.09); padding: 9px 18px 9px 12px; border-radius: 9999px; } .eyebrow .bolt { color: #f5a623; } .eyebrow .brand-mark { display: inline-flex; } .eyebrow .wa-badge { width: 28px; height: 28px; border-radius: 8px; background: #25D366; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -3px rgba(37,211,102,0.55); } .headline h1 { margin: 22px 0 0; font-size: 44px; font-weight: 800; line-height: 1.07; letter-spacing: -0.026em; color: #101828; } .headline h1 .accent { color: #7354ef; } .headline p { margin: 18px 0 0; font-size: 23px; font-weight: 500; line-height: 1.38; color: #667085; max-width: 524px; } .ticks { margin: 28px 0 0; display: flex; flex-direction: column; gap: 14px; } .tick { display: flex; align-items: center; gap: 13px; font-size: 22px; font-weight: 600; color: #344054; } .tick .tick-ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9999px; background: rgba(115,84,239,0.12); color: #7354ef; } /* Mobile: compact top strip (eyebrow + toggle) above the phone; no big headline. */ .mobile-topbar { position: absolute; left: 16px; right: 16px; top: 18px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mobile-topbar .eyebrow { font-size: 14px; padding: 7px 13px 7px 9px; gap: 7px; } .mobile-topbar .lang-toggle { margin: 0; padding: 4px; } .mobile-topbar .lang-pill { font-size: 13px; padding: 5px 11px; } /* ============================================================================ * PHONE — real modern smartphone. KEEP THESE NUMBERS EXACT (DESIGN_DOC §3): * desktop 376x760, top 60, left 104 → phone LEFT, ~60px top/bottom margins. * The headline + any opening window (scene-panel) live on the RIGHT. * ========================================================================== */ #phone { position: absolute; left: 104px; top: 60px; z-index: 5; width: 376px; height: 760px; background: linear-gradient(160deg, #15151c, #050507); border-radius: 44px; padding: 11px; box-shadow: 0 50px 90px -30px rgba(16,24,40,0.50), 0 14px 40px -16px rgba(115,84,239,0.30), 0 0 0 1px rgba(16,24,40,0.04); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); } #rcai-stage[data-mode="mobile"] #phone { left: 19px; top: 96px; width: 392px; height: 770px; border-radius: 46px; } .screen { position: relative; width: 100%; height: 100%; background: var(--screen-bg); border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; font-family: var(--sys-font); } #rcai-stage[data-mode="mobile"] .screen { border-radius: 36px; } .island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 96px; height: 24px; background: #000; border-radius: 14px; z-index: 30; } .statusbar { flex: 0 0 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 21px; background: transparent; color: #0b141a; } .statusbar.on-dark { color: #fff; } .sb-time { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; } .sb-icons { display: flex; align-items: center; gap: 7px; } /* ============================================================================ * CHROME — per-platform conversation header. * ========================================================================== */ .chat-header { flex: 0 0 62px; display: flex; align-items: center; padding: 0 13px; background: var(--header-bg); color: var(--header-ink); box-shadow: 0 0.5px 0 var(--hairline); position: relative; z-index: 2; } .chat-header .back { color: var(--accent); margin-right: 6px; flex: 0 0 auto; } .hdr-avatar { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; margin-right: 10px; background: #e7e0d8; box-shadow: 0 3px 10px -4px rgba(16,24,40,0.35); } .hdr-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .hdr-avatar .dot { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #31cc6a; border: 2px solid var(--header-bg); } .hdr-id { flex: 1 1 auto; min-width: 0; } .hdr-name { font-size: 18px; font-weight: 700; color: var(--header-ink); letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; } .hdr-sub { font-size: 13px; font-weight: 400; color: var(--header-sub); margin-top: 1px; } .hdr-sub.typing { color: var(--accent); font-weight: 500; } .hdr-actions { display: flex; align-items: center; gap: 13px; margin-left: 6px; color: var(--accent); } .hdr-actions .ic { flex: 0 0 auto; } /* ============================================================================ * THREAD + ROWS + BUBBLES. * During play: bottom-anchored, overflow clipped (oldest clips at top). * On stop: .scrollable flips to overflow-y:auto (viewer scrolls up to re-read). * ========================================================================== */ .thread { flex: 1 1 auto; overflow: hidden; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 11px 13px 12px; background: var(--screen-bg); } .thread.scrollable { justify-content: flex-start; overflow-y: auto; overflow-x: hidden; } .thread::-webkit-scrollbar { width: 0; height: 0; } /* Scroll affordance on stop (task B): once the play-once run ends and the * thread flips to .scrollable, a THIN scrollbar appears (same styling as the * order dashboard's .ord-body scrollbar) — never during the animation, where * the base .thread rule above keeps it at width 0. */ .thread.scrollable { scrollbar-width: thin; scrollbar-color: rgba(84,101,111,0.32) transparent; } .thread.scrollable::-webkit-scrollbar { width: 6px; height: 0; } /* Same shape as .ord-body's thumb; translucent neutral so it reads on BOTH the * white widget/messenger threads and the beige WhatsApp wallpaper. */ .thread.scrollable::-webkit-scrollbar-thumb { background: rgba(84,101,111,0.32); border-radius: 8px; } /* + a soft top fade hinting at the history above the fold. Engine adds * .has-history only when the thread actually overflows. Sticky flex child: * pins to the visible top edge, zero net layout height (26 − 11 − 15 = 0), * bleeds over the 13px side padding. */ .thread.scrollable.has-history::before { content: ""; position: sticky; top: 0; z-index: 5; display: block; flex: 0 0 26px; height: 26px; margin: -11px -13px -15px; background: linear-gradient(180deg, rgba(11,20,26,0.11), rgba(11,20,26,0)); pointer-events: none; } .feed { display: flex; flex-direction: column; } .feed > .row:first-child, .feed > .center-pill:first-child { margin-top: 0; } .row { display: flex; margin-top: 11px; opacity: 0; transform: translateY(15px); transition: opacity 0.4s ease, transform 0.46s cubic-bezier(0.22,1,0.36,1); } .row.shown { opacity: 1; transform: none; } .row.out { justify-content: flex-end; } .row.in { justify-content: flex-start; align-items: flex-end; gap: 8px; } .row.beat-row { padding-left: 42px; } /* Centered set-dressing pills (date / encryption). */ .center-pill { align-self: center; text-align: center; max-width: 90%; border-radius: 8px; padding: 5px 12px; margin: 8px 0 2px; font-size: 13px; font-weight: 500; color: #54656f; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; } .center-pill.shown { opacity: 1; transform: none; } .pill-date { background: rgba(255,255,255,0.9); color: #54656f; letter-spacing: 0.04em; box-shadow: 0 1px 1px rgba(0,0,0,0.05); } .pill-enc { background: #fdf4c5; color: #5b6b4f; display: flex; align-items: center; gap: 7px; justify-content: center; line-height: 1.28; font-size: 12.5px; padding: 7px 12px; } .pill-enc .ic { color: #b39b2e; flex: 0 0 auto; } /* Time-jump pill (task E): inherits the .pill-date look; just a bit more air * above so the "later that day" beat reads as a real break in the thread. */ .pill-gap { margin-top: 16px; } /* Small business avatar beside bot (received) bubbles. */ .av-sm { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #e7e0d8; margin-bottom: 2px; } .av-sm img { width: 100%; height: 100%; object-fit: cover; display: block; } .msg { max-width: 78%; padding: 10px 15px; font-size: 22px; line-height: 1.32; font-weight: 400; border-radius: 20px; word-wrap: break-word; white-space: pre-line; } .msg-out { background: var(--sent-bg); color: var(--sent-color); border-bottom-right-radius: 7px; } .msg-in { background: var(--recv-bg); color: var(--recv-color); border-bottom-left-radius: 7px; } #rcai-stage[data-platform="whatsapp"] .msg { border-radius: 9px; padding: 8px 12px; box-shadow: 0 1px 1px rgba(0,0,0,0.12); } #rcai-stage[data-platform="whatsapp"] .msg-out { border-top-right-radius: 1px; } #rcai-stage[data-platform="whatsapp"] .msg-in { border-top-left-radius: 1px; } #rcai-stage[data-platform="instagram"] .msg-out { box-shadow: 0 10px 22px -12px rgba(106,49,185,0.5); } /* Per-message meta (timestamp + read ticks), whatsapp-style. */ .msg .meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 2px; } .msg .meta .t { font-size: 12px; color: var(--header-sub); } .msg-out .meta .t { color: rgba(17,27,33,0.55); } .msg .meta .ic { color: var(--tick-blue); } /* Typing-dots indicator (received bubble). */ .msg.typing { display: flex; align-items: center; gap: 7px; padding: 14px 16px; } .msg.typing span { width: 10px; height: 10px; border-radius: 50%; background: #b0b0b0; animation: rcaidot 1.2s infinite ease-in-out; } .msg.typing span:nth-child(2) { animation-delay: 0.18s; } .msg.typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes rcaidot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-7px); opacity: 1; } } /* ============================================================================ * BEATS. * ========================================================================== */ /* photo — plain media bubble on the bot/business side (NO price, NO tag chips). */ .beat-photo { display: flex; flex-direction: column; max-width: 78%; } .ph-img { width: 200px; max-width: 100%; border-radius: 16px; overflow: hidden; background: #e7e0d8; box-shadow: 0 9px 22px -12px rgba(16,24,40,0.45); } .ph-img img { display: block; width: 100%; height: 200px; object-fit: cover; } /* bookingButton — a real cta_url_button rendered under the bot bubble. * border:0 + font-family:inherit kill the UA child). */ .hdr-avatar::after, .av-sm::after, .post-av::after, .pc-av::after, .pcx-av::after, .ig-pic::after, .ig-mini-av::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); pointer-events: none; } .av-sm, .post-author .post-av, .pc-av, .post-composer .pcx-av, .ig-profile .ig-pic, .ig-topbar .ig-mini-av { position: relative; } .ig-profile .ig-pic { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #e7e0d8; box-shadow: 0 6px 16px -8px rgba(16,24,40,0.4); } .ig-profile .ig-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .ig-profile .ig-pname { font-size: 18px; font-weight: 700; color: #0a0a0a; margin-top: 10px; } .ig-profile .ig-pmeta { font-size: 14px; color: #8e8e8e; margin-top: 3px; } /* ============================================================================ * WIDGET surface (DESIGN_DOC §7) — browser-frame mockup + launcher + panel. * ========================================================================== */ #browser { position: absolute; left: 560px; top: 64px; z-index: 4; width: 820px; height: 752px; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(16,24,40,0.45), 0 0 0 1px rgba(16,24,40,0.05); } /* Widget: keep its headline on the LEFT (browser mockup stays on the right for now). * The phone-left inversion is decided per-channel; the widget's composition is * handled in the full build (booking opens inside the browser). */ #rcai-stage[data-platform="widget"] .headline { left: 104px; width: 420px; } /* Embedded in the landing hero: the landing owns the ES|EN toggle, so hide the in-stage one. */ html[data-embedded="1"] .lang-toggle { display: none !important; } #rcai-stage[data-mode="mobile"] #browser { left: 19px; top: 96px; width: 392px; height: 770px; border-radius: 24px; } .bz-bar { height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: #f3f4f6; border-bottom: 1px solid #e6e9ee; } .bz-dots { display: flex; gap: 8px; } .bz-dots span { width: 13px; height: 13px; border-radius: 50%; } .bz-dots span:nth-child(1) { background: #ff5f57; } .bz-dots span:nth-child(2) { background: #febc2e; } .bz-dots span:nth-child(3) { background: #28c840; } .bz-url { flex: 1 1 auto; max-width: 460px; height: 30px; border-radius: 9999px; background: #fff; border: 1px solid #e6e9ee; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 14px; color: #475467; font-family: var(--font-urbanist); } .bz-url .ic { color: #98a2b3; } .bz-page { position: relative; width: 100%; height: calc(100% - 48px); background: #fff; overflow: hidden; } .bz-page > img.bz-site { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .widget-launcher { position: absolute; right: 26px; bottom: 26px; z-index: 6; width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--accent) 70%, transparent); } .widget-launcher.pulsing { animation: wpulse 1.1s ease-out 2; } @keyframes wpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 22px transparent; } } .widget-panel { position: absolute; right: 22px; bottom: 22px; z-index: 7; width: 384px; height: 560px; max-height: calc(100% - 44px); background: #fff; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transform-origin: bottom right; box-shadow: 0 30px 60px -20px rgba(16,24,40,0.45), 0 0 0 1px rgba(16,24,40,0.06); opacity: 0; transform: scale(0.2); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1); } #rcai-stage[data-mode="mobile"] .widget-panel { right: 10px; left: 10px; bottom: 10px; width: auto; height: calc(100% - 84px); } .widget-panel.open { opacity: 1; transform: scale(1); } .wp-header { flex: 0 0 64px; display: flex; align-items: center; gap: 11px; padding: 0 16px; background: var(--accent); color: #fff; } .wp-header .wp-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.25); } .wp-header .wp-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .wp-header .wp-name { font-size: 17px; font-weight: 700; } .wp-header .wp-status { font-size: 13px; opacity: 0.9; margin-top: 1px; } .wp-header .wp-close { margin-left: auto; color: #fff; opacity: 0.9; } .widget-panel .thread { background: #fff; } .wp-footer { flex: 0 0 32px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #98a2b3; background: #fff; border-top: 1px solid #f0f2f5; } .wp-footer b { color: #7354ef; font-weight: 700; margin-left: 4px; } /* ============================================================================ * SCENE PANEL (desktop) — headline (RIGHT) fades out, panel slides in from the * right, phone stays LEFT showing the now-scrollable conversation. (DESIGN_DOC §6) * ========================================================================== */ .headline.faded { opacity: 0; transform: translateX(26px); transition: opacity 0.55s ease, transform 0.6s ease; pointer-events: none; } .scene-panel { position: absolute; left: 560px; top: 60px; z-index: 7; width: 780px; height: 760px; background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 50px 90px -30px rgba(16,24,40,0.42), 0 0 0 1px rgba(16,24,40,0.06); opacity: 0; transform: translateX(52px) scale(0.984); transition: opacity 0.62s ease, transform 0.74s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; } .scene-panel.shown { opacity: 1; transform: none; } /* Mobile scene = full-stage panel slides up from the bottom (phone navigates). */ #rcai-stage[data-mode="mobile"] .scene-panel { left: 0; top: 0; width: 430px; height: 900px; border-radius: 0; transform: translateY(60px); } #rcai-stage[data-mode="mobile"] .scene-panel.shown { transform: none; } /* ---- ORDER scene: faithful to the REAL order-detail page (OrderCard at * /dashboard/orders/[id]): ReadyChatAI logo topbar (same .bk-topbar the booking * scene uses) → ONE white page card (12px radius, #d0d5dd border) holding the * header, the Customer Details / Checkout Information / Customer Messages * cards, and the Products table with its gray Total footer row. Flat white * cards, 1px #d0d5dd borders, NO drop shadows — Urbanist everywhere. --------- */ .ord-frame { display: flex; flex-direction: column; height: 100%; background: #fff; font-family: var(--font-urbanist); } /* Page background = the real dashboard's gray-100
, so the white page * card floats on gray like the product and the end frame never reads as an * unfinished white void. */ .ord-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 18px 12px; background: #f3f4f6; } .ord-body::-webkit-scrollbar { width: 8px; } .ord-body::-webkit-scrollbar-thumb { background: #e4e7ec; border-radius: 8px; } .ord-page { border: 1px solid #d0d5dd; border-radius: 12px; background: #fff; padding: 12px 16px; } .ord-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } .ord-reveal.shown { opacity: 1; transform: none; } /* Header: "Order ID: n" + status dropdown-pill + secondary buttons + date chips. */ .ord-header { padding-bottom: 10px; border-bottom: 1px solid #d0d5dd; } .ord-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ord-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; } .ord-title { font-size: 17px; font-weight: 700; color: #101828; white-space: nowrap; } .ord-status { display: inline-flex; align-items: center; gap: 3px; background: #F1FDFB; color: #129578; font-size: 13px; font-weight: 700; border-radius: 16px; padding: 6px 6px 6px 12px; white-space: nowrap; } .ord-status .ic { color: #129578; } .ord-actions { display: flex; gap: 8px; } .ord-btn { display: inline-flex; align-items: center; color: #585484; border: 2px solid #585484; border-radius: 12px; font-size: 12.5px; font-weight: 600; padding: 6px 12px; background: transparent; white-space: nowrap; } .ord-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ord-chip { display: inline-flex; gap: 4px; background: #f9fafb; border-radius: 5px; padding: 5px 7px; font-size: 12px; color: #101828; } .ord-chip b { font-weight: 700; } /* ---- ORDER transition-intro (DESIGN_DOC_V3 §1b/§4): a "saving → saved" card on * the RIGHT that morphs into the dashboard. Both layers stack in the surface. -- */ .ord-scene { position: relative; width: 100%; height: 100%; } .ord-morph { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.55s ease; } .ord-morph.shown { opacity: 1; } .ord-morph .ord-frame { height: 100%; } .ord-intro { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ffffff, #f6f4ff); opacity: 0; transform: scale(0.985); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1); } .ord-intro.shown { opacity: 1; transform: none; } .ord-intro.gone { opacity: 0; transform: scale(1.03); pointer-events: none; } .ord-intro-card { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 42px 48px; border-radius: 22px; background: #fff; border: 1px solid #ece8fb; box-shadow: 0 30px 64px -28px rgba(87,56,217,0.38), 0 0 0 1px rgba(16,24,40,0.03); } .ord-intro-icon { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; } .ord-intro-icon .ic { display: inline-flex; } .ord-intro-icon.done { animation: ordpop 0.42s cubic-bezier(0.22,1.4,0.4,1); } @keyframes ordpop { 0% { transform: scale(0.4); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } .ord-spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid #e7e0fb; border-top-color: var(--accent); animation: ordspin 0.85s linear infinite; } @keyframes ordspin { to { transform: rotate(360deg); } } .ord-intro-text { max-width: 300px; font-size: 20px; font-weight: 700; color: #101828; letter-spacing: -0.01em; text-align: center; } .ord-intro-text.done { color: #12805f; } /* Inner cards (Customer Details / Checkout Information / Customer Messages / * Products): rounded-md 8px, 1px #d0d5dd, 12px padding, Title Case bold titles. */ .ord-card { border: 1px solid #d0d5dd; border-radius: 8px; padding: 10px 12px; margin-top: 10px; background: #fff; } .ord-card-title { font-size: 14.5px; font-weight: 700; color: #101828; } .ord-cust { display: flex; align-items: center; gap: 12px; margin-top: 8px; } .ord-cust-av { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #9e77ed, #7f56d9); } .ord-cust-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .ord-cust-name { font-size: 15px; font-weight: 700; color: #101828; } /* Product quirk: the email line is styled with the border-gray (#d0d5dd). */ .ord-cust-email { font-size: 12.5px; color: #d0d5dd; margin-top: 2px; } .ord-grid { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; row-gap: 7px; margin-top: 10px; font-size: 13px; color: #101828; } .ord-glabel { font-weight: 700; } .ord-gval { font-weight: 400; min-width: 0; } .ord-chan { display: inline-flex; align-items: center; gap: 6px; color: #7354EF; font-weight: 600; } /* Products table: Products | ID | Quantity | Price | Total + gray footer row * (bg #f9fafb, rounded bottom corners — the product's rounded-bl/br-3xl). */ .ord-table { width: 100%; border-collapse: collapse; margin-top: 6px; } .ord-table th { text-align: left; font-size: 12.5px; font-weight: 700; color: #101828; padding: 7px 10px; border-bottom: 1px solid #d0d5dd; } .ord-table td { font-size: 13px; color: #101828; padding: 8px 10px; border-bottom: 1px solid #d0d5dd; vertical-align: middle; } .ord-prod { display: inline-flex; align-items: center; gap: 8px; } .ord-prod-img { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: #f2f4f7; display: inline-flex; align-items: center; justify-content: center; color: #d0d5dd; } .ord-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ord-trow-foot td { background: #f9fafb; border-bottom: 0; font-weight: 700; } .ord-trow-foot td:first-child { border-bottom-left-radius: 14px; } .ord-trow-foot td:last-child { border-bottom-right-radius: 14px; } /* ---- BOOKING scene: the RCAI booking page (faithful to the screenshot). ---- */ .bk-frame { display: flex; flex-direction: column; height: 100%; background: #f4f5f7; } .bk-topbar { flex: 0 0 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: #fff; border-bottom: 1px solid #eaecf0; } .bk-brand { display: inline-flex; align-items: center; } .bk-brand svg { height: 26px; width: auto; display: block; } .bk-lang { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #667085; } .bk-steps { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 0; padding: 18px 22px 6px; } .bk-step { display: flex; flex-direction: column; align-items: center; gap: 6px; } .bk-step .num { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; background: #e9eaee; color: #667085; transition: background 0.4s ease, color 0.4s ease; } .bk-step.active .num { background: #7354ef; color: #fff; } .bk-step.done .num { background: #7354ef; color: #fff; } .bk-step .lbl { font-size: 12px; font-weight: 600; color: #667085; } .bk-step.active .lbl, .bk-step.done .lbl { color: #101828; } .bk-stepline { flex: 1 1 auto; max-width: 300px; height: 2px; background: #e0e2e8; margin: 0 14px 22px; } .bk-title { text-align: center; font-size: 26px; font-weight: 800; color: #101828; letter-spacing: -0.02em; padding: 2px 22px 0; } .bk-subtitle { text-align: center; font-size: 15px; color: #667085; margin-top: 4px; } .bk-body { flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 10px; } /* Step 1 fills the frame as a flex column so its .bk-body actually constrains * and scrolls when the calendar + times overflow (mobile), and the footer * stays pinned to the bottom instead of floating mid-panel. */ .bk-fade.bk-step1 { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .bk-card-row { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.06); display: grid; grid-template-columns: 1fr 1.25fr 1fr; } .bk-col { padding: 20px 18px; } .bk-col + .bk-col { border-left: 1px solid #eef0f3; } .bk-svc-name { font-size: 20px; font-weight: 800; color: #101828; text-align: center; line-height: 1.18; } .bk-svc-cat { text-align: center; font-size: 14px; font-weight: 600; color: #667085; margin-top: 6px; } .bk-svc-dur { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 15px; font-weight: 600; color: #344054; margin-top: 16px; } .bk-svc-dur .ic { color: #344054; } .bk-svc-desc { font-size: 14px; line-height: 1.45; color: #667085; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f2f4f7; } .bk-cal-title { font-size: 18px; font-weight: 800; color: #101828; } .bk-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 8px; } .bk-cal-month { font-size: 16px; font-weight: 700; color: #101828; } .bk-cal-navs { display: flex; gap: 12px; color: #7354ef; } .bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .bk-dow { text-align: center; font-size: 12px; font-weight: 700; color: #98a2b3; padding-bottom: 6px; } .bk-day { text-align: center; font-size: 14px; color: #475467; padding: 7px 0; border-radius: 9999px; } .bk-day.muted { color: #d0d5dd; } .bk-day.pick { background: #7354ef; color: #fff; font-weight: 700; transform: scale(1.05); transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease; } .bk-times-title { font-size: 18px; font-weight: 800; color: #101828; } .bk-times-empty { font-size: 14px; color: #98a2b3; text-align: center; margin-top: 40px; line-height: 1.4; } /* position:relative so the slot-tap dot (offsetLeft/Top coords) lives in this * column's local coordinate space — correct under any embed scale. */ .bk-times { position: relative; display: flex; flex-direction: column; gap: 9px; margin-top: 14px; animation: bkFadeUp 0.45s cubic-bezier(0.22,1,0.36,1) both; } @keyframes bkFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .bk-slot { position: relative; overflow: hidden; border: 1.5px solid #d6dae1; background: #fff; color: #344054; border-radius: 10px; padding: 11px 12px; font-size: 16px; font-weight: 700; text-align: center; transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.24s cubic-bezier(0.34,1.56,0.64,1); } .bk-slot.pressed { transform: scale(0.94); } .bk-slot.sel { border-color: #7354ef; background: #7354ef; color: #fff; } .bk-continue { display: flex; justify-content: flex-end; padding: 14px 4px 6px; } .bk-continue button { border: 0; font-family: var(--font-urbanist); font-size: 16px; font-weight: 700; color: #fff; background: #c3c7cf; border-radius: 10px; padding: 12px 26px; transition: background 0.35s ease; } .bk-continue button.ready { background: #7354ef; box-shadow: 0 10px 22px -10px rgba(115,84,239,0.6); } /* margin-top:auto pins the footer to the bottom of the flex column even if a * step ever leaves free space (no-op when the step above already fills it). */ .bk-foot { flex: 0 0 auto; margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; font-size: 12px; color: #98a2b3; border-top: 1px solid #eaecf0; background: #fff; } .bk-foot .links { display: flex; gap: 16px; } /* Booking confirm step (step 2). */ .bk-confirm { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.06); padding: 30px 26px; max-width: 460px; margin: 6px auto 0; text-align: center; } .bk-confirm .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-green-bg); display: inline-flex; align-items: center; justify-content: center; } .bk-confirm .ok .ic { color: var(--ok-green); } .bk-confirm .ctitle { font-size: 24px; font-weight: 800; color: #101828; margin-top: 14px; } .bk-confirm .csvc { font-size: 19px; font-weight: 700; color: #7354ef; margin-top: 4px; } .bk-confirm .crows { text-align: left; margin: 18px auto 0; max-width: 320px; display: flex; flex-direction: column; gap: 12px; } .bk-confirm .crow { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 600; color: #344054; } .bk-confirm .crow .ic { color: #7354ef; flex: 0 0 auto; } .bk-fade { transition: opacity 0.25s ease; } .bk-fade.hide { opacity: 0; pointer-events: none; } .bk-confirm-wrap { display: none; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; } .bk-confirm-wrap.shown { opacity: 1; } /* ---- Booking end-state (task C): once the appointment is confirmed the wrap * COMPACTS — the confirm card tightens and a mini day-agenda (the booked slot * occupied among the day's slots) grows in under it, killing the dead white * space. `safe center` falls back to flex-start if a locale ever overflows. -- */ .bk-confirm { width: 100%; box-sizing: border-box; transition: padding 0.5s ease; } .bk-confirm .ok { transition: width 0.5s ease, height 0.5s ease; } .bk-confirm .ctitle { transition: font-size 0.5s ease, margin-top 0.5s ease; } .bk-confirm .crows { transition: margin-top 0.5s ease, gap 0.5s ease; } .bk-confirm-wrap.compact { justify-content: safe center; } .bk-confirm-wrap.compact .bk-confirm { padding: 20px 26px 18px; } .bk-confirm-wrap.compact .bk-confirm .ok { width: 52px; height: 52px; } .bk-confirm-wrap.compact .bk-confirm .ctitle { font-size: 21px; margin-top: 10px; } .bk-confirm-wrap.compact .bk-confirm .crows { margin-top: 12px; gap: 9px; } .bk-confirm-wrap.compact .bk-confirm .crow { font-size: 15.5px; } .bk-agenda { width: 100%; max-width: 460px; box-sizing: border-box; align-self: center; background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(16,24,40,0.06); max-height: 0; opacity: 0; transform: translateY(16px); overflow: hidden; margin-top: 0; padding: 0 18px; transition: max-height 0.65s cubic-bezier(0.22,1,0.36,1), opacity 0.5s ease 0.12s, transform 0.6s cubic-bezier(0.22,1,0.36,1), padding 0.5s ease, margin-top 0.5s ease; } .bk-agenda.shown { max-height: 340px; opacity: 1; transform: none; margin-top: 14px; padding: 15px 18px 12px; } .bk-ag-head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 800; color: #101828; padding-bottom: 10px; border-bottom: 1px solid #f2f4f7; } .bk-ag-head .ic { color: #7354ef; } .bk-ag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid #f7f8fa; font-size: 14px; } .bk-ag-row:last-child { border-bottom: 0; } .bk-ag-time { font-weight: 700; color: #475467; flex: 0 0 auto; } .bk-ag-free { color: #98a2b3; font-weight: 600; font-size: 13px; } .bk-ag-row.mine { background: #f6f4ff; border: 1px solid #e4dcfc; border-bottom: 1px solid #e4dcfc; border-radius: 10px; padding: 9px 12px; margin: 4px -6px; } .bk-ag-row.mine .bk-ag-time { color: #7354ef; } .bk-ag-slot { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: #101828; font-weight: 700; font-size: 13.5px; text-align: right; } .bk-ag-tag { flex: 0 0 auto; background: #7354ef; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 9px; letter-spacing: 0.02em; } /* ============================================================================ * KNOWLEDGE BASE scene (the "bot learns" story). DESIGN_DOC_V2 §7. * ========================================================================== */ /* Topbar = the shared ReadyChatAI-logo .bk-topbar (brandTopbarHTML), same as * the booking and order scenes. */ .kb-frame { display: flex; flex-direction: column; height: 100%; background: #fff; font-family: var(--font-urbanist); } .kb-learnbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 15.5px; font-weight: 800; color: #fff; padding: 12px 16px; background: linear-gradient(90deg, #9e77ed, #7f56d9); transition: background 0.5s ease; } .kb-learnbar.done { background: linear-gradient(90deg, #12b76a, #039855); } .kb-head { flex: 0 0 auto; padding: 16px 20px 10px; } .kb-title { font-size: 22px; font-weight: 800; color: #101828; letter-spacing: -0.02em; } .kb-tabs { display: flex; gap: 10px; margin-top: 14px; } .kb-tab { font-size: 14.5px; font-weight: 700; color: #475467; background: #f2f4f7; border-radius: 9px; padding: 7px 14px; display: inline-flex; align-items: center; gap: 7px; transition: background 0.4s ease, color 0.4s ease; } .kb-tab b { font-size: 13px; opacity: 0.9; } .kb-tab.active { background: #7f56d9; color: #fff; } .kb-body { flex: 1 1 auto; display: flex; min-height: 0; border-top: 1px solid #eaecf0; } .kb-list { flex: 0 0 244px; border-right: 1px solid #eaecf0; overflow: hidden; } .kb-qrow { display: flex; align-items: flex-start; gap: 9px; padding: 14px 15px; border-bottom: 1px solid #f2f4f7; cursor: default; transition: background 0.3s ease; } .kb-qrow.selected { background: #f6f3fe; } .kb-qrow.resolved { opacity: 0.55; } .kb-dot { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: #f5b100; margin-top: 5px; transition: opacity 0.4s ease; } .kb-qrow.resolved .kb-dot { opacity: 0; } .kb-qmeta { flex: 1 1 auto; min-width: 0; } .kb-qtext { font-size: 14px; font-weight: 600; color: #1d2939; line-height: 1.32; } .kb-qtime { font-size: 12px; color: #98a2b3; margin-top: 5px; display: flex; align-items: center; gap: 6px; } .kb-detail { flex: 1 1 auto; display: flex; flex-direction: column; padding: 18px 22px; min-width: 0; } .kb-detail-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #667085; } .kb-badge { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 700; border-radius: 8px; padding: 3px 10px; } .kb-badge.open { color: #b54708; background: rgba(247,144,9,0.14); } .kb-badge.resolved { color: #067647; background: rgba(18,183,106,0.14); } .kb-question { font-size: 19px; font-weight: 800; color: #101828; margin: 12px 0 4px; line-height: 1.28; } .kb-answer-label { font-size: 13.5px; font-weight: 700; color: #475467; margin: 16px 0 7px; } .kb-textarea { flex: 1 1 auto; min-height: 92px; border: 1.6px solid #d0d5dd; border-radius: 11px; padding: 12px 14px; font-size: 15.5px; line-height: 1.45; color: #1d2939; background: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease; white-space: pre-wrap; } .kb-textarea.typing { border-color: #7f56d9; box-shadow: 0 0 0 4px rgba(127,86,217,0.12); } .kb-caret { display: inline-block; width: 2px; height: 18px; background: #7f56d9; vertical-align: -3px; margin-left: 1px; animation: kbBlink 1s steps(1) infinite; } @keyframes kbBlink { 50% { opacity: 0; } } .kb-actions { display: flex; justify-content: flex-end; margin-top: 14px; } .kb-send { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-urbanist); font-size: 15.5px; font-weight: 800; color: #fff; background: #7f56d9; border: 0; border-radius: 11px; padding: 11px 22px; cursor: pointer; opacity: 0.55; transition: opacity 0.3s ease, transform 0.15s ease, box-shadow 0.3s ease; } .kb-send.ready { opacity: 1; box-shadow: 0 10px 22px -10px rgba(127,86,217,0.7); } .kb-send.pressed { transform: scale(0.96); } /* "El bot aprende" learned pill inside the phone thread (conv 2 lead-in). */ .learn-pill { align-self: center; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #7f56d9; background: rgba(127,86,217,0.1); border-radius: 12px; padding: 8px 14px; margin: 6px 0; } /* Mobile scene tweaks: stack the booking 3-col into one column. */ #rcai-stage[data-mode="mobile"] .bk-card-row { grid-template-columns: 1fr; } #rcai-stage[data-mode="mobile"] .kb-body { flex-direction: column; } #rcai-stage[data-mode="mobile"] .kb-list { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid #eaecf0; } #rcai-stage[data-mode="mobile"] .bk-col + .bk-col { border-left: 0; border-top: 1px solid #eef0f3; } #rcai-stage[data-mode="mobile"] .scene-panel { z-index: 9; } #rcai-stage[data-mode="mobile"] .bk-frame, #rcai-stage[data-mode="mobile"] .ord-frame { padding-top: 0; } /* Order page on the 430px viewport: drop the least-informative bits so the * 5-column table + header still breathe (mirrors how the product overflows). */ #rcai-stage[data-mode="mobile"] .ord-col-id { display: none; } #rcai-stage[data-mode="mobile"] .ord-chip-upd { display: none; } #rcai-stage[data-mode="mobile"] .ord-actions { display: none; } #rcai-stage[data-mode="mobile"] .ord-table th, #rcai-stage[data-mode="mobile"] .ord-table td { padding: 8px 6px; } /* ============================================================================ * REDUCED MOTION — compose the full static end frame (thread + scene end state). * ========================================================================== */ @media (prefers-reduced-motion: reduce) { .row, .center-pill, .feed, .scene-panel, .headline, .ord-reveal, #phone, .widget-panel, .cta-btn, .bk-day, .bk-slot, .bk-step .num, .ord-intro, .ord-morph, .tap-dot, .bk-confirm, .bk-agenda { transition: none !important; } .msg.typing span, .composer-typed::after, .ord-spin, .ord-intro-icon.done, .tap-ripple.go { animation: none !important; } .widget-launcher.pulsing { animation: none !important; } }