/*---------- Deal Flow ----------*/ .deal-flow { /* All custom properties live on .deal-flow itself (not :root), so nothing here is added to your site's global scope. --df-rem replaces the old `html { font-size: clamp(...) }` rule — it scales off THIS WIDGET's own width (via container queries), not the page viewport or the root font-size, so it can't affect anything else on your page and behaves correctly no matter where you drop it in. */ --df-rem: clamp(9px, 2.7cqi, 51px); container-type: inline-size; container-name: deal-flow; --df-primary: #00b48a; --df-primary-soft: rgba(0, 180, 138, 0.18); --df-primary-glow: rgba(0, 180, 138, 0.35); --df-bg: #f5f8fa; --df-white: #ffffff; --df-border: #e5e7eb; --df-graph-bg: #f9fafb; --df-graph-line: #9ca3af; --df-text: #111827; --df-muted: #6b7280; --df-badge-bg: #f3f4f6; --df-shadow-card: 0 calc(var(--df-rem) * 0.125) calc(var(--df-rem) * 0.25) rgba(0, 0, 0, 0.05); --df-shadow-brain: 0 calc(var(--df-rem) * 0.125) calc(var(--df-rem) * 0.1875) rgba(0, 0, 0, 0.08); --df-shadow-top: 0 calc(var(--df-rem) * 0.375) calc(var(--df-rem) * 1) rgba(0, 180, 138, 0.22); --df-radius-card: calc(var(--df-rem) * 0.75); --df-radius-pill: 999px; --df-ease: cubic-bezier(0.4, 0, 0.2, 1); --df-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --df-ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; width: 100%; max-width: calc(var(--df-rem) * 34.6875); aspect-ratio: 1900 / 616; /* background: var(--df-bg); */ border-radius: calc(var(--df-rem) * 1); overflow: hidden; isolation: isolate; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--df-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @container deal-flow (min-width: 640px) { .deal-flow { --df-rem: clamp(11px, 1.9cqi, 16px); } } @container deal-flow (min-width: 1024px) { .deal-flow { --df-rem: 16px; } } /* Fallback for browsers without container query support (Safari < 16, older Chrome/Firefox): falls back to viewport-based scaling instead of container-based. Still fully scoped to .deal-flow, never touches html/body. */ @supports not (container-type: inline-size) { .deal-flow { --df-rem: clamp(9px, 2.7vw, 16px); } @media (min-width: 640px) { .deal-flow { --df-rem: clamp(11px, 1.9vw, 16px); } } @media (min-width: 1024px) { .deal-flow { --df-rem: 16px; } } } .deal-flow__grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(0, 180, 138, 0.08) calc(var(--df-rem) * 0.0625), transparent calc(var(--df-rem) * 0.0625)), linear-gradient(to bottom, rgba(0, 180, 138, 0.06) calc(var(--df-rem) * 0.0625), transparent calc(var(--df-rem) * 0.0625)); background-size: calc(var(--df-rem) * 1.5) calc(var(--df-rem) * 1.5); background-position: calc(var(--df-rem) * -0.0625) calc(var(--df-rem) * -0.0625); } .deal-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; } .deal-flow__line { fill: none; stroke: var(--df-primary); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0; filter: drop-shadow(0 0 calc(var(--df-rem) * 0.125) var(--df-primary-glow)); transition: stroke-dashoffset 0.7s var(--df-ease-out), opacity 0.25s var(--df-ease); } .deal-flow.is-line-1 .deal-flow__line--1, .deal-flow.is-line-2 .deal-flow__line--2, .deal-flow.is-line-3 .deal-flow__line--3 { opacity: 1; stroke-dashoffset: 0; } .deal-flow__brain { position: absolute; left: calc(var(--df-rem) * 1.5); top: calc(var(--df-rem) * 1.5625); width: calc(var(--df-rem) * 6.875); height: calc(var(--df-rem) * 6.875); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--df-rem) * 0.5); z-index: 4; } .deal-flow__brain-badge { display: inline-flex; align-items: center; gap: calc(var(--df-rem) * 0.375); background: var(--df-primary); color: var(--df-white); padding: calc(var(--df-rem) * 0.25) calc(var(--df-rem) * 0.5); border-radius: var(--df-radius-pill); box-shadow: var(--df-shadow-brain); opacity: 0; transform: translateY(calc(var(--df-rem) * -0.375)) scale(0.9); transition: opacity 0.4s var(--df-ease-out), transform 0.5s var(--df-ease-pop); white-space: nowrap; } .deal-flow.is-brain-badge .deal-flow__brain-badge { opacity: 1; transform: translateY(0) scale(1); } .deal-flow__brain-badge-icon { width: calc(var(--df-rem) * 0.75); height: calc(var(--df-rem) * 0.75); flex-shrink: 0; } .deal-flow__brain-badge-text { font-size: calc(var(--df-rem) * 0.75); font-weight: 700; line-height: 1; color: var(--df-white); } .deal-flow__brain-node { width: calc(var(--df-rem) * 4.5); height: calc(var(--df-rem) * 4.5); display: grid; place-items: center; background: var(--df-white); border: calc(var(--df-rem) * 0.0625) solid var(--df-border); border-radius: 50%; box-shadow: var(--df-shadow-card); opacity: 0; transform: scale(0.6); transition: opacity 0.35s var(--df-ease-out), transform 0.5s var(--df-ease-pop), box-shadow 0.4s var(--df-ease); } .deal-flow.is-brain-node .deal-flow__brain-node { opacity: 1; transform: scale(1); } .deal-flow.is-processing .deal-flow__brain-node { animation: df-brain-pulse 1.6s var(--df-ease) infinite; } @keyframes df-brain-pulse { 0%, 100% { box-shadow: var(--df-shadow-card), 0 0 0 0 var(--df-primary-soft); } 50% { box-shadow: var(--df-shadow-card), 0 0 0 calc(var(--df-rem) * 0.5) transparent; } } .deal-flow__brain-icon { width: calc(var(--df-rem) * 1.75); height: calc(var(--df-rem) * 1.75); color: var(--df-primary); } .deal-flow__cards { position: absolute; left: calc(var(--df-rem) * 10.125); top: calc(var(--df-rem) * 1.6875); right: calc(var(--df-rem) * 0.5); display: flex; gap: calc(var(--df-rem) * 0.75); align-items: flex-start; z-index: 3; } .deal-flow__card { flex: 1 1 0; min-width: 0; background: var(--df-white); border: calc(var(--df-rem) * 0.0625) solid var(--df-border); border-radius: var(--df-radius-card); padding: calc(var(--df-rem) * 0.625); display: flex; flex-direction: column; gap: calc(var(--df-rem) * 0.5); box-shadow: var(--df-shadow-card); opacity: 0; transform: translateY(calc(var(--df-rem) * 0.5)); transition: opacity 0.45s var(--df-ease-out), transform 0.5s var(--df-ease-pop), border-color 0.35s var(--df-ease), box-shadow 0.4s var(--df-ease); will-change: transform, opacity; } .deal-flow__card--top { flex: 1.4 1 0; } .deal-flow.is-card-3 .deal-flow__card[data-card="3"], .deal-flow.is-card-2 .deal-flow__card[data-card="2"], .deal-flow.is-card-1 .deal-flow__card[data-card="1"] { opacity: 1; transform: translateY(0); } .deal-flow.is-top-match .deal-flow__card--top { border-color: var(--df-primary); box-shadow: var(--df-shadow-top); animation: df-top-pop 0.7s var(--df-ease-pop); } @keyframes df-top-pop { 0% { transform: translateY(0) scale(1); } 45% { transform: translateY(0) scale(1.06); } 100% { transform: translateY(0) scale(1); } } .deal-flow__card-header { display: flex; align-items: center; gap: calc(var(--df-rem) * 0.25); justify-content: space-between; min-width: 0; } .deal-flow__card-name { font-size: calc(var(--df-rem) * 0.6875); font-weight: 700; color: var(--df-text); line-height: 1; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .deal-flow__card-badge { position: relative; display: inline-grid; align-items: center; padding: calc(var(--df-rem) * 0.1875) calc(var(--df-rem) * 0.4375); border-radius: var(--df-radius-pill); background: var(--df-badge-bg); line-height: 1; flex-shrink: 0; opacity: 0; transform: scale(0.85); transition: opacity 0.35s var(--df-ease-out), transform 0.4s var(--df-ease-pop), background-color 0.35s var(--df-ease); } .deal-flow.is-top-match .deal-flow__card-badge { opacity: 1; transform: scale(1); } .deal-flow__card-badge-percent, .deal-flow__card-badge-match { grid-area: 1 / 1; font-size: calc(var(--df-rem) * 0.625); font-weight: 800; color: var(--df-text); white-space: nowrap; transition: opacity 0.3s var(--df-ease); } .deal-flow__card-badge-match { opacity: 0; color: var(--df-white); } .deal-flow.is-top-match .deal-flow__card--top .deal-flow__card-badge { background: var(--df-primary); } .deal-flow.is-top-match .deal-flow__card--top .deal-flow__card-badge-percent { opacity: 0; } .deal-flow.is-top-match .deal-flow__card--top .deal-flow__card-badge-match { opacity: 1; } .deal-flow__card-graph { position: relative; height: calc(var(--df-rem) * 2.75); background: var(--df-graph-bg); border: calc(var(--df-rem) * 0.0625) solid var(--df-border); border-radius: calc(var(--df-rem) * 0.5); overflow: hidden; } .deal-flow__card-graph::before, .deal-flow__card-graph::after { content: ''; position: absolute; left: calc(var(--df-rem) * -0.0625); right: calc(var(--df-rem) * -0.0625); height: calc(var(--df-rem) * 0.0625); background: var(--df-border); } .deal-flow__card-graph::before { top: calc(var(--df-rem) * 0.8125); } .deal-flow__card-graph::after { top: calc(var(--df-rem) * 1.6875); } .deal-flow__card-sparkline { position: absolute; inset: calc(var(--df-rem) * 0.3125) calc(var(--df-rem) * 0.3125); width: calc(100% - var(--df-rem) * 0.625); height: calc(100% - var(--df-rem) * 0.625); overflow: visible; z-index: 1; } .deal-flow__card-sparkline path { fill: none; stroke: var(--df-graph-line); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 0.9s var(--df-ease-out), stroke 0.35s var(--df-ease); } .deal-flow.is-card-3 .deal-flow__card[data-card="3"] .deal-flow__card-sparkline path, .deal-flow.is-card-2 .deal-flow__card[data-card="2"] .deal-flow__card-sparkline path, .deal-flow.is-card-1 .deal-flow__card[data-card="1"] .deal-flow__card-sparkline path { stroke-dashoffset: 0; } .deal-flow.is-top-match .deal-flow__card--top .deal-flow__card-sparkline path { stroke: var(--df-primary); stroke-width: 1.5; } .deal-flow__card-score { display: flex; flex-direction: column; gap: calc(var(--df-rem) * 0.25); } .deal-flow__card-score-row { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--df-rem) * 0.625); line-height: 1; } .deal-flow__card-score-label { color: var(--df-muted); font-weight: 400; } .deal-flow__card-score-value { color: var(--df-primary); font-weight: 800; font-variant-numeric: tabular-nums; } .deal-flow__card-bar { height: calc(var(--df-rem) * 0.375); background: var(--df-border); border-radius: var(--df-radius-pill); overflow: hidden; } .deal-flow__card-bar-fill { height: 100%; width: 0; background: var(--df-primary); border-radius: inherit; transition: width 0.9s var(--df-ease-out); } @media (prefers-reduced-motion: reduce) { .deal-flow__card, .deal-flow__brain-node, .deal-flow__brain-badge, .deal-flow__line, .deal-flow__card-sparkline path, .deal-flow__card-bar-fill, .deal-flow__card-badge, .deal-flow__card-badge-percent, .deal-flow__card-badge-match { transition-duration: 0.01ms !important; animation: none !important; } .deal-flow__card, .deal-flow__brain-node, .deal-flow__brain-badge { opacity: 1; transform: none; } .deal-flow__line { opacity: 1; stroke-dashoffset: 0; } .deal-flow__card-sparkline path { stroke-dashoffset: 0; } } .deal-flow__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /*---------- End Deal Flow ----------*/ /*---------- Intelligence ----------*/ :root { --color-brand: #00b48a; --color-brand-soft: #dcfce7; --color-brand-bg: #f0fdf4; --color-ink: #374151; --color-muted: #6b7280; --color-border: #e5e7eb; --color-skeleton: #d1d9d6; --color-surface: #ffffff; --color-canvas: #f8fafc; --avatar-blue-bg: #dbeafe; --avatar-blue-fg: #1d4ed8; --avatar-pink-bg: #fce7f3; --avatar-pink-fg: #be185d; --avatar-amber-bg: #fef3c7; --avatar-amber-fg: #b45309; --avatar-purple-bg: #ede9fe; --avatar-purple-fg: #6d28d9; --avatar-mint-bg: #d1fae5; --avatar-mint-fg: #00b48a; --radius-card: 0.375rem; --radius-lg: 0.75rem; --radius-pill: 999rem; --shadow-tag: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.08); --fs-tag: clamp(0.75rem, 0.6rem + 0.4vw, 0.875rem); --fs-col: clamp(0.625rem, 0.5rem + 0.35vw, 0.75rem); --fs-badge: clamp(0.5rem, 0.4rem + 0.25vw, 0.625rem); --dur-col: 0.5s; --dur-tag: 0.6s; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------- Responsive wrapper ---------- The wrap owns the responsive footprint (up to 341x180), the inner .pipeline keeps its intrinsic design size and is transform-scaled to fit. */ .pipeline-wrap { position: relative; width: 100%; max-width: 39.683rem; /* 341px */ aspect-ratio: 600 / 317; } /* ---------- Illustration container ---------- */ .pipeline { position: absolute; inset: 0; background: transparent; border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; align-items: center; transform-origin: top left; /* transform: scale(var(--pipe-scale, 1)); */ } /* ---------- Grid background ---------- */ .pipeline__grid { position: absolute; inset: 0; background-image: repeating-linear-gradient( to bottom, transparent 0, transparent 1.125rem, rgba(15, 23, 42, 0.06) 1.125rem, rgba(15, 23, 42, 0.06) 1.1875rem ); pointer-events: none; } /* ---------- AI tag ---------- */ .ai-tag { position: relative; z-index: 2; margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; background: var(--color-brand); border-radius: var(--radius-pill); box-shadow: var(--shadow-tag); color: #fff; font-weight: 700; font-size: var(--fs-tag); line-height: 1; white-space: nowrap; opacity: 0; transform: scale(0.6); transform-origin: center; } .ai-tag.is-visible { animation: tag-pop var(--dur-tag) var(--ease-out) forwards; } .ai-tag__icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .ai-tag__spark { display: inline-flex; align-items: center; gap: 0.1875rem; } .ai-tag__spark span { display: block; width: 0.25rem; height: 0.25rem; border-radius: 999rem; background: rgba(255, 255, 255, 0.9); } .ai-tag__spark span:nth-child(2) { opacity: 0.75; } .ai-tag__spark span:nth-child(3) { opacity: 0.55; } .ai-tag__spark span:nth-child(4) { opacity: 0.4; } .ai-tag__spark span:nth-child(5) { opacity: 0.25; } /* ---------- Board ---------- */ .board { position: relative; z-index: 1; flex: 1 0 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0.5rem 0.25rem 0.5rem; gap: 0; } .board__col { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.25rem 0.25rem; min-width: 0; opacity: 0; transform: translateY(0.5rem); border-left: 0.0625rem solid var(--color-border); } .board__col:first-child { border-left: 0; } .board__col.is-visible { animation: col-in var(--dur-col) var(--ease-out) forwards; } /* ---------- Column header ---------- */ .col-head { display: flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.25rem; } .col-head__title { margin: 0; font-size: var(--fs-col); font-weight: 700; letter-spacing: 0.02em; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .col-head__count { display: inline-flex; align-items: center; justify-content: center; width: 0.875rem; height: 0.875rem; border-radius: 0.4375rem; background: var(--color-border); color: var(--color-muted); font-size: var(--fs-badge); font-weight: 700; } .col-head__count--brand { background: var(--color-brand-soft); color: var(--color-brand); } /* ---------- Lead card ---------- */ .lead { background: var(--color-surface); border: 0.0625rem solid var(--color-border); border-radius: var(--radius-card); padding: 0.3125rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out); } .lead--highlight { border-color: var(--color-brand); } .lead--won { background: var(--color-brand-bg); border-color: var(--color-brand); } .lead__row { display: flex; align-items: center; gap: 0.25rem; } .lead__meta { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; } .avatar { width: 1rem; height: 1rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-badge); font-weight: 700; flex-shrink: 0; transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out); } .avatar--blue { background: var(--avatar-blue-bg); color: var(--avatar-blue-fg); } .avatar--pink { background: var(--avatar-pink-bg); color: var(--avatar-pink-fg); } .avatar--amber { background: var(--avatar-amber-bg); color: var(--avatar-amber-fg); } .avatar--purple { background: var(--avatar-purple-bg); color: var(--avatar-purple-fg); } .avatar--mint { background: var(--avatar-mint-bg); color: var(--avatar-mint-fg); } .avatar--brand { background: var(--color-brand); color: #fff; } .skeleton { height: 0.375rem; background: var(--color-skeleton); border-radius: 0.1875rem; flex: 0 0 auto; } .skeleton--w1 { width: 1.75rem; } .skeleton--w2 { width: 1.375rem; } .skeleton--w3 { width: 1.625rem; } .skeleton--w4 { width: 1.875rem; } .skeleton--w5 { width: 1.5rem; } .skeleton--w6 { width: 1.5625rem; } .score { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0.0625rem 0.25rem; background: var(--color-brand-soft); color: var(--color-brand); border-radius: 0.25rem; font-size: var(--fs-badge); font-weight: 700; line-height: 1; } .score__dot { width: 0.25rem; height: 0.25rem; border-radius: 999rem; background: currentColor; } .won-badge { display: inline-flex; align-items: center; padding: 0.0625rem 0.25rem; background: var(--color-brand); color: #fff; border-radius: 0.25rem; font-size: calc(var(--fs-badge) * 0.6); font-weight: 700; letter-spacing: 0.05em; opacity: 0; transform: scale(0.5); } .won-badge.is-visible { animation: tag-pop 0.45s var(--ease-out) forwards; } /* ---------- Keyframes ---------- */ @keyframes col-in { to { opacity: 1; transform: translateY(0); } } @keyframes tag-pop { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .board__col, .ai-tag, .won-badge { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Mobile scaling is handled by transform on .pipeline (see JS). */ /*---------- End Intelligence ----------*/ /*---------------------Crossfunctional Analytics---------------*/ :root { --chart-base-w: 21.375rem; /* 342px */ --chart-base-h: 11.25rem; /* 180px */ --chart-scale: 1; --color-grid: #e5e7eb; --color-historical: #d1d5db; --color-forecast: #00b48a; --color-primary-500: #00b48a; --color-text: #192530; --color-white: #ffffff; --color-white-90: rgba(255, 255, 255, 0.9); --radius-card: 0.625rem; /* 10px */ --radius-pill: 62.4375rem; /* 999px */ --shadow-badge: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.08); --shadow-card: 0.25rem 0.5rem 0.5rem 0 rgba(0, 0, 0, 0.03); --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fs-badge: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); --fs-card: clamp(0.625rem, 0.6rem + 0.15vw, 0.6875rem); --dur-line: 1.2s; --dur-fade: 0.35s; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } .chart { position: relative; width: 100%; max-width: 39.683rem; aspect-ratio: 600 / 317; overflow: hidden; border-radius: 0.75rem; /* background: #f6f7f9; */ } .chart__stage { position: absolute; inset: 0; /* width: var(--chart-base-w); height: var(--chart-base-h); transform: scale(var(--chart-scale)); */ transform-origin: top left; background: transparent; } /* SVG chart canvas */ .chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .chart__grid-line { stroke: var(--color-grid); stroke-width: 1; vector-effect: non-scaling-stroke; } /* Historical (gray solid) line — stroke-dashoffset draw */ .chart__line--historical { fill: none; stroke: var(--color-historical); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-line) var(--ease-out); } .chart__stage.is-hist .chart__line--historical { stroke-dashoffset: 0; } /* Historical dots — fade in staggered along with the line */ .chart__dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out); } .chart__stage.is-hist .chart__dot--gray-1 { transition-delay: 0.15s; opacity: 1; transform: scale(1); } .chart__stage.is-hist .chart__dot--gray-2 { transition-delay: 0.35s; opacity: 1; transform: scale(1); } .chart__stage.is-hist .chart__dot--gray-3 { transition-delay: 0.55s; opacity: 1; transform: scale(1); } .chart__stage.is-hist .chart__dot--gray-4 { transition-delay: 0.75s; opacity: 1; transform: scale(1); } .chart__stage.is-hist .chart__dot--gray-5 { transition-delay: 0.95s; opacity: 1; transform: scale(1); } .chart__stage.is-hist .chart__dot--gray-6 { transition-delay: 1.15s; opacity: 1; transform: scale(1); } /* Forecast (green dashed) line — clip-path wipe */ .chart__forecast { clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-line) var(--ease-out); } .chart__stage.is-forecast .chart__forecast { clip-path: inset(0 0 0 0); } .chart__line--forecast { fill: none; stroke: var(--color-forecast); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 4; } /* Green highlight dot */ .chart__dot--green { fill: var(--color-forecast); stroke: var(--color-white); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-bounce); } .chart__stage.is-dot .chart__dot--green { opacity: 1; transform: scale(1); } /* AI Forecast badge (top-left) */ .chart__badge { position: absolute; top: 0.75rem; /* 12px */ left: 0; display: inline-flex; align-items: center; gap: 0.375rem; /* 6px */ padding: 0.25rem 0.5rem; background: var(--color-primary-500); color: var(--color-white); border-radius: var(--radius-pill); filter: drop-shadow(var(--shadow-badge)); opacity: 0; transform: scale(0.6); transform-origin: left center; transition: opacity 0.3s var(--ease-out), transform 0.5s var(--ease-bounce); } .chart__stage.is-badge .chart__badge { opacity: 1; transform: scale(1); animation: badgePulse 0.9s var(--ease-out) 0.5s 1; } @keyframes badgePulse { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } } .chart__badge-icon { width: 0.75rem; height: 0.75rem; flex-shrink: 0; display: block; } .chart__badge-text { font-size: var(--fs-badge); font-weight: 700; line-height: 1; white-space: nowrap; } /* Pattern detected card (top center) */ .chart__card { position: absolute; top: 1.1875rem; /* 19px */ left: 6.79rem; /* ~108.67px */ display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; background: var(--color-white-90); border: 0.0625rem solid var(--color-primary-500); border-radius: var(--radius-card); box-shadow: var(--shadow-card); backdrop-filter: blur(2px); opacity: 0; transform: translateY(-0.375rem) scale(0.94); transition: opacity var(--dur-fade) var(--ease-out), transform 0.45s var(--ease-bounce); pointer-events: none; } .chart__stage.is-card .chart__card { opacity: 1; transform: translateY(0) scale(1); } .chart__card-icon { width: 0.875rem; height: 0.875rem; flex-shrink: 0; display: block; color: var(--color-forecast); } .chart__card-text { font-size: var(--fs-card); font-weight: 600; color: var(--color-text); line-height: 1.2; max-width: 6.0625rem; /* 97px */ } @media (prefers-reduced-motion: reduce) { .chart__stage, .chart__stage * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /*-------------------- End Crossfunctional Analytics----------*/ /*-------------------- Financial Ops — Automation Flow----------*/ :root { /* Palette */ --fo-border: #e5e7eb; --fo-text: #192530; --fo-accent: #00b48a; --fo-grid: rgba(25, 37, 48, 0.06); --fo-card-bg: #ffffff; /* Typography */ --fo-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fo-fs: clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem); --fo-fs-fixed: 0.6875rem; /* inside scaled stage */ /* Layout */ --fo-w: 21.375rem; --fo-h: 11.25rem; --fo-radius-card: 0.75rem; --fo-radius-pill: 62.4375rem; --fo-pad: 1rem; --fo-pad-inner: 0.625rem 0.75rem; --fo-gap: 0.625rem; --fo-gap-sm: 0.5rem; --fo-gap-xs: 0.375rem; --fo-pill-py: 0.375rem; --fo-pill-px: 0.625rem; --fo-icon: 0.875rem; --fo-icon-sm: 0.75rem; /* Overlaps — JS overrides these post-measure */ --fo-overlap-2: -5.5rem; --fo-overlap-3: -4.5rem; /* Animation */ --fo-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --fo-dur: 0.55s; /* Scaling */ --fo-scale: 1; } .fo { font-family: var(--fo-font); color: var(--fo-text); width: 100%; max-width: 39.683rem; aspect-ratio: 600 / 317; position: relative; } .fo__stage { position: absolute; inset: 0; /* width: var(--fo-w); height: var(--fo-h); transform: scale(var(--fo-scale)); transform-origin: top left; */ font-size: var(--fo-fs-fixed); /* fixed inside scaled stage */ } .fo__frame { position: relative; width: 100%; height: 100%; background: transparent; border: 0.0625rem solid var(--fo-border); border-radius: var(--fo-radius-card); overflow: hidden; } .fo__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--fo-grid) 0.0625rem, transparent 0.0625rem), linear-gradient(to bottom, var(--fo-grid) 0.0625rem, transparent 0.0625rem); background-size: 4.25rem 1.25rem; pointer-events: none; } .fo__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--fo-gap); padding: var(--fo-pad); } .fo__title { margin: 0; font-weight: 700; font-size: var(--fo-fs-fixed); color: var(--fo-text); line-height: 1; opacity: 0; transform: translateY(-0.25rem); animation: fo-fade-down var(--fo-dur) var(--fo-ease) forwards; animation-delay: 0.05s; } /* Overlapping chips */ .fo__flow { display: flex; align-items: center; justify-content: center; } .fo__pill { display: inline-flex; align-items: center; gap: var(--fo-gap-xs); background: var(--fo-card-bg); border: 0.0625rem solid var(--fo-border); border-radius: var(--fo-radius-pill); padding: var(--fo-pill-py) var(--fo-pill-px); line-height: 1; opacity: 0; transform: scale(0.7); position: relative; } .fo__pill--1 { z-index: 1; } .fo__pill--2 { margin-left: var(--fo-overlap-2); z-index: 2; } .fo__pill--3 { margin-left: var(--fo-overlap-3); z-index: 3; background: var(--fo-accent); border-color: var(--fo-accent); color: #fff; } .fo__pill-label { font-weight: 600; font-size: var(--fo-fs-fixed); color: var(--fo-text); white-space: nowrap; } .fo__pill--3 .fo__pill-label { color: #fff; font-weight: 700; } .fo__icon { width: var(--fo-icon); height: var(--fo-icon); display: block; flex: 0 0 auto; } /* Metrics — fit content */ .fo__metrics { display: flex; flex-direction: column; gap: var(--fo-gap-sm); background: var(--fo-card-bg); border: 0.0625rem solid var(--fo-border); border-radius: var(--fo-radius-card); padding: var(--fo-pad-inner); width: max-content; max-width: 100%; align-self: center; opacity: 0; transform: translateY(0.5rem); } .fo__metric { display: flex; align-items: center; justify-content: space-between; gap: 1rem; opacity: 0; transform: translateX(-0.25rem); } .fo__metric-label { font-weight: 600; font-size: var(--fo-fs-fixed); color: var(--fo-text); line-height: 1; white-space: nowrap; } .fo__metric-value { display: inline-flex; align-items: center; gap: var(--fo-gap-xs); line-height: 1; } .fo__metric-number { font-weight: 800; font-size: var(--fo-fs-fixed); color: var(--fo-accent); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } .fo__trend { width: var(--fo-icon-sm); height: var(--fo-icon-sm); display: block; flex: 0 0 auto; color: var(--fo-accent); } /* Steps */ .fo[data-step="1"] .fo__pill--1, .fo[data-step="2"] .fo__pill--1, .fo[data-step="2"] .fo__pill--2, .fo[data-step="3"] .fo__pill--1, .fo[data-step="3"] .fo__pill--2, .fo[data-step="3"] .fo__pill--3, .fo[data-step="4"] .fo__pill--1, .fo[data-step="4"] .fo__pill--2, .fo[data-step="4"] .fo__pill--3, .fo[data-step="5"] .fo__pill--1, .fo[data-step="5"] .fo__pill--2, .fo[data-step="5"] .fo__pill--3, .fo[data-step="6"] .fo__pill--1, .fo[data-step="6"] .fo__pill--2, .fo[data-step="6"] .fo__pill--3 { animation: fo-pop var(--fo-dur) var(--fo-ease) forwards; } .fo[data-step="4"] .fo__metrics, .fo[data-step="5"] .fo__metrics, .fo[data-step="6"] .fo__metrics { animation: fo-fade-up var(--fo-dur) var(--fo-ease) forwards; } .fo[data-step="5"] .fo__metric--1, .fo[data-step="6"] .fo__metric--1, .fo[data-step="6"] .fo__metric--2 { animation: fo-slide-in 0.4s var(--fo-ease) forwards; } @keyframes fo-fade-down { to { opacity: 1; transform: translateY(0); } } @keyframes fo-pop { 0% { opacity: 0; transform: scale(0.7); } 60% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes fo-fade-up { to { opacity: 1; transform: translateY(0); } } @keyframes fo-slide-in { to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .fo *, .fo *::before, .fo *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; } } /* Demo shell */ .demo { /* background: #f4f6f8; */ font-family: var(--fo-font); font-size: var(--fo-fs); } .demo__box { width: 100%; max-width: 39.683rem; } /*-------------------- End Financial Ops — Automation Flow----------*/ /*-------------------- AI Development Illustration----------*/ :root { --aidev-color-primary: #00b48a; --aidev-color-primary-soft: rgba(0, 180, 138, 0.1); --aidev-color-primary-border: rgba(0, 180, 138, 0.2); --aidev-color-primary-glow: rgba(34, 197, 94, 0.4); --aidev-color-primary-glow-soft: rgba(34, 197, 94, 0.2); --aidev-color-dark-panel: #284256; --aidev-color-dark-panel-topbar: #192530; --aidev-color-dark-code-bg: #0b1220; --aidev-color-text-dark: #070707; --aidev-color-text-muted: #9ca3af; --aidev-color-text-light: #e5e7eb; --aidev-color-text-header: #111827; --aidev-color-topbar-light: #374151; --aidev-color-border-light: #e5e7eb; --aidev-color-white: #ffffff; --aidev-color-bg: #F5F8FA; --aidev-color-grid: rgba(17, 24, 39, 0.06); --aidev-font-body: 'Inter', system-ui, -apple-system, sans-serif; --aidev-font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace; --aidev-radius-pill: 999rem; --aidev-radius-panel: 0.625rem; --aidev-radius-chip: 0.5rem; --aidev-radius-container: 0.75rem; --aidev-radius-highlight: 0.375rem; --aidev-shadow-badge: 0 0.25rem 0.75rem rgba(17, 24, 39, 0.12), 0 0.125rem 0.25rem rgba(17, 24, 39, 0.08); --aidev-shadow-badge-primary: 0 0.375rem 1rem rgba(0, 180, 138, 0.35), 0 0.125rem 0.375rem rgba(0, 180, 138, 0.2); --aidev-shadow-ai-glow: 0 0 0.5625rem var(--aidev-color-primary-glow-soft), 0 0 0.3125rem var(--aidev-color-primary-glow); --aidev-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --aidev-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============ Scale wrapper (keeps aspect ratio, scales down proportionally) ============ */ .aidev-stage { width: 100%; display: flex; justify-content: center; align-items: flex-start; } .aidev-stage__sizer { position: relative; /* width and height are set by JS to the scaled aidev-illustration size, so the aidev-illustration occupies exactly the right layout space at every viewport */ } .aidev-stage__content { position: absolute; top: 0; left: 0; transform-origin: top left; /* transform (scale) is set by JS based on available width */ will-change: transform; } /* ============ Illustration container ============ */ .aidev-illustration { position: relative; width: 34.6875rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem; padding: 1.5rem 1.25rem; border-radius: var(--aidev-radius-container); overflow: hidden; /* background: var(--aidev-color-bg); */ isolation: isolate; } .aidev-illustration__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--aidev-color-grid) 0.0625rem, transparent 0.0625rem), linear-gradient(90deg, var(--aidev-color-grid) 0.0625rem, transparent 0.0625rem); background-size: 1.5rem 1.5rem; mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 80%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 80%); pointer-events: none; } /* ============ Metrics badges row ============ */ .aidev-metrics { position: relative; z-index: 2; display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: center; justify-content: center; width: 100%; } .aidev-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: var(--aidev-radius-pill); background: var(--aidev-color-white); color: var(--aidev-color-text-header); font-family: var(--aidev-font-body); font-weight: 700; font-size: 0.75rem; line-height: 1; white-space: nowrap; opacity: 0; transform: translateY(-0.375rem) scale(0.9); transform-origin: center; box-shadow: var(--aidev-shadow-badge); position: relative; z-index: 1; } .aidev-badge--primary { background: var(--aidev-color-primary); color: var(--aidev-color-white); box-shadow: var(--aidev-shadow-badge-primary); z-index: 3; } .aidev-badge__icon { width: 0.875rem; height: 0.875rem; display: block; flex-shrink: 0; color: var(--aidev-color-primary); } .aidev-badge--primary .aidev-badge__icon { color: var(--aidev-color-white); } /* ============ Editor aidev-scene ============ */ .aidev-scene { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; } .aidev-panel { display: flex; flex-direction: column; width: 13.75rem; height: 8rem; border-radius: var(--aidev-radius-panel); border: 0.0625rem solid var(--aidev-color-border-light); overflow: hidden; flex-shrink: 0; opacity: 0; transform: translateY(0.5rem) scale(0.97); box-shadow: 0 0.5rem 1.5rem rgba(17, 24, 39, 0.08); } .aidev-panel--raw { background: var(--aidev-color-dark-panel); } .aidev-panel--ai { background: var(--aidev-color-white); border-color: var(--aidev-color-primary); box-shadow: 0 0.5rem 1.5rem rgba(0, 180, 138, 0.15); } .aidev-panel__topbar { display: flex; align-items: center; justify-content: space-between; height: 1.5rem; padding: 0 0.625rem; border-bottom: 0.0625rem solid var(--aidev-color-dark-panel-topbar); flex-shrink: 0; } .aidev-panel--ai .aidev-panel__topbar { border-bottom-color: var(--aidev-color-topbar-light); } .aidev-panel__dots { display: flex; gap: 0.25rem; } .aidev-panel__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.25); } .aidev-panel--ai .aidev-panel__dot { background: #d1d5db; } .aidev-panel__title { font-family: var(--aidev-font-mono); font-size: 0.625rem; font-weight: 400; color: var(--aidev-color-text-muted); margin: 0; } .aidev-panel--ai .aidev-panel__title { color: var(--aidev-color-text-dark); font-weight: 500; } .aidev-code { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 0.625rem; flex: 1; min-height: 0; font-family: var(--aidev-font-mono); font-size: 0.625rem; font-weight: 400; line-height: 1.3; overflow: hidden; } .aidev-code__line { display: flex; align-items: flex-start; gap: 0.625rem; width: 100%; } .aidev-code__num { flex-shrink: 0; width: 1.125rem; color: var(--aidev-color-text-muted); } .aidev-code__text { flex: 1; min-width: 0; color: var(--aidev-color-text-light); word-break: break-word; } .aidev-panel--ai .aidev-code__text { color: var(--aidev-color-text-dark); } .aidev-panel--raw .aidev-code__line, .aidev-panel--ai .aidev-code__line { opacity: 0; } /* ============ AI chip (middle) ============ */ .aidev-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.625rem; background: var(--aidev-color-white); border: 0.0625rem solid var(--aidev-color-border-light); border-radius: var(--aidev-radius-pill); box-shadow: 0 0.25rem 0.625rem rgba(17, 24, 39, 0.1); flex-shrink: 0; opacity: 0; transform: scale(0.6); } .aidev-chip__sparkles { width: 2rem; height: 2rem; display: block; } .aidev-chip__arrow { width: 0.875rem; height: 0.875rem; display: block; color: var(--aidev-color-primary); } /* ============ Typing line + AI highlight + aidev-cursor ============ */ .aidev-line { display: flex; align-items: center; gap: 0.375rem; position: relative; flex-wrap: wrap; padding-left: 0.5rem; padding-top: 0.25rem; } .aidev-line__comment { color: var(--aidev-color-text-dark); font-family: var(--aidev-font-mono); font-size: 0.625rem; white-space: nowrap; } .aidev-highlight { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; background: var(--aidev-color-primary-soft); border: 0.0625rem solid var(--aidev-color-primary-border); border-radius: var(--aidev-radius-highlight); font-family: var(--aidev-font-mono); font-weight: 700; font-size: 0.625rem; color: var(--aidev-color-primary); white-space: nowrap; opacity: 0; transform: scale(0.85); position: relative; } .aidev-highlight__badge { position: absolute; left: -0.625rem; top: -0.625rem; width: 1.125rem; height: 1.125rem; display: grid; place-items: center; background: var(--aidev-color-primary); border: 0.125rem solid var(--aidev-color-white); border-radius: 50%; box-shadow: var(--aidev-shadow-ai-glow); opacity: 0; transform: scale(0.5); z-index: 2; } .aidev-highlight__badge svg { width: 0.6875rem; height: 0.6875rem; color: var(--aidev-color-white); } .aidev-cursor { display: inline-block; width: 0.125rem; height: 0.75rem; background: var(--aidev-color-primary); border-radius: 0.0625rem; opacity: 0; vertical-align: middle; } .aidev-cursor--blinking { opacity: 1; animation: blink 1s steps(2, end) infinite; } /* ============ Animations ============ */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(0.5rem) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes chipPop { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } } @keyframes lineIn { 0% { opacity: 0; transform: translateY(0.25rem); } 100% { opacity: 1; transform: translateY(0); } } @keyframes badgeIn { 0% { opacity: 0; transform: translateY(-0.375rem) scale(0.9); } 60% { opacity: 1; transform: translateY(0) scale(1.06); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes buildAppearScale { 0% { opacity: 0; transform: translateY(-0.375rem) scale(0.7); } 45% { opacity: 1; transform: translateY(0) scale(1.22); } 70% { opacity: 1; transform: translateY(0) scale(1.22); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes highlightIn { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } } @keyframes badgePop { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .aidev-is-visible.aidev-panel { animation: fadeInUp 700ms var(--aidev-ease-out) forwards; } .aidev-is-visible.aidev-chip { animation: chipPop 800ms var(--aidev-ease-spring) forwards; } .aidev-code__line.aidev-is-visible { animation: lineIn 400ms var(--aidev-ease-out) forwards; } .aidev-badge.aidev-is-visible { animation: badgeIn 650ms var(--aidev-ease-spring) forwards; } .aidev-badge--primary.aidev-is-visible { animation: buildAppearScale 1400ms var(--aidev-ease-out) forwards; } .aidev-highlight.aidev-is-visible { animation: highlightIn 450ms var(--aidev-ease-spring) forwards; } .aidev-highlight__badge.aidev-is-visible { animation: badgePop 500ms var(--aidev-ease-spring) forwards; animation-delay: 200ms; }