/* ---- SOC 2 divider pill between hero and problem sections ---- */ .soc2-divider { display: flex; justify-content: center; align-items: center; padding: 3rem 1rem; position: relative; background: var(--main-bg-color); } .soc2-divider + .problem-section { padding-top: 3rem !important; } .soc2-pill { display: inline-flex; align-items: center; gap: 1rem; padding: 0.85rem 2.4rem; border: 1px solid color-mix(in srgb, var(--purple) 20%, transparent); border-radius: 100px; text-decoration: none !important; cursor: pointer; background: color-mix(in srgb, var(--purple) 8%, transparent); box-shadow: 0 0 40px -10px color-mix(in srgb, var(--purple) 12%, transparent); transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .soc2-pill:hover { border-color: color-mix(in srgb, var(--purple) 35%, transparent); background: color-mix(in srgb, var(--purple) 12%, transparent); box-shadow: 0 0 50px -8px color-mix(in srgb, var(--purple) 18%, transparent); text-decoration: none !important; } .soc2-pill-logo { width: 42px; height: 42px; border-radius: 50%; } .soc2-pill-text { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); white-space: nowrap; text-transform: uppercase; text-decoration: none !important; } .site-header+.site-content .section:first-of-type{ padding-top: 120px !important; }.site-header+.site-content .hero.section:first-of-type, .site-header+.site-content .surface-beat--navigate.section:first-of-type{ padding-top: 0px !important; } /* ---- Hero Kicker — Premium brand lockup ---- */.hero-kicker, .surface-beat--navigate-kicker{ display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0; margin-bottom: 2.5rem; position: relative; }.hero-kicker-icon, .surface-beat--navigate-kicker-icon{ width: 20px; height: 20px; flex-shrink: 0; opacity: 0.9; filter: brightness(var(--kicker-icon-brightness, 1)); }.hero-kicker-text, .surface-beat--navigate-kicker-text{ font-size: 1rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; line-height: 1.3; display: inline-flex; gap: 0.4rem; color: inherit; text-decoration: none !important; }.hero-kicker-prefix, .surface-beat--navigate-kicker-prefix{ color: var(--slate-400, #94a3b8); }.hero-kicker-term, .surface-beat--navigate-kicker-term{ font-weight: 600; background: var(--kicker-gradient, linear-gradient(160deg, rgba(79,70,229,1) 0%, rgba(99,102,241,1) 50%, rgba(139,92,246,1) 100%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .category-badge-prefix{ font-size: 0.6rem; }.hero-pills svg, .hero-pills svg *, .surface-beat--navigate-pills svg, .surface-beat--navigate-pills svg *{ fill: var(--blurple); stroke: var(--blurple); /* width: 24px; height: 24px; */ }.hero-pills > div, .surface-beat--navigate-pills > div{ display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.95rem; background-color: var(--lightestblue); border-radius: 999px; font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-bg-color) !important; font-weight: 800; border: none !important; opacity: 0.7; } /* Legacy scroll-reveal.js + its .has-animations [class*="reveal-"] CSS are dead on V6 because _index_v6.html strips `has-animations` from pre-execution. No CSS kill-switch needed — every legacy rule is scoped under `.has-animations` so the cascade no longer matches. */.hero.particles .particles-js-canvas-el, .surface-beat--navigate.particles .particles-js-canvas-el{ opacity: 0 !important; }.hero.particles h1, .surface-beat--navigate.particles h1{ color: var(--inv-bg-color) !important; font-weight: 600 !important; margin-bottom: 1.5rem !important; }.hero.particles .hero-wrapper, .surface-beat--navigate.particles .surface-beat--navigate-wrapper{ padding-top: 0px !important; padding-bottom: 0; min-height: 100vh; }.hero-wrapper, .surface-beat--navigate-wrapper{ gap: 0px; }.hero-wrapper > .reveal-from-bottom:has(.navigator-ring), .surface-beat--navigate-wrapper > .reveal-from-bottom:has(.navigator-ring){ padding-top: 30px; } @media (max-width: 850px) {.hero-wrapper > .reveal-from-bottom:has(.navigator-ring), .surface-beat--navigate-wrapper > .reveal-from-bottom:has(.navigator-ring){ padding-top: 0; } }.hero-wrapper > div > .flex button, .hero-wrapper > div > .flex a:not(.blurpleButtonAlt, .hero-btn-minimal, .hero-btn-secondary), .surface-beat--navigate-wrapper > div > .flex button, .surface-beat--navigate-wrapper > div > .flex a:not(.blurpleButtonAlt, .surface-beat--navigate-btn-minimal, .surface-beat--navigate-btn-secondary){ width: 272px; justify-content: center; text-decoration: none; color: var(--white) !important; }.hero-btn-minimal, .surface-beat--navigate-btn-minimal{ all: unset; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--inv-bg-color) !important; cursor: pointer; transition: transform 0.3s ease, color 0.3s ease; text-decoration: none !important; font-weight: 600; opacity: 0.9; }.hero-btn-minimal:hover, .surface-beat--navigate-btn-minimal:hover{ transform: scale(1.15); opacity: 1; color: var(--lightblue) !important; } /* ---- Hero glass CTA buttons ---- */.hero-cta-row, .surface-beat--navigate-cta-row{ display: flex; flex-wrap: wrap; gap: 1.75rem; justify-content: center; }.hero-glass-btn, .surface-beat--navigate-glass-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.8rem; border-radius: 14px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em; color: var(--inv-bg-color) !important; text-decoration: none !important; cursor: pointer; overflow: hidden; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }.hero-glass-btn::before, .surface-beat--navigate-glass-btn::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurpleblue) 60%, transparent), color-mix(in srgb, var(--purple) 40%, transparent)); opacity: 0.5; transition: opacity 0.4s ease; }.hero-glass-btn:hover, .surface-beat--navigate-glass-btn:hover{ border-color: color-mix(in srgb, var(--purple) 20%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 10%, transparent), 0 12px 48px color-mix(in srgb, var(--purple) 5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transform: translateY(-3px); }.hero-glass-btn:hover::before, .surface-beat--navigate-glass-btn:hover::before{ opacity: 1; } /* Primary CTA — elevated glowing focal point */.hero-glass-btn.hero-glass-btn-primary, .surface-beat--navigate-glass-btn.surface-beat--navigate-glass-btn-primary{ background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--purple) 18%, transparent); font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 2px 16px color-mix(in srgb, var(--purple) 8%, transparent), 0 8px 40px color-mix(in srgb, var(--purple) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); }.hero-glass-btn.hero-glass-btn-primary::before, .surface-beat--navigate-glass-btn.surface-beat--navigate-glass-btn-primary::before{ opacity: 0.7; height: 1.5px; }.hero-glass-btn.hero-glass-btn-primary:hover, .surface-beat--navigate-glass-btn.surface-beat--navigate-glass-btn-primary:hover{ border-color: color-mix(in srgb, var(--purple) 30%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 15%, transparent), 0 16px 60px color-mix(in srgb, var(--purple) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } /* Secondary text links — elegant minimal */.hero-text-link, .surface-beat--navigate-text-link{ display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.01em; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent) !important; text-decoration: none !important; cursor: pointer; transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1); }.hero-text-link:hover, .surface-beat--navigate-text-link:hover{ color: color-mix(in srgb, var(--inv-bg-color) 85%, transparent) !important; }.hero-text-link-arrow, .surface-beat--navigate-text-link-arrow{ display: inline-block; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); font-size: 0.9em; }.hero-text-link:hover .hero-text-link-arrow, .surface-beat--navigate-text-link:hover .surface-beat--navigate-text-link-arrow{ transform: translateX(3px); } /* Primary text link — "Get Started" with slightly more presence */.hero-text-link.hero-text-link-primary, .surface-beat--navigate-text-link.surface-beat--navigate-text-link-primary{ color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent) !important; font-weight: 600; letter-spacing: 0.02em; }.hero-text-link.hero-text-link-primary:hover, .surface-beat--navigate-text-link.surface-beat--navigate-text-link-primary:hover{ color: var(--inv-bg-color) !important; }.hero .hero-btn-secondary, .surface-beat--navigate .surface-beat--navigate-btn-secondary{ display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--inv-bg-color), var(--purple)) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; cursor: pointer; transition: opacity 0.3s ease; text-decoration: none !important; font-weight: 400; opacity: 0.7; font-size: 0.85rem; border: none !important; padding: 0 !important; width: auto !important; }.hero-btn-secondary:hover, .surface-beat--navigate-btn-secondary:hover{ opacity: 1; color: var(--lightblue) !important; }.hero-scroll-cue, .surface-beat--navigate-scroll-cue{ position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 10; opacity: 0.3; animation: hero-scroll-bounce 2s ease-in-out infinite; color: var(--inv-bg-color); } @keyframes hero-scroll-bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } } .problem-section { /* Design-vocabulary continuity with the hero — same faint blurple/ * purple radial washes on the light base. Paired with .proof-section * below: the two sections share the same wash treatment with a * small tonal shift between them (proof gets slightly more purple) * — distinguishable, but the deviation is calibrated narrow so they * read as one continuous canvas, not two different bgs. */ background: radial-gradient(ellipse 58% 35% at 78% 22%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 65%), radial-gradient(ellipse 45% 28% at 20% 70%, color-mix(in srgb, var(--purple) 4%, transparent) 0%, transparent 60%), var(--main-bg-color); color: var(--inv-bg-color); padding-top: 7rem !important; padding-bottom: 7rem !important; /* Linear-style hairline divider above. Very faint — visible only * as a structural cue, not a hard line. */ border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .problem-section .problem-copy, .problem-section .problem-copy p, .problem-section .problem-copy h2, .problem-section .problem-copy li { color: var(--inv-bg-color); text-align: left; } .problem-section .problem-copy p{ font-size: 0.6rem; } /* ---- Problem section tag pill ---- * Editorial section mark: a thin gradient hairline + uppercase tracked * text. Replaces the red-tinted info pill, which read as a warning * banner rather than a section heading — wrong register for a serious * thesis statement under a high-end hero. */ .problem-tag { display: flex; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 2rem; align-items: center; justify-content: center; gap: 0.75rem; padding: 0; background: none; border: none; border-radius: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); opacity: 1; text-align: center; } .problem-tag::before { content: ""; display: inline-block; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--blurple)); } .problem-tag::after { content: ""; display: inline-block; width: 28px; height: 1px; background: linear-gradient(90deg, var(--blurple), transparent); } /* The inline info-circle SVG was carrying the "alert / notification" * read. Hide it; the gradient hairlines do the section-mark job. */ .problem-tag svg { display: none; width: 13px; height: 13px; opacity: 0.8; flex-shrink: 0; } .problem-bg { position: absolute; inset: 0; background: radial-gradient(circle at 78% 20%, rgba(129, 140, 248, 0.15), transparent 45%), radial-gradient(circle at 18% 70%, rgba(168, 85, 247, 0.12), transparent 55%); opacity: 0.1; } .problem-copy { background: var(--main-bg-color); border-radius: 32px; padding: 2.75rem; box-shadow: 0 45px 90px rgba(15, 23, 42, 0.18); border: 1px solid rgba(99, 102, 241, 0.08); backdrop-filter: blur(26px); max-width: 920px; margin: 0 auto; } .share-bg { position: absolute; inset: 0; background: radial-gradient(circle at 22% 30%, rgba(139, 92, 246, 0.15), transparent 45%), radial-gradient(circle at 82% 60%, rgba(96, 165, 250, 0.12), transparent 55%); opacity: 0.1; } .share-copy { background: var(--main-bg-color); border-radius: 32px; padding: 0 2rem; box-shadow: 0 45px 90px rgba(15, 23, 42, 0.18); border: 1px solid rgba(99, 102, 241, 0.08); backdrop-filter: blur(26px); max-width: 920px; height: 601px !important; overflow: hidden !important; margin: 0 auto; } .problem-lede { margin-bottom: 1.25rem; } .problem-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.95rem; background-color: var(--lightestblue); border-radius: 999px; font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-bg-color) !important; font-weight: 800; border: none; opacity: 0.7; margin-bottom: 1.5rem; } .problem-pill svg, .problem-pill svg * { fill: var(--blurple); stroke: var(--blurple); } .problem-contrast { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(99, 102, 241, 0.35); border-radius: 16px; padding: 1.25rem 1.5rem; } .problem-chart { position: relative; min-height: 360px; isolation: isolate; border-radius: 36px; padding: 0 !important; background: var(--main-bg-color); border: none; box-shadow: none; max-width: 960px; margin: 0 auto; } .problem-chart-mobile { display: none; gap: 1.5rem; margin-top: 2rem; } /* ════════════════════════════════════════════════════════════════════ * PROOF SECTION — the pain chapter, on the main theme. * * No dark inversion. The page stays on a single light theme throughout * (Linear's pattern — one consistent canvas signals confidence). This * section gets its weight from typography + composition + a slightly * more saturated purple wash than .problem-section, so it reads as a * tonal shift, not a theme shift. * ════════════════════════════════════════════════════════════════════ */ .proof-section { position: relative; overflow: hidden; /* Same canvas as .problem-section above, just a small tonal shift — * a touch more purple in the central wash — so the section reads * as a distinct beat without breaking continuity. The deviation * was previously too big (10% center purple + multiple stronger * washes); pulled the central wash down to 6% so the chart → * proof transition is calibrated to feel inevitable, not abrupt. */ background: radial-gradient(ellipse 70% 50% at 50% 45%, color-mix(in srgb, var(--purple) 6%, transparent) 0%, transparent 65%), radial-gradient(ellipse 55% 40% at 80% 22%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 20% 75%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 60%), var(--main-bg-color); color: var(--inv-bg-color); padding-top: 7rem; padding-bottom: 7rem; /* Linear-style hairline divider above — same value as .problem-section * for rhythmic consistency. Overrides the Tailwind border-t-white/5 * from the HTML (which was a dark-theme leftover). */ border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; } .proof-section > * { position: relative; z-index: 2; } /* ─── Header: eyebrow → H2 thesis → subtitle ─────────────────────── * Spacing rhythm uses a single base unit (1.5rem) so the section * reads as a coherent vertical scale: eyebrow→H2 = 1× (close, they * belong together), header→stats = 2× (a real beat), stats→verdict * = 2× (echo), verdict→divider = 1×. */ .proof-section .proof-header { color: var(--inv-bg-color); margin-bottom: 3.5rem !important; } /* Eyebrow — editorial section mark matching the .problem-tag above * the chart. No filled pill, no gradient — gradient hairlines + tracked * uppercase text. Pulls weight off the chrome so the H2 underneath * carries the section. Was a saturated gradient pill that read as * consumer-app marketing tag. */ .proof-section .proof-pill-gradient { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0; background: none; border: none; box-shadow: none; border-radius: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); } .proof-section .proof-pill-gradient::before, .proof-section .proof-pill-gradient::after { content: ""; display: inline-block; width: 28px; height: 1px; } .proof-section .proof-pill-gradient::before { background: linear-gradient(90deg, transparent, var(--blurple)); } .proof-section .proof-pill-gradient::after { background: linear-gradient(90deg, var(--blurple), transparent); } .proof-section .proof-pill-gradient:hover { transform: none; box-shadow: none; } /* H2 thesis — editorial display type sized so the line breaks cleanly * once (at the comma). Two lines: "When the journey breaks," / "the * deal dies." (the accent carries the gradient — same brand colors * as everywhere else, no boutique variant). */ .proof-section .proof-thesis { margin: 1.5rem auto 0; max-width: 26ch; text-align: center; font-family: var(--brand-font); font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--inv-bg-color); } .proof-section .proof-thesis-accent { background: linear-gradient(135deg, var(--blurple), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ─── Stats grid: clean exhibit treatment ───────────────────────── * No dividers, no top/bottom hairlines — the eye reads them as five * inscriptions floating on the dark canvas, separated only by negative * space. Less visual noise, more confident. */ .proof-section .proof-stats-grid { padding: 0; gap: 1.5rem; } .proof-section .proof-stat-card { background: none; border: none; box-shadow: none; padding: 0.75rem 1.5rem; position: relative; transition: opacity 280ms ease; } .proof-section .proof-stat-card:hover { background: none; transform: none; box-shadow: none; opacity: 1; } /* Strip the legacy .proof-stat-emphasis gradient block on the 77% card. * It had a saturated 85% purple bg + white text + heavy purple shadows * — the "noisy radiant background" complaint. Now it matches every * other stat card: no bg, no border, no shadow, dark ink text. The * data IS the emphasis at this size — no extra chrome needed. */ .proof-section .proof-stat-card.proof-stat-emphasis, .proof-section .proof-stat-card.proof-stat-emphasis:hover { background: none !important; border-color: transparent !important; box-shadow: none !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-value { color: var(--inv-bg-color) !important; filter: none !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-label { color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent) !important; font-weight: 500; } .proof-section .proof-stat-card .proof-stat-value { font-family: var(--brand-font); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; /* Solid ink — was a blurple→purple gradient. Five rainbow numbers * stacked next to a gradient pill above and a gradient H2 accent * was too much, started reading as consumer-AI hype. Numbers do * their own work at this size; gradient is unnecessary flair. * The H2 accent "the deal dies" still carries gradient as the * single brand accent moment in this section. */ color: var(--inv-bg-color); margin-bottom: 0.85rem; white-space: nowrap; } /* Dashed/longer stat values (57-70%, 60-100) get a smaller variant so * they fit their cell without overflowing or wrapping. The single-token * values (77%, 15%, 7.1) keep the full size. */ .proof-section .proof-stat-card:nth-child(2) .proof-stat-value, .proof-section .proof-stat-card:nth-child(3) .proof-stat-value { font-size: clamp(1.55rem, 2.7vw, 2.3rem); letter-spacing: -0.025em; } .proof-section .proof-stat-card .proof-stat-label { font-family: var(--brand-font); font-size: 0.78rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); max-width: 22ch; } /* ─── Closing verdict — the punch line ────────────────────────────── * One sentence under the stats grid that turns the numbers into a * verdict. Italic editorial, narrower max-width so it reads as a * pull-quote rather than body copy. */ .proof-section .proof-verdict { max-width: 38rem; margin: 3rem auto 0; text-align: center; font-family: var(--brand-font); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 400; font-style: italic; line-height: 1.45; letter-spacing: -0.005em; color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent); } /* ─── Bridge divider: light-theme hairline ────────────────────────── */ .proof-section .proof-bridge-divider { margin: 1.5rem auto 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-bg-color) 22%, transparent), transparent); } /* Mobile: tighter padding only. No dividers to worry about. */ @media (max-width: 768px) { .proof-section { padding-top: 5rem; padding-bottom: 5rem; } .proof-section .proof-stats-grid { padding: 2.25rem 0; } .proof-section .proof-thesis { max-width: 18ch; } } /* Epic Transition Section */ /* Minimal Transition Section */ .epic-transition-section { position: relative; background: var(--main-bg-color); /* Same Linear-style hairline divider as .problem-section and * .proof-section above — same value for rhythmic consistency. */ border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .epic-portal-container { position: relative; padding: 4rem 1.5rem; max-width: 800px; margin: 0 auto; } .epic-portal-content { position: relative; } .epic-portal-title { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--inv-bg-color) !important; font-weight: 700; margin-bottom: 1.5rem; opacity: 0.9; } .epic-portal-divider { width: 60px; height: 2px; background: var(--blurple); margin: 0 auto 2.5rem; opacity: 0.6; } .epic-section-title { font-size: 3.5rem; font-weight: 800; color: var(--inv-bg-color); margin-bottom: 1.5rem; line-height: 1.1; } .epic-section-subtitle { font-size: 1.125rem; color: var(--inv-bg-color); opacity: 0.7; max-width: 600px; margin: 0 auto; line-height: 1.6; } /* Mobile Responsive */ @media (max-width: 768px) { .epic-section-title { font-size: 2.5rem; } .epic-section-subtitle { font-size: 1rem; } .epic-portal-container { padding: 3rem 1.5rem; } } .solution-pill { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.35rem 0.95rem; border-radius: 999px; letter-spacing: 0.4em; font-size: 0.65rem; text-transform: uppercase; background-color: var(--lightestblue); color: var(--inv-bg-color) !important; border: none; opacity: 0.7; font-weight: 800; } .solution-pill svg, .solution-pill svg * { fill: var(--blurple); stroke: var(--blurple); } .solution-title { color: var(--inv-bg-color); } .ai-architect-card { background: radial-gradient(circle at top left, color-mix(in srgb, var(--purple) 25%, transparent), transparent 50%), radial-gradient(circle at bottom right, color-mix(in srgb, var(--blurple) 20%, transparent), transparent 50%), linear-gradient(135deg, color-mix(in srgb, var(--blurple) 15%, var(--main-bg-color) 85%), color-mix(in srgb, var(--purple) 20%, var(--main-bg-color) 80%)); box-shadow: 0 25px 60px color-mix(in srgb, var(--blurple) 20%, transparent); } .ai-architect-card .space-y-4 { overflow: hidden; } .ai-flow-nav-buttons { display: flex; gap: 4px; } .ai-flow-nav-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: #fff; opacity: 0.5; cursor: pointer; transition: opacity 0.2s ease, background 0.2s ease; } .ai-flow-nav-btn:hover { opacity: 0.85; background: rgba(255, 255, 255, 0.12); } .ai-flow-nav-btn svg { flex-shrink: 0; color: var(--white); } .ai-tool-label { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; } .ai-header-icon { display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color); flex-shrink: 0; opacity: 0.85; } .ai-header-icon svg { width: 36px; height: 36px; fill: currentColor; } .ai-architect-glyph { display: none; } .template-icon { width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-shrink: 0; } .template-icon--creator { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 18%, transparent), color-mix(in srgb, var(--blurple) 10%, transparent)); border: 0.5px solid color-mix(in srgb, var(--purple) 28%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--purple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); } .template-icon--editor { background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent)); border: 0.5px solid color-mix(in srgb, var(--blurple) 28%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--blurple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--blurple) 10%, transparent); color: var(--inv-bg-color) !important; } .template-icon--coach { background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 18%, transparent), color-mix(in srgb, var(--purple) 10%, transparent)); border: 0.5px solid color-mix(in srgb, var(--lightblue) 28%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--lightblue) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--lightblue) 10%, transparent); color: var(--darkblue); } .ai-prompt-display { display: block; font-family: var(--font-main, 'Satoshi', sans-serif); color: var(--inv-bg-color); line-height: 1.5; min-height: 4.5rem; } .ai-prompt-text { display: inline; white-space: pre-wrap; letter-spacing: 0.01em; color: inherit; color: var(--inv-bg-color); } .ai-prompt-caret { width: 2px; height: 1.3em; background: #c7d2fe; display: inline-block; margin-left: 0.12rem; vertical-align: text-bottom; animation: blink 1s steps(1) infinite; } .ai-prompt-caret.is-solid { animation: none; background: #6366f1; } .ai-status-message { font-size: 0.9rem; color: #bae6fd; margin-top: 0.85rem; padding-bottom: 0.35rem; min-height: 1.4rem; opacity: 0; transition: opacity 300ms ease; } .ai-status-message.is-visible { opacity: 1; } .ai-status-chip { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; padding: 0.2rem 0.8rem; border-radius: 999px; border: 1px solid transparent; transition: all 200ms ease; } .ai-status-chip--idle { background: rgba(148, 163, 184, 0.2); border-color: rgba(148, 163, 184, 0.4); color: #e2e8f0; } .ai-status-chip--active { background: rgba(245, 158, 11, 0.2); border-color: rgba(251, 191, 36, 0.45); color: #fbbf24; } .ai-status-chip--done { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.35); color: #86efac; } .ai-status-label { color: #c7d2fe; letter-spacing: 0.2em; min-height: 1.2rem; display: inline-flex; align-items: center; transition: color 200ms ease; } .ai-status-header { position: sticky; top: 0; z-index: 2; padding-block: 0.35rem; background: transparent; border-bottom: 1px solid transparent; box-shadow: none; transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .ai-status-header[data-status-state="complete"] { background: transparent; border-bottom: 1px solid transparent; box-shadow: none; } .ai-stage-scroll { margin-top: 0; padding-top: 0.85rem; padding-bottom: 1rem; flex: 1; min-height: 240px; max-height: none; overflow-y: auto; padding-right: 0.35rem; scrollbar-width: none; } .ai-stage-scroll::-webkit-scrollbar { display: none; } .ai-stage-list { opacity: 0; transform: translateY(12px); transition: opacity 400ms ease, transform 400ms ease; min-height: 10rem; margin-top: 0; } .ai-stage-list.is-ready { opacity: 1; transform: translateY(0); } .ai-stage { display: flex; align-items: center; gap: 0.75rem; color: #cbd5f5; font-size: 0.8rem; } .ai-stage-label { color: #e2e8f0; } .ai-stage-indicator { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.4); display: inline-flex; align-items: center; justify-content: center; position: relative; } .ai-stage-spinner { position: absolute; inset: 3px; border-radius: 999px; border: 2px solid rgba(148, 163, 184, 0.2); border-top-color: #a5b4fc; opacity: 0; } .ai-stage-check { width: 1.1rem; height: 1.1rem; color: #86efac; opacity: 0; transform: scale(0.5); transition: opacity 250ms ease, transform 250ms ease; } .ai-stage.is-active .ai-stage-spinner { opacity: 1; animation: spin 1s linear infinite; } .ai-stage.is-complete .ai-stage-spinner { opacity: 0; } .ai-stage.is-complete .ai-stage-check { opacity: 1; transform: scale(1); } @keyframes confetti-fall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(60px) rotate(220deg); opacity: 0; } } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @keyframes spin { to { transform: rotate(360deg); } } .proof-header { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; color: var(--inv-bg-color); margin-bottom: 60px !important; } .proof-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.95rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4em; font-size: 0.65rem; background-color: rgba(139, 92, 246, 0.15); color: var(--purple); border: 1px solid rgba(139, 92, 246, 0.3); opacity: 1; font-weight: 800; } .proof-pill svg, .proof-pill svg * { fill: var(--purple); stroke: var(--purple); } /* Gradient Pill - matches quadrant gradient via brand variables */ .proof-pill-gradient { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 2rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem; font-weight: 800; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color); color: #ffffff; border: none; box-shadow: 0 4px 20px color-mix(in srgb, var(--purple) 35%, transparent), 0 2px 10px color-mix(in srgb, var(--blurple) 20%, transparent); transition: all 0.3s ease; } .proof-pill-gradient:hover { transform: translateY(-2px); box-shadow: 0 6px 30px color-mix(in srgb, var(--purple) 45%, transparent), 0 3px 15px color-mix(in srgb, var(--blurple) 30%, transparent); } /* Urgency Tag - Muted & Sophisticated */ .urgency-tag { display: inline-block; padding: 0.5rem 1.25rem; background: linear-gradient(135deg, #dc2626, #f87171); color: #ffffff; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; border-radius: 6px; border: 1px solid rgba(220, 38, 38, 0.3); box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15), 0 2px 8px rgba(248, 113, 113, 0.1); animation: urgency-pulse 2s ease-in-out infinite; } @keyframes urgency-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.15), 0 2px 8px rgba(248, 113, 113, 0.1); } 50% { box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2), 0 3px 10px rgba(248, 113, 113, 0.15); } } .proof-title { color: var(--inv-bg-color); line-height: 1.2; letter-spacing: -0.03em; margin-top: 3rem !important; opacity: 0.85; font-size: 2.6rem; } .proof-title-em { opacity: 0.5; } .proof-bridge-divider { width: 48px; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 50%, transparent), color-mix(in srgb, var(--purple) 30%, transparent)); margin: 1.25rem auto 0; border-radius: 1px; } .proof-subhead { color: var(--inv-bg-color); opacity: 0.7; } .proof-visual { display: flex; flex-direction: column; gap: 64px; align-items: center; position: relative; z-index: 1; } .proof-holo { position: relative; width: min(520px, 85vw); aspect-ratio: 1; /* border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent 65%), rgba(255, 255, 255, 0.9); border: 1px solid rgba(99, 102, 241, 0.18); box-shadow: 0 35px 80px rgba(15, 23, 42, 0.15); */ overflow: visible; } .proof-holo::before, .proof-holo::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(96, 165, 250, 0.4); animation: pulseRing 8s ease-in-out infinite; } .proof-holo::after { inset: 22%; border-style: solid; border-color: rgba(125, 211, 252, 0.35); animation-delay: 2s; } .proof-core { position: absolute; inset: 42%; border-radius: 32px; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; text-align: center; box-shadow: 0 35px 55px rgba(15, 23, 42, 0.15); border: 1px solid rgba(15, 23, 42, 0.06); } .proof-core span { font-weight: 700; font-size: 1.1rem; } .proof-core p { font-size: 0.9rem; color: var(--inv-bg-color) !important; text-transform: uppercase; letter-spacing: 0.08em; } /* NEW STATS GRID LAYOUT WITH GLASSMORPHISM */ .proof-grid-container { max-width: 1200px; margin: 0 auto; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; border: none; box-shadow: none; } .proof-stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; border-radius: 16px; overflow: visible; } .proof-stat-card { padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; position: relative; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); color: var(--inv-bg-color); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-radius: 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); min-height: 172px; } .proof-stat-card:last-child { border-right: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .proof-stat-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--blurple) 18%, transparent); box-shadow: 0 8px 40px color-mix(in srgb, var(--blurple) 10%, transparent), 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); z-index: 10; } .proof-stat-card .proof-stat-value { font-size: 2.325rem; font-weight: 800; margin-bottom: 0; line-height: 1.1; min-height: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; } /* Stat card values - sampled from quadrant gradient stops: #4f46e5 → #6366f1 → #8b5cf6 */ .proof-stat-card:nth-child(1) .proof-stat-value { color: #4f46e5; filter: drop-shadow(0 0 20px rgba(79, 70, 229, 0.4)); } .proof-stat-card:nth-child(2) .proof-stat-value { color: #5958eb; filter: drop-shadow(0 0 20px rgba(89, 88, 235, 0.4)); font-size: 38px; } .proof-stat-card:nth-child(3) .proof-stat-value { color: #6366f1; filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.4)); font-size: 38px; } .proof-stat-card:nth-child(4) .proof-stat-value { color: #7761f3; filter: drop-shadow(0 0 20px rgba(119, 97, 243, 0.4)); font-size: 38px; } .proof-stat-card:nth-child(5) .proof-stat-value { color: #8b5cf6; filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4)); font-size: 38px; } .proof-stat-card .proof-stat-label { margin-top: 14px; font-size: 0.875rem; color: var(--inv-bg-color); opacity: 0.7; line-height: 1.5; max-width: 180px; } /* Emphasized stat card — gradient bg, white text */ .proof-stat-emphasis { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color) !important; border-color: transparent !important; backdrop-filter: none !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--purple) 35%, transparent), 0 2px 10px color-mix(in srgb, var(--blurple) 20%, transparent) !important; } .proof-stat-emphasis:hover { background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%), linear-gradient(160deg, rgba(67,56,202,0.9) 0%, rgba(79,70,229,0.8) 50%, rgba(124,58,237,0.85) 100%), var(--main-bg-color) !important; } .proof-stat-emphasis .proof-stat-value { color: var(--white) !important; filter: none !important; } .proof-stat-emphasis .proof-stat-label { color: var(--white) !important; font-weight: 600; } /* Tablet: 3 columns */ @media (max-width: 1024px) { .proof-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .proof-stat-card { border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .proof-stat-card:nth-child(3n) { border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .proof-stat-card:nth-last-child(-n+3) { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } } /* Mobile: 1 column */ @media (max-width: 640px) { .proof-stats-grid { grid-template-columns: 1fr; } .proof-stat-card { border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .proof-stat-card:last-child { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } } /* OLD BUBBLE CLOUD STYLES - COMMENTED OUT */ /*.proof-orbit { position: absolute; inset: 0; } .proof-node { --node-accent-rgb: 99, 102, 241; --magnet-x: 0px; --magnet-y: 0px; position: absolute; top: 50%; left: 50%; width: 205px; height: 205px; border-radius: 999px; background: radial-gradient(circle at 78% 20%, rgba(var(--node-accent-rgb), 0.06), transparent 45%), radial-gradient(circle at 18% 70%, rgba(var(--node-accent-rgb), 0.04), transparent 55%), #fefefe; border: 1px solid rgba(var(--node-accent-rgb), 0.5); box-shadow: 0 25px 50px rgba(15, 23, 42, 0.06), 0 0 35px rgba(var(--node-accent-rgb), 0.2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; backdrop-filter: none; animation: float 6s ease-in-out infinite; transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, 0px) + var(--magnet-y))); padding: 1.5rem 1rem; position: absolute; overflow: visible; z-index: 999; text-shadow: none; transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1); will-change: transform; } .proof-node.is-magnetic { animation-play-state: paused; } .proof-node::before { content: ""; position: absolute; inset: -12px; border-radius: inherit; background: radial-gradient(circle, rgba(var(--node-accent-rgb), 0.4), transparent 15%); filter: blur(18px); opacity: 0.45; z-index: -1; } .proof-node .proof-stat-value { font-size: 2rem; font-weight: 800; color: rgb(var(--node-accent-rgb)); } .proof-node .proof-stat-label { font-size: 0.8rem; color: var(--inv-bg-color); opacity: 0.7; line-height: 1.4; } @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.05); opacity: 0.3; } 100% { transform: scale(1); opacity: 0.7; } } @keyframes float { 0% { transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) + var(--magnet-y))); } 50% { transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) - 12px + var(--magnet-y))); } 100% { transform: translate(-50%, -50%) translate(calc(var(--offset-x, 0px) + var(--magnet-x)), calc(var(--offset-y, -200px) + var(--magnet-y))); } } .node-one { --offset-x: 0px; --offset-y: -220px; --node-accent-rgb: 99, 102, 241; animation-delay: 0s; } .node-two { --offset-x: 190px; --offset-y: -90px; --node-accent-rgb: 129, 140, 248; animation-delay: 1s; } .node-three { --offset-x: 150px; --offset-y: 160px; --node-accent-rgb: 109, 40, 217; animation-delay: 2s; } .node-four { --offset-x: -150px; --offset-y: 160px; --node-accent-rgb: 147, 51, 234; animation-delay: 3s; } .node-five { --offset-x: -190px; --offset-y: -90px; --node-accent-rgb: 168, 85, 247; animation-delay: 4s; } @media (max-width: 1024px) { .proof-node { width: 160px; height: 160px; padding: 1.25rem; } } @media (max-width: 640px) { .proof-holo { width: 100%; } .proof-node { position: static; transform: none !important; animation: none; width: 100%; height: auto; margin-bottom: 1rem; } .proof-orbit { position: static; display: flex; flex-direction: column; gap: 1rem; } .proof-holo::before, .proof-holo::after, .proof-core { display: none; } .proof-visual { gap: 1.5rem; } } */ /* END OLD BUBBLE CLOUD STYLES */ .problem-chart-mobile .mobile-quadrant-card { border-radius: 20px; padding: 1.75rem 1.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 3%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 1%, transparent) 100%); border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 1rem; width: min(100%, 520px); margin-inline: auto; position: relative; transition: all 0.3s ease; backdrop-filter: blur(20px); } .mobile-quadrant-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--inv-bg-color) 12%, transparent) 50%, transparent 100%); pointer-events: none; } .mobile-card-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.01em; line-height: 1.3; } .mobile-card-bullets { margin: 0; padding-left: 0; display: flex; flex-direction: column; gap: 1rem; color: var(--inv-bg-color); list-style: none; } .mobile-card-bullets > li { list-style-type: none; padding-left: 0; } .mobile-card-bullet-label { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--inv-bg-color) !important; opacity: 0.5; font-weight: 700; margin-bottom: 0.5rem; } .mobile-card-sublist { margin: 0; padding-left: 0; list-style-type: none; font-size: 1rem; color: var(--inv-bg-color); opacity: 0.75; display: flex; flex-direction: column; gap: 0.4rem; line-height: 1.5; } .mobile-card-sublist li { padding-left: 1.25rem; position: relative; } .mobile-card-sublist li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 50%; background: var(--inv-bg-color); opacity: 0.35; } .mobile-quadrant-highlight { background: linear-gradient(135deg, var(--blurple) 0%, var(--lightblue) 100%); color: #ffffff; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(99, 102, 241, 0.35), 0 4px 16px rgba(56, 189, 248, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25); transform: scale(1.02); } .mobile-quadrant-highlight::before { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); } .mobile-quadrant-highlight .mobile-card-bullets, .mobile-quadrant-highlight .mobile-card-title, .mobile-quadrant-highlight .mobile-card-bullet-label, .mobile-quadrant-highlight .mobile-card-sublist { color: #ffffff; } .mobile-quadrant-highlight .mobile-card-title { color: var(--blurple) !important; } .mobile-quadrant-highlight .mobile-card-bullet-label { opacity: 0.85; } .mobile-quadrant-highlight .mobile-card-sublist { opacity: 0.95; } .mobile-quadrant-highlight .mobile-card-sublist li::before { background: #ffffff; opacity: 0.75; box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } /* Complexity Axis Color Coding */ /* Offering axis - Purple */ .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child { color: var(--purple); font-weight: 600; } .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child::before { background: var(--purple); opacity: 0.8; box-shadow: 0 0 6px rgba(168, 85, 247, 0.4); } /* Customer axis - Blue */ .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2) { color: var(--lightblue); font-weight: 600; } .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2)::before { background: var(--lightblue); opacity: 0.8; box-shadow: 0 0 6px rgba(99, 179, 237, 0.4); } /* Override for CustomerNode highlighted card - keep axis colors */ .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child { color: var(--purple); } .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2) { color: var(--lightblue); } .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:first-child::before { background: var(--purple); box-shadow: 0 0 10px rgba(168, 85, 247, 0.7); } .mobile-quadrant-highlight .mobile-card-bullets > li:first-child .mobile-card-sublist li:nth-child(2)::before { background: var(--lightblue); box-shadow: 0 0 10px rgba(99, 179, 237, 0.7); } /* Low complexity - reduced opacity */ .mobile-card-sublist li[data-complexity="low"] { opacity: 0.35; } .mobile-card-sublist li[data-complexity="low"]::before { opacity: 0.3; } .cartesian-chart { --chart-node-radius: 0.75rem; padding: clamp(1.5rem, 3vw, 2.75rem); } .cartesian-chart .cartesian-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-template-areas: "buyer-orchestration active-zone" "transactional mass-custom"; /* column-gap: clamp(0.35rem, 0.8vw, 1.15rem); */ /* row-gap: clamp(0.35rem, 0.8vw, 1.15rem); */ gap: 2px; align-items: stretch; min-height: 360px; padding: clamp(1rem, 2vw, 2.25rem); } .cartesian-grid.reveal-from-bottom.is-revealed { background: transparent !important; border: none !important; } .cartesian-chart .cartesian-grid::before, .cartesian-chart .cartesian-grid::after { content: ""; position: absolute; pointer-events: none; opacity: 1; } .cartesian-chart .cartesian-grid::before { z-index: 0; top: clamp(0.5rem, 1vw, 1rem); bottom: clamp(0.5rem, 1vw, 1rem); left: 50%; width: 2px; background: linear-gradient(180deg, transparent 0%, rgba(148, 163, 184, 0.4) 30%, rgba(148, 163, 184, 0.35) 70%, transparent 100%); transform: translateX(-50%); } .cartesian-chart .cartesian-grid::after { z-index: 0; left: clamp(0.5rem, 1vw, 1rem); right: clamp(0.5rem, 1vw, 1rem); top: 50%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.4) 30%, rgba(148, 163, 184, 0.35) 70%, transparent 100%); transform: translateY(-50%); } .cartesian-chart .chart-axis { text-transform: uppercase; font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.7rem; letter-spacing: 0.25em; font-weight: 600; z-index: 3; color: var(--inv-bg-color); opacity: 0.8; display: flex; align-items: center; gap: 0.35rem; } .cartesian-chart .chart-axis span { white-space: nowrap; /* background: rgba(255, 255, 255, 0.9); */ color: var(--inv-bg-color); /* padding: 0.35rem 0.9rem; */ border-radius: 999px; display: inline-flex; align-items: center; gap: 0.35rem; } .axis-direction { display: inline-flex !important; align-items: center; justify-content: center; color: var(--inv-bg-color) !important; opacity: 1; } .axis-direction svg { width: 18px; height: 18px; stroke: var(--inv-bg-color) !important; stroke-width: 2.5; flex-shrink: 0; } /* Rotate Y-axis arrow for vertical context */ .chart-axis-y .axis-direction svg { transform: rotate(-90deg); } .cartesian-chart .chart-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); left: clamp(-0.25rem, 0.5vw, 0.5rem); top: 50%; translate: 0 -50%; } #customer_complexity_svg{ transform: rotate(180deg) !important; } .cartesian-chart .chart-axis-x { left: 50%; bottom: clamp(-0.25rem, 0.5vw, 0.5rem); transform: translateX(-50%); } .cartesian-chart .chart-quadrant { position: relative; display: flex; flex-direction: column; gap: 0.8rem; height: 100%; padding: clamp(0.75rem, 1vw, 1.4rem); border-radius: 0; border: none; background: transparent; box-shadow: none; min-height: 120px; z-index: 1; } .cartesian-chart .quadrant-buyer-orchestration, .cartesian-chart .active-quadrant { padding-bottom: clamp(1.5rem, 2vw, 2.5rem); } .chart-quadrant.quadrant-customernode.active-quadrant{ transform: translate(15px, -15px); opacity: 1 !important; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom { padding-top: clamp(1.5rem, 2vw, 2.5rem); } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-buyer-orchestration { padding-right: clamp(2rem, 3vw, 3.75rem); } .cartesian-chart .quadrant-mass-custom, .cartesian-chart .active-quadrant { padding-left: clamp(2rem, 3vw, 3.75rem); } .cartesian-chart .quadrant-title { font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--inv-bg-color); opacity: 0.65; } .quadrant-coords { display: flex; flex-wrap: nowrap; gap: 0.5rem; font-size: 0.42rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--inv-bg-color); } .quadrant-coords .coord { white-space: nowrap; color: var(--inv-bg-color); } .chart-quadrant .quadrant-coords { order: 99; margin-top: auto; width: 100%; justify-content: space-between; row-gap: 0.35rem; padding-top: 0.75rem; } .cartesian-chart .active-quadrant .quadrant-coords { color: var(--inv-bg-color); } .cartesian-chart .quadrant-meta { font-size: 0.42rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--inv-bg-color) !important; opacity: 0; transition: opacity 0.3s ease; } .cartesian-chart .chart-quadrant:hover .quadrant-meta { opacity: 0.65; } .cartesian-chart .quadrant-nodes { margin: 0; padding: 0; display: block; font-size: 0.72rem; line-height: 1.35; color: var(--inv-bg-color); opacity: 0; transition: opacity 0.3s ease; } .cartesian-chart .chart-quadrant:hover .quadrant-nodes { opacity: 0.9; } .cartesian-chart .quadrant-customernode { opacity: 1; } .cartesian-chart .active-quadrant .quadrant-meta { opacity: 0.9; color: #fff !important; } .cartesian-chart .active-quadrant .quadrant-nodes { opacity: 0.95; color: #fff !important; } .cartesian-chart .quadrant-nodes-inline { font-weight: 500; letter-spacing: 0.01em; } .cartesian-chart .quadrant-nodes--stacked { display: flex; flex-direction: column; gap: 0.3rem; } .cartesian-chart .quadrant-nodes--stacked .quadrant-line { font-size: 0.8rem; font-weight: 600; color: #fff; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom, .cartesian-chart .quadrant-buyer-orchestration { background: transparent; opacity: 0.6; filter: saturate(0.3); transition: opacity 0.4s ease, filter 0.4s ease; } .cartesian-chart .quadrant-transactional:hover, .cartesian-chart .quadrant-mass-custom:hover, .cartesian-chart .quadrant-buyer-orchestration:hover { opacity: 0.7; filter: saturate(0.6); } .cartesian-chart .quadrant-transactional { grid-area: transactional; } .cartesian-chart .quadrant-mass-custom { grid-area: mass-custom; } .cartesian-chart .quadrant-buyer-orchestration { grid-area: buyer-orchestration; } .cartesian-chart .active-quadrant { grid-area: active-zone; } .desc-text-hero{ max-width: 570px !important; letter-spacing: 0.02em; color: var(--inv-bg-color) !important; opacity: 0.8; } .cartesian-chart .active-quadrant { border-color: transparent; /* Restrained "you are here" treatment — was a saturated 85% purple * block that read as consumer-AI marketing. Pulled back to a soft * glass card with a faint blurple/purple radial wash, an accent * hairline border, and gentle elevation. Same idea (this zone IS * the highlight) executed with editorial restraint. */ background: radial-gradient(ellipse 70% 55% at 50% 50%, color-mix(in srgb, var(--blurple) 14%, transparent) 0%, transparent 75%), linear-gradient(160deg, color-mix(in srgb, var(--blurple) 6%, var(--main-bg-color)) 0%, color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 20px; border: none; position: relative; color: var(--inv-bg-color); box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 24px 56px color-mix(in srgb, var(--inv-bg-color) 12%, transparent), 0 8px 20px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transform: translate(8px, -8px) scale(1.045); z-index: 2; overflow: hidden; } .cartesian-chart .active-quadrant::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; opacity: 0.02; pointer-events: none; mix-blend-mode: overlay; border-radius: inherit; } .cartesian-chart .active-quadrant::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; /* Softer accent border — a single low-opacity blurple hairline that frames * the zone without shouting. */ background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 28%, transparent), color-mix(in srgb, var(--purple) 18%, transparent)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; } .cartesian-chart .active-quadrant .quadrant-title, .cartesian-chart .active-quadrant .chart-node { color: var(--inv-bg-color); opacity: 0.95; } .cartesian-chart .active-quadrant .chart-node { color: var(--inv-bg-color); } .cartesian-chart .active-quadrant .quadrant-title { background: none; -webkit-background-clip: unset; /* Dark ink — was #fff for the old saturated-purple background. * Now the card is a light glass card so the text needs to match * everything else on this page. */ -webkit-text-fill-color: var(--inv-bg-color); color: var(--inv-bg-color); font-weight: 800; } .cartesian-chart .active-quadrant .chart-node { border: none; background: transparent; font-weight: 700; opacity: 1; font-size: 0.72rem; color: var(--inv-bg-color); } .cartesian-chart .active-quadrant .chart-node::before { background: var(--inv-bg-color); } .cartesian-chart .active-quadrant .quadrant-meta { opacity: 0.65; color: var(--inv-bg-color) !important; } .cartesian-chart .active-quadrant .chart-node:hover { filter: brightness(1.05); } @keyframes cnPulse { 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.45); } 70% { box-shadow: 0 0 35px 12px rgba(99, 102, 241, 0); } 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } } .problem-chart-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(115px, 1fr)); grid-template-areas: "highBuyerLowOffer highBuyerHighOffer" "lowBuyerLowOffer lowBuyerHighOffer"; gap: clamp(1rem, 1.4vw, 1.5rem); padding: clamp(1rem, 1.8vw, 1.7rem); background: var(--main-bg-color); border-radius: 36px; border: none; box-shadow: none; overflow: hidden; } .problem-chart-grid::before, .problem-chart-grid::after { content: ""; position: absolute; pointer-events: none; background: rgba(99, 102, 241, 0.15); } .problem-chart-grid::before { top: clamp(1rem, 3vw, 2.25rem); bottom: clamp(1rem, 3vw, 2.25rem); left: 50%; width: 1px; transform: translateX(-50%); } .problem-chart-grid::after { left: clamp(1rem, 3vw, 2.25rem); right: clamp(1rem, 3vw, 2.25rem); top: 50%; height: 1px; transform: translateY(-50%); } .chart-axis { position: absolute; text-transform: uppercase; font-size: 10px; letter-spacing: 0.45em; color: var(--inv-bg-color); opacity: 0.8; font-weight: 800; z-index: 3; } .chart-axis span { white-space: nowrap; } .chart-axis-y { writing-mode: vertical-rl; transform: rotate(180deg); left: clamp(0.25rem, 1vw, 1rem); top: 50%; translate: 0 -50%; } .chart-axis-x { left: 50%; bottom: clamp(0.5rem, 1vw, 1rem); transform: translateX(-50%); } .chart-quadrant { position: relative; display: flex; flex-direction: column; gap: 0.9rem; min-height: 138px; padding: clamp(0.85rem, 1.2vw, 1.25rem); border-radius: 24px; border: 1px solid rgba(99, 102, 241, 0.15); background: var(--main-bg-color); opacity: 0.5; box-shadow: 0 22px 40px rgba(99, 102, 241, 0.15); backdrop-filter: blur(15px); transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease; z-index: 1; } .chart-quadrant p { margin: 0; } .chart-quadrant:hover { border-color: rgba(99, 102, 241, 0.4); box-shadow: 0 30px 60px rgba(99, 102, 241, 0.25); opacity: 1; } .chart-quadrant::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; pointer-events: none; transition: border-color 0.3s ease, opacity 0.3s ease; } .chart-quadrant:hover::after { border-color: rgba(129, 140, 248, 0.4); opacity: 0.9; } .chart-quadrant .quadrant-title { font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: var(--inv-bg-color); opacity: 0.9; line-height: 1.25; width: min-content; max-width: min-content; text-align: left; } .chart-quadrant .quadrant-meta { font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--inv-bg-color) !important; opacity: 0.8; margin-top: -0.05rem; margin-bottom: 0.1rem; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom, .cartesian-chart .quadrant-buyer-orchestration, .cartesian-chart .quadrant-customernode, .cartesian-chart .active-quadrant { padding: clamp(0.85rem, 1.2vw, 1.25rem); } .chart-quadrant .quadrant-nodes, .chart-quadrant .quadrant-examples { font-size: 0.94rem; line-height: 1.45; color: var(--inv-bg-color); opacity: 0.85; gap: 0.35rem; } .chart-quadrant *:not(.quadrant-coords){ padding-left: 20px; padding-right: 20px; box-sizing: border-box; } .problem-chart-grid .quadrant-transactional, .problem-chart-grid .quadrant-mass-custom, .problem-chart-grid .quadrant-buyer-orchestration, .problem-chart-grid .quadrant-customernode, .problem-chart-grid .active-quadrant { padding: clamp(0.95rem, 1.35vw, 1.45rem); } .quadrant-amazon { grid-area: lowBuyerLowOffer; background: linear-gradient(165deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.12)); } .quadrant-vistaprint { grid-area: lowBuyerHighOffer; background: linear-gradient(165deg, rgba(244, 114, 182, 0.22), rgba(244, 114, 182, 0.12)); } .quadrant-calendly { grid-area: highBuyerLowOffer; background: linear-gradient(165deg, rgba(165, 180, 252, 0.24), rgba(165, 180, 252, 0.12)); } .quadrant-customernode { grid-area: highBuyerHighOffer; border-color: rgba(79, 70, 229, 0.35); box-shadow: 0 25px 45px rgba(79, 70, 229, 0.3); background: linear-gradient(130deg, #3730a3, #7c3aed, #6366f1); color: #f8fafc; } .quadrant-customernode h3, .quadrant-customernode .quadrant-tag, .quadrant-customernode .quadrant-examples li { color: var(--inv-bg-color); } .quadrant-customernode:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 15px 30px rgba(79, 70, 229, 0.18); } .chart-quadrant.quadrant-customernode.active-quadrant { transform: translate(15px, -15px); opacity: 1 !important; } /* Keep text untouched on CN quadrant hover — override general hover rules */ .cartesian-chart .quadrant-customernode:hover .quadrant-meta { opacity: 0.9; color: #fff !important; } .cartesian-chart .quadrant-customernode:hover .quadrant-nodes { opacity: 0.95; color: #fff !important; } .quadrant-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); padding: 0.4rem 0.95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(15, 23, 42, 0.25); } .rounded-4xl { border-radius: 2.5rem; } .quadrant-examples { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--inv-bg-color); display: grid; gap: 0.35rem; line-height: 1.4; } .quadrant-examples li { position: relative; padding-left: 1.25rem; opacity: 0.9; } .quadrant-examples li::before { content: ""; position: absolute; left: 0; top: 0.65rem; width: 8px; height: 8px; border-radius: 999px; background: var(--inv-bg-color); } .problem-chart-grid .chart-quadrant:not(.quadrant-customernode) .quadrant-examples li::before { background: rgba(15, 23, 42, 0.7); box-shadow: 0 0 6px rgba(15, 23, 42, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.4); } .quadrant-examples-highlight li:first-child { font-weight: 700; } @media (max-width: 768px) { .problem-chart { padding-bottom: 4rem; } .chart-axis { letter-spacing: 0.2em; } .chart-axis-y { left: auto; right: 1rem; } .chart-axis-x { bottom: 0.5rem; } .problem-copy { padding: 2rem; } .share-copy { padding: 2rem; } .problem-chart-grid { grid-template-columns: 1fr; grid-template-areas: "highBuyerLowOffer" "highBuyerHighOffer" "lowBuyerLowOffer" "lowBuyerHighOffer"; } .cartesian-chart { padding-bottom: 4rem; } .cartesian-chart .cartesian-grid { grid-template-columns: 1fr; min-height: auto; } .cartesian-chart .chart-axis-y { left: auto; right: 0.5rem; } .cartesian-chart .chart-axis span { font-size: 0.5rem; letter-spacing: 0.2em; } } @media (max-width: 800px) { .problem-chart { padding: 0.5rem; min-height: auto; margin-top: 60px; } .problem-chart-mobile { display: none !important; } .cartesian-chart .cartesian-grid { display: grid; min-height: auto; padding: 0; gap: 2px; } .cartesian-chart .chart-axis { display: flex; } .cartesian-chart .chart-axis span { font-size: 0.5rem; letter-spacing: 0.15em; padding: 0.2rem 0.5rem; } .cartesian-chart .chart-axis-y { left: -25px; width: fit-content; } .cartesian-chart .chart-axis-x { bottom: -30px; } .cartesian-chart .quadrant-title { font-size: 0.65rem; word-spacing: 100vw; } .cartesian-chart .quadrant-nodes { font-size: 0.45rem; } .cartesian-chart .quadrant-nodes--stacked .quadrant-line { font-size: 0.6rem; padding: 0; } .cartesian-chart .chart-quadrant { padding: clamp(0.6rem, 0.5vw, 0.7rem) 0.4rem; gap: 0.4rem; } .problem-section .problem-copy .quadrant-meta { font-size: 0.5rem; } .quadrant-coords { font-size: 0.35rem; justify-content: center; align-items: center; } .chart-quadrant.quadrant-customernode.active-quadrant { transform: translate(-9px, -20px) !important; scale: 1.2; } .navigator-ring .ring-nav-chevron, .navigator-ring .ring-nav-counter { bottom: -30px !important; } .chart-quadrant > * { padding-left: 0 !important; padding-right: 0 !important; } .problem-copy { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; } } @media (max-width: 640px) { .problem-section { padding-top: 7rem !important; padding-bottom: 3rem; } .problem-copy { padding: clamp(1.4rem, 6vw, 1.8rem); border-radius: 24px; } .share-copy { padding: clamp(1.4rem, 6vw, 1.8rem); border-radius: 24px; } .problem-chart { border-radius: 28px; } .problem-chart-grid { gap: 0.85rem; padding: 1rem; } .problem-chart-grid::before, .problem-chart-grid::after { display: none; } .cartesian-chart .cartesian-grid::before, .cartesian-chart .cartesian-grid::after { opacity: 0.3; } .cartesian-chart .cartesian-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); } .problem-chart-grid { grid-template-columns: 1fr; } .chart-quadrant { min-height: auto; } .chart-quadrant .quadrant-title { width: 100%; max-width: none; } .quadrant-coords { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .problem-copy { padding: 1.2rem; } .share-copy { padding: 1.2rem; } .problem-pill { letter-spacing: 0.3em; } .chart-quadrant .quadrant-nodes, .chart-quadrant .quadrant-examples { font-size: 0.85rem; } } @media (max-width: 500px) { .stage-progress-card { min-width: 90vw; padding: 20px !important; z-index: 1000; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 8%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent) 100%) !important; backdrop-filter: blur(20px) saturate(1.2) !important; -webkit-backdrop-filter: blur(20px) saturate(1.2) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 15%, transparent) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; position: relative; transform: translateZ(50px); } } .glass { /* background: rgba(15, 15, 20, 0.7); */ /* backdrop-filter: blur(12px); */ /* border: 1px solid rgba(255, 255, 255, 0.1); */ box-shadow: var(--headerShadow); background-color: var(--main-bg-color) !important; color: var(--inv-bg-color) !important; } .stage-label { color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent) !important; font-size: 9px; letter-spacing: 0.12em; margin-bottom: 8px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-weight: 600; text-transform: uppercase; } /* Tiny horizontal stage header */ .stage-header-row { display: flex; align-items: center; justify-content: flex-start; padding-bottom: 0.35rem; margin-bottom: 0.35rem; gap: 0.6rem; border-bottom: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .currStage { color: var(--lightblue) !important; font-weight: 700; letter-spacing: 0.08em; transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); text-shadow: none; font-size: 11px; opacity: 1; text-transform: uppercase; white-space: nowrap; min-width: 70px; flex-shrink: 0; text-align: left; } .currStage.is-transitioning { opacity: 0; transform: scale(0.55); } /* Stage context positioned at bottom left of navigator ring */ .stage-context { position: absolute; bottom: -8px; left: 150px; color: var(--inv-bg-color); font-size: 8px; opacity: 0.5; font-weight: 500; letter-spacing: 0.04em; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; text-transform: none; white-space: nowrap; } /* Inline subtle progress bar */ .stage-header-row .stage-progress-bar { display: block; position: relative; overflow: visible; height: 15px; width: 80px; flex-shrink: 0; border-radius: 9999px; background: color-mix(in srgb, var(--purple) 8%, transparent); margin-left: auto; align-self: flex-start; margin-top: 0px; } .stage-header-row .stage-progress-fill { display: block; height: 100%; width: var(--bar-width, 0%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--lightblue) 50%, transparent), color-mix(in srgb, var(--blurpleblue) 50%, transparent)); transition: width 0.5s ease-in-out; } .stage-header-row .stage-progress-percent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% - 1px)); font-size: 10px; font-weight: 600; color: var(--inv-bg-color); opacity: 0.6; white-space: nowrap; pointer-events: none; z-index: 1; } .navigator-ring svg, .navigator-ring svg *{ color: var(--inv-bg-color) !important ; }.hero.particles .hero-gradient, .surface-beat--navigate.particles .surface-beat--navigate-gradient{ background: /* Bottom-centric indigo glow — a soft, cohesive light source rising from the base of the section rather than lighting it from the top. Single hue, low intensity; it grounds the hero and lets the headline sit on clean ground above it. Theme-aware via the shared tokens; the grain ::after adds the tactile depth. */ radial-gradient(ellipse 88% 56% at 50% 100%, color-mix(in srgb, var(--indigo) 13%, transparent) 0%, transparent 62%), radial-gradient(ellipse 54% 40% at 50% 111%, color-mix(in srgb, var(--purple) 9%, transparent) 0%, transparent 58%), radial-gradient(ellipse 48% 40% at 22% 97%, color-mix(in srgb, var(--indigo) 6%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--main-bg-color) 0%, var(--main-bg-color) 46%, var(--off-bg-color) 100%); background-size: 100% 100%; animation: none; }.hero.particles .hero-gradient::after, .surface-beat--navigate.particles .surface-beat--navigate-gradient::after{ content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 128px 128px; opacity: 0.04; pointer-events: none; mix-blend-mode: overlay; }.hero-tag, .surface-beat--navigate-tag{ display: inline-flex; align-items: center; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.65; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); margin-bottom: 1.5rem; text-decoration: none !important; cursor: pointer; transition: opacity 0.3s ease, border-color 0.3s ease; }.hero-tag:hover, .surface-beat--navigate-tag:hover{ opacity: 1; border-color: color-mix(in srgb, var(--purple) 30%, transparent); }.hero-tag-inline, .surface-beat--navigate-tag-inline{ display: none; margin-bottom: 0; } @media (min-width: 768px) {.hero-tag-inline, .surface-beat--navigate-tag-inline{ display: inline-flex; }.hero-tag:not(.hero-tag-inline), .surface-beat--navigate-tag:not(.surface-beat--navigate-tag-inline){ display: none; } }.hero-tag-gradient, .surface-beat--navigate-tag-gradient{ margin-left: 0.3em; background: linear-gradient(160deg, var(--blurpleblue), var(--blurple), var(--purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 700; opacity: 1; }a.hero-tag-gradient, a.surface-beat--navigate-tag-gradient{ margin-left: 0; text-decoration: none; transition: opacity 0.2s ease; }a.hero-tag-gradient:hover, a.surface-beat--navigate-tag-gradient:hover{ opacity: 0.8; }.hero-headline, .surface-beat--navigate-headline{ font-family: var(--brand-font); font-size: 2.4rem; margin-bottom: 1rem; max-width: 20ch; letter-spacing: -0.03em; line-height: 1.1; font-weight: 600 !important; color: var(--inv-bg-color); }.hero .desc-text-hero, .surface-beat--navigate .desc-text-hero{ margin-bottom: 2rem !important; font-size: 0.85rem !important; max-width: 28rem !important; line-height: 1.7; letter-spacing: 0.015em; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent) !important; }.hero-kicker-inline, .surface-beat--navigate-kicker-inline{ text-decoration: none !important; color: inherit !important; }.hero-kicker-inline .hero-kicker-term, .surface-beat--navigate-kicker-inline .surface-beat--navigate-kicker-term{ font-weight: 600; }.hero .hero-btn-minimal, .surface-beat--navigate .surface-beat--navigate-btn-minimal{ font-size: 0.9rem; } @media (max-width: 767px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 2rem; }.hero .hero-btn-minimal[href="#problem"], .surface-beat--navigate .surface-beat--navigate-btn-minimal[href="#problem"]{ display: none; }.hero-scroll-cue, .surface-beat--navigate-scroll-cue{ display: none; }.hero-tag, .surface-beat--navigate-tag{ display: none; }.hero-text-link[href="#problem"], .surface-beat--navigate-text-link[href="#problem"]{ display: inline-flex; } } /* ---- Hero text gradient shimmer ---- */.hero h1 .bg-gradient-to-r, .surface-beat--navigate h1 .bg-gradient-to-r{ background-size: 200% 100%; animation: heroTextShimmer 5s ease-in-out infinite; } .glow-border:hover { border-color: #6366f1; box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); } .navigator-ring { --navigator-size: clamp(300px, calc(100vw - 40px), 580px); --node-distance: calc(var(--navigator-size) / 2 - 2px); width: var(--navigator-size); height: var(--navigator-size); position: relative; filter: drop-shadow(0 2px 8px color-mix(in srgb, var(--inv-bg-color) 6%, transparent)) drop-shadow(0 0 60px color-mix(in srgb, var(--purple) 6%, transparent)); /* transform: perspective(1000px) rotateX(18deg); */ } /* Navigation chevrons - positioned on stage-progress-card */ .stage-progress-card { position: relative; } /* Navigation buttons positioned at bottom right of navigator ring */ .navigator-ring .ring-nav-chevron { position: absolute; bottom: -20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-radius: 10px; cursor: pointer; opacity: 0.3; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all 0.3s ease; z-index: 10; pointer-events: auto; } .navigator-ring .ring-nav-chevron:hover { opacity: 0.6; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent); transform: scale(1.05); } .navigator-ring .ring-nav-chevron svg { width: 20px; height: 20px; stroke: var(--inv-bg-color); stroke-width: 2.5; } .navigator-ring .ring-nav-prev { right: 52px; } .navigator-ring .ring-nav-counter { position: absolute; bottom: -20px; right: 46px; transform: translateX(50%); color: var(--inv-bg-color); font-size: 11px; opacity: 0.4; font-weight: 500; white-space: nowrap; pointer-events: none; letter-spacing: 0.02em; height: 40px; display: flex; align-items: center; } .navigator-ring .ring-nav-next { right: 0px; } /* ---- Tick marks around the ring (watch bezel style) ---- */ .navigator-ring-ticks { display: none ; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; z-index: 1; background: repeating-conic-gradient( from 0deg, transparent 0deg, transparent 2deg, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 2deg, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 3deg, transparent 3deg, transparent 6deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px), #000 calc(100% - 2px), transparent calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px), #000 calc(100% - 2px), transparent calc(100% - 2px)); opacity: 0.3; } /* ---- Ecosystem connector lines — infrastructure hint ---- */ .navigator-ring-connectors { position: absolute; inset: -40px; pointer-events: none; z-index: 0; } .navigator-ring-connectors::before, .navigator-ring-connectors::after, .navigator-connector-line { content: ""; position: absolute; width: 1px; height: 60px; background: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg-color) 8%, transparent) 0%, transparent 100%); opacity: 0.15; } .navigator-ring-connectors::before { top: 0; left: 50%; transform: translateX(-50%) rotate(25deg); transform-origin: top center; } .navigator-ring-connectors::after { bottom: 0; left: 50%; transform: translateX(-50%) rotate(-35deg); transform-origin: bottom center; } .navigator-connector-line { top: 50%; right: 0; transform: translateY(-50%) rotate(15deg); transform-origin: right center; } .navigator-ring-track { position: absolute; inset: 0; /* To restore spin: animation: spin 80s linear infinite; */ } /* ---- Primary ring — segmented precision dial ---- */ .navigator-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; /* Render a thin (1px) ring: remove border and rely on masked conic-gradient */ border: none; background: conic-gradient( var(--green) 0deg 0deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg ); /* Mask out the center to make a 1px ring band */ -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), transparent 100%); box-shadow: 0 0 4px color-mix(in srgb, var(--green) 6%, transparent), inset 0 0 3px color-mix(in srgb, var(--secondary-grey-color) 4%, transparent); /* To restore spin: animation: spin 80s linear infinite; */ transition: background 1s cubic-bezier(0.4, 0, 0.2, 1); /* ensure ring paints above the inner fill */ z-index: 2; } /* ─── Stage progress ring (UNIFIED) ─── * One rule replaces the 6 hardcoded `.navigator-ring--progress-N::before` * variants that previously had misaligned angles (e.g. progress-1 painted * green from 0° to 0° instead of 0° to 60°, progress-2 stopped at 40° * instead of 120°, etc.). Now both the ::before AND the separate * `.navigator-ring-completion-arc` element read from the SAME source of * truth — the `--completion-percent` CSS variable set by activateStage() * in JS. Pixel-perfect alignment with the stage nodes because the formula * is geometric: pct = idx/N * 100 → green fills to idx*(360/N)° which is * exactly where node idx sits on the ring. * * SMOOTH ARC TWEEN: `--completion-percent` is registered via @property * with syntax ``. Unregistered custom props are interpolated as * strings — so a change from "16.7" to "33.3" would jump the gradient * instantly. Registering it as a number lets the transition tween the * value, and the conic-gradient consuming `var(--completion-percent)` * recomputes per frame, smoothly extending the green arc between stages. */ @property --completion-percent { syntax: ''; inherits: true; initial-value: 0; } .navigator-ring::before { /* No `from` clause — default 0° = 12 o'clock = Discovery's position. * Conic gradient goes clockwise from there. Without this fix, the * old completion-arc used `from -90deg` which shifted the start to * 9 o'clock and made every progress arc render in the wrong place. */ background: conic-gradient( var(--green) 0%, var(--green) calc(var(--completion-percent, 0) * 1%), color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) calc(var(--completion-percent, 0) * 1%), color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 100% ) !important; } /* Hide the duplicate completion-arc element — the ::before above does * the green-arc job, and having two arcs at slightly different radii * was creating the "sometimes the arc is wrong" visual jitter. */ .navigator-ring-completion-arc { display: none !important; } /* 4-stage progress ring (90-degree increments) */ [data-stage-count="4"].navigator-ring--progress-0::before { background: conic-gradient( var(--green) 0deg 0deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg ); } [data-stage-count="4"].navigator-ring--progress-1::before { background: conic-gradient( var(--green) 0deg, var(--lightblue) 90deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 90deg 360deg ); } [data-stage-count="4"].navigator-ring--progress-2::before { background: conic-gradient( var(--green) 0deg 60deg, var(--lightblue) 180deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 180deg 360deg ); } [data-stage-count="4"].navigator-ring--progress-3::before { background: conic-gradient( var(--green) 0deg 150deg, var(--lightblue) 270deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 270deg 360deg ); } /* 5-stage progress ring (72-degree increments) */ [data-stage-count="5"].navigator-ring--progress-0::before { background: conic-gradient( var(--green) 0deg 0deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 0deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-1::before { background: conic-gradient( var(--green) 0deg, var(--lightblue) 72deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 72deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-2::before { background: conic-gradient( var(--green) 0deg 50deg, var(--lightblue) 144deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 144deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-3::before { background: conic-gradient( var(--green) 0deg 120deg, var(--lightblue) 216deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 216deg 360deg ); } [data-stage-count="5"].navigator-ring--progress-4::before { background: conic-gradient( var(--green) 0deg 190deg, var(--lightblue) 288deg, color-mix(in srgb, var(--secondary-grey-color) 72%, transparent) 288deg 360deg ); } .navigator-ring::after { content: ""; position: absolute; /* inset matches the 1px ring so inner fill sits flush inside */ inset: 1px; border-radius: 50%; background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 55%, color-mix(in srgb, var(--purple) 4%, transparent) 75%, color-mix(in srgb, var(--purple) 6%, transparent) 90%, transparent 100%); z-index: 1; pointer-events: none; } /* ---- Sweeping arc light — blurple→purple scanning effect ---- */ /* .navigator-ring::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient( from 0deg, transparent 0deg, transparent 260deg, color-mix(in srgb, var(--blurple) 4%, transparent) 280deg, color-mix(in srgb, var(--blurple) 35%, transparent) 330deg, color-mix(in srgb, var(--purple) 60%, transparent) 350deg, color-mix(in srgb, var(--blurple) 4%, transparent) 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px), #000 100%, transparent 100%); animation: spin 4s linear infinite; filter: blur(0.5px); } */ /* ---- Transit particles (fire on stage change, node → node) ---- */ .nav-transit { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 8px 3px color-mix(in srgb, var(--purple) 70%, transparent), 0 0 24px color-mix(in srgb, var(--blurple) 40%, transparent), 0 0 40px color-mix(in srgb, var(--purple) 15%, transparent); pointer-events: none; animation: navTransit 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .nav-transit:nth-child(2) { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; animation-delay: 0.08s; } .nav-transit:nth-child(3) { width: 2px; height: 2px; margin: -1px 0 0 -1px; animation-delay: 0.16s; opacity: 0.7; } @keyframes navTransit { 0% { transform: rotate(var(--from-angle)) translateY(calc(-1 * var(--node-distance))); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(var(--to-angle)) translateY(calc(-1 * var(--node-distance))); opacity: 0; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes counter-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } @media (prefers-reduced-motion: reduce) { .navigator-ring::before, .navigator-ring::after { animation: none; } .navigator-ring-track, .stage-node-face { animation: none; } .nav-transit, .stage-burst { display: none; } .navigator-ring-arc2, .navigator-ring-motes { display: none; }.hero.particles .hero-gradient, .surface-beat--navigate.particles .surface-beat--navigate-gradient{ animation: none; }.hero h1 .bg-gradient-to-r, .surface-beat--navigate h1 .bg-gradient-to-r{ animation: none; } } /* ---- Stage-change burst wave ---- */ .stage-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(139, 120, 248, 0.6); box-shadow: 0 0 15px rgba(139, 120, 248, 0.3), inset 0 0 10px rgba(139, 120, 248, 0.1); animation: burstExpand 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: none; } @keyframes burstExpand { 0% { width: 100%; height: 100%; opacity: 0.8; box-shadow: 0 0 20px rgba(139, 120, 248, 0.4), inset 0 0 15px rgba(139, 120, 248, 0.15); } 100% { width: 280%; height: 280%; opacity: 0; box-shadow: 0 0 4px rgba(139, 120, 248, 0); } } /* ---- Center core glow — minimal premium halo ---- */ .navigator-ring-glow { position: absolute; top: 50%; left: 50%; width: 55%; height: 55%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, color-mix(in srgb, var(--purple) 1.5%, transparent) 45%, transparent 70%); animation: ringCoreBreath 3.5s ease-in-out infinite; pointer-events: none; z-index: 0; } @keyframes ringCoreBreath { 0%, 100% { opacity: 0.12; transform: translate(-50%, -50%) scale(0.85); } 50% { opacity: 0.3; transform: translate(-50%, -50%) scale(1.15); } } /* ---- Circle micro-label — centered inside ring ---- */ .navigator-ring-micro-label { position: absolute; bottom: -10px; left: 0; z-index: 2; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.55; pointer-events: none; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .micro-label-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: microPulse 2s ease-in-out infinite; } @keyframes microPulse { 0%, 100% { opacity: 0.4; box-shadow: 0 0 0 0 transparent; } 50% { opacity: 1; box-shadow: 0 0 6px 2px color-mix(in srgb, var(--green) 40%, transparent); } } /* The "double ring" was .navigator-ring-arc2: a purple sweep at inset:-1px (outside the primary ring's stroke) that read as a concentric second band. Killing only that one. The completion arc (.navigator-ring-completion-arc, inset:0) overlays the SAME stroke as the primary ring — it's progress along the one ring, not a second ring. Keep it. */ .navigator-ring-arc2 { display: none !important; } /* ---- Completion arc — green 1px ring following active node ---- */ .navigator-ring-completion-arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( from -90deg, var(--green) 0%, var(--green) calc(var(--completion-percent, 0) * 1%), transparent calc(var(--completion-percent, 0) * 1%) ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px), #000 100%, transparent 100%); pointer-events: none; z-index: 2; opacity: 1; transition: opacity 0.6s ease; } .navigator-ring[data-completion-percent]:not([data-completion-percent="0"]) .navigator-ring-completion-arc { opacity: 1; } /* ---- Ambient orbiting motes — DISABLED for precision instrument look ---- */ .navigator-ring-motes { display: none; /* Removed: no sparkles/particles for category-king design */ position: absolute; inset: 0; pointer-events: none; z-index: 0; } .navigator-ring-motes i { position: absolute; top: 50%; left: 50%; width: var(--mote-size, 2px); height: var(--mote-size, 2px); margin: calc(var(--mote-size, 2px) / -2) 0 0 calc(var(--mote-size, 2px) / -2); border-radius: 50%; background: color-mix(in srgb, var(--blurple) 80%, var(--purple)); box-shadow: 0 0 6px 1px color-mix(in srgb, var(--blurple) 35%, transparent); animation: moteOrbit var(--mote-dur, 18s) linear infinite, motePulse var(--mote-fade, 6s) ease-in-out infinite; animation-delay: var(--mote-delay, 0s); } .navigator-ring-motes i:nth-child(1) { --mote-dur: 18s; --mote-fade: 5s; --mote-r: calc(var(--node-distance) * -0.82); --mote-size: 2px; --mote-delay: 0s; } .navigator-ring-motes i:nth-child(2) { --mote-dur: 25s; --mote-fade: 7s; --mote-r: calc(var(--node-distance) * -1.08); --mote-size: 1.5px; --mote-delay: -5s; } .navigator-ring-motes i:nth-child(3) { --mote-dur: 14s; --mote-fade: 4.5s; --mote-r: calc(var(--node-distance) * -0.65); --mote-size: 2.5px; --mote-delay: -9s; } .navigator-ring-motes i:nth-child(4) { --mote-dur: 22s; --mote-fade: 8s; --mote-r: calc(var(--node-distance) * -1.15); --mote-size: 1.5px; --mote-delay: -12s; } .navigator-ring-motes i:nth-child(5) { --mote-dur: 30s; --mote-fade: 9s; --mote-r: calc(var(--node-distance) * -0.55); --mote-size: 2px; --mote-delay: -3s; } .navigator-ring-motes i:nth-child(6) { --mote-dur: 20s; --mote-fade: 6s; --mote-r: calc(var(--node-distance) * -0.95); --mote-size: 1px; --mote-delay: -16s; } @keyframes moteOrbit { from { transform: rotate(0deg) translateY(var(--mote-r)); } to { transform: rotate(360deg) translateY(var(--mote-r)); } } @keyframes motePulse { 0%, 15%, 85%, 100% { opacity: 0; } 35%, 65% { opacity: 0.6; } 50% { opacity: 0.8; } } /* ---- Hero background ambient drift ---- */ @keyframes heroBgDrift { 0%, 100% { background-position: 40% 40%, 60% 60%, 0 0; } 33% { background-position: 60% 35%, 40% 55%, 0 0; } 66% { background-position: 45% 60%, 55% 40%, 0 0; } } /* ---- Hero text gradient shimmer ---- */ @keyframes heroTextShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- Ring border breath ---- */ @keyframes ringBorderBreath { 0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.12), 0 0 40px rgba(139, 92, 246, 0.06), inset 0 0 15px rgba(99, 102, 241, 0.06); border-color: rgba(99, 102, 241, 0.25); } 50% { box-shadow: 0 0 25px rgba(99, 102, 241, 0.22), 0 0 60px rgba(139, 92, 246, 0.12), inset 0 0 25px rgba(99, 102, 241, 0.1); border-color: rgba(129, 120, 248, 0.38); } } .stage-node { --node-angle: 0deg; --stage-node-color: var(--inv-bg-color); --node-transform: translate(-50%, -50%) rotate(var(--node-angle)) translateY(calc(-1 * var(--node-distance))) rotate(calc(-1 * var(--node-angle))); position: absolute; top: 50%; left: 50%; width: 80px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px !important; background: color-mix(in srgb, var(--main-bg-color) 82%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; transform: var(--node-transform); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), height 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; color: var(--stage-node-color) !important; z-index: 999999; } .stage-node svg, .stage-node svg * { color: var(--stage-node-color) !important; margin: 0px !important; width: 0.95rem; height: 0.95rem; transition: 0.3s all; } .stage-node-face { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; /* To restore counter-spin: animation: counter-spin 80s linear infinite; */ } .stage-node-index { font-size: 1.05rem; font-weight: 700; color: var(--stage-node-color); } .stage-node.is-active { opacity: 1 !important; background: color-mix(in srgb, var(--main-bg-color) 86%, var(--blurple)) !important; border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent) !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--blurple) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; transform: var(--node-transform) scale(1); animation: none; } @keyframes activeNodePulse { 0%, 100% { box-shadow: 0 0 30px color-mix(in srgb, var(--purple) 40%, transparent), 0 0 60px color-mix(in srgb, var(--blurple) 25%, transparent), 0 0 90px color-mix(in srgb, var(--purple) 10%, transparent), 0 12px 30px color-mix(in srgb, var(--blurple) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 15%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 45%, transparent) !important; } 50% { box-shadow: 0 0 40px color-mix(in srgb, var(--purple) 55%, transparent), 0 0 80px color-mix(in srgb, var(--blurple) 30%, transparent), 0 0 110px color-mix(in srgb, var(--purple) 15%, transparent), 0 12px 30px color-mix(in srgb, var(--blurple) 30%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 55%, transparent) !important; } } .stage-node.is-active *{ color: color-mix(in srgb, var(--lightblue) 50%, var(--lightblue)) !important; } .white{ color: var(--white) !important; } /* Stage NAME label — replaces the icon AND preview animation on every * node by default. Each node carries `data-stage="Discovery"` etc., so * we render that via a pseudo on .stage-node. Both the icon * (.stage-node-index) and the active-state animation (.stage-node-preview) * are hidden so only the name shows. Completed nodes hide the name and * show a ✓ check. * * NOTE: Using ::after — not ::before — because a separate legacy rule * `.stage-node.v6-is-active::before { content: '' }` paints a glow * background and would clobber any name content we tried to put there. */ .stage-node .stage-node-index, .stage-node .stage-node-preview { display: none; } .stage-node::after { content: attr(data-stage); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--brand-font); font-size: 11px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--stage-node-color); white-space: nowrap; pointer-events: none; z-index: 3; /* Crossfade with the .stage-node-face::after checkmark when the * node flips to done. Was `content: ""` swap — that can't animate. */ opacity: 1; transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), color 480ms ease; } /* Active node — solid blurple gradient background so the white stage * name on ::after reads clearly. The original .stage-node.is-active * rule (line 3377) uses an !important faint-cyan tint that we override * here. Must come AFTER the legacy rule in source order to win. */ .stage-node.v6-is-active, .stage-node.is-active { background: color-mix(in srgb, var(--main-bg-color) 86%, var(--blurple)) !important; border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent) !important; box-shadow: 0 4px 16px color-mix(in srgb, var(--blurple) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; } .stage-node.v6-is-active::after, .stage-node.is-active::after { color: var(--blurple) !important; font-weight: 700; z-index: 3; } /* Completed stage nodes: fade out the name, fade in the checkmark. * Both pseudos are always rendered with their content; opacity is what * actually animates between them — so the active-name → done-check swap * is a smooth crossfade instead of an instant content swap. */ .stage-node.is-complete::after, .stage-node.v6-is-done::after { opacity: 0; } /* The face::after is always there with the check; opacity gates it. * Green check on the node's neutral default background — NOT white on * a green background. Completed nodes match inactive nodes in chrome, * only the check marks them done. */ .stage-node .stage-node-face::after { content: "\2713"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.95rem; font-weight: 700; color: var(--green); line-height: 1; z-index: 3; opacity: 0; transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1) 120ms; pointer-events: none; } .stage-node.is-complete .stage-node-face::after, .stage-node.v6-is-done .stage-node-face::after { opacity: 1; } /* (The dedicated .stage-node-face::after rule + opacity gating above * handles the completed-state check. The legacy duplicate that lived * here was overriding our color with a dim green — removed.) */ .stage-node.is-complete{ /* background: color-mix(in srgb, var(--main-bg-color) 98%, var(--main-bg-color) 2%) !important; */ border: 0.5px solid color-mix(in srgb, var(--green) 8%, transparent) !important; opacity: 1 !important; } /* Default 6-stage positioning (60deg apart) */ .stage-node[data-stage-index="0"] { --node-angle: 0deg; } .stage-node[data-stage-index="1"] { --node-angle: 60deg; } .stage-node[data-stage-index="2"] { --node-angle: 120deg; } .stage-node[data-stage-index="3"] { --node-angle: 180deg; } .stage-node[data-stage-index="4"] { --node-angle: 240deg; } .stage-node[data-stage-index="5"] { --node-angle: 300deg; } /* 4-stage positioning (90deg apart) */ [data-stage-count="4"] .stage-node[data-stage-index="0"] { --node-angle: 0deg; } [data-stage-count="4"] .stage-node[data-stage-index="1"] { --node-angle: 90deg; } [data-stage-count="4"] .stage-node[data-stage-index="2"] { --node-angle: 180deg; } [data-stage-count="4"] .stage-node[data-stage-index="3"] { --node-angle: 270deg; } /* 5-stage positioning (72deg apart) */ [data-stage-count="5"] .stage-node[data-stage-index="0"] { --node-angle: 0deg; } [data-stage-count="5"] .stage-node[data-stage-index="1"] { --node-angle: 72deg; } [data-stage-count="5"] .stage-node[data-stage-index="2"] { --node-angle: 144deg; } [data-stage-count="5"] .stage-node[data-stage-index="3"] { --node-angle: 216deg; } [data-stage-count="5"] .stage-node[data-stage-index="4"] { --node-angle: 288deg; } /* ========== STAGE NODE MICRO-PREVIEWS ========== */ .stage-node-face { position: relative; flex-direction: column; gap: 0; } .stage-node-preview { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%) scale(0.3); opacity: 0; width: 44px; height: 28px; pointer-events: none; transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .stage-node-preview svg { width: 100%; height: 100%; display: block; overflow: visible; } .stage-node .stage-node-index { transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .stage-node.is-active .stage-node-index { opacity: 0; transform: scale(0.5); } .stage-node.is-active .stage-node-preview { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 0.1s; } /* ---- Base hidden state for all animated strokes ---- */ .disc-line, .disc-ring, .disc-cardinal, .scope-box, .scope-line, .scope-chk, .commit-sig, .deploy-bar, .collab-deploy-bar, .success-ring, .success-chk { stroke-dasharray: 1; stroke-dashoffset: 1; } .disc-dot, .disc-needle { opacity: 0; } .exp-eye { opacity: 0; transform: translateY(0); } .collab-deploy-text, .collab-deploy-bar-4, .collab-deploy-bar-5 { opacity: 0; } /* ---- Motion keyframes ---- */ /* Smooth stroke draw */ @keyframes pvDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* Dot appearance */ @keyframes pvDotIn { from { opacity: 0; } to { opacity: 0.85; } } /* Experience eye shift up and fade */ @keyframes expEyeShiftUp { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } /* Experience eye reveal from below */ @keyframes expEyeReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Organic signature — variable velocity, pen-pressure feel */ @keyframes pvSig { 0% { stroke-dashoffset: 1; } 30% { stroke-dashoffset: 0.5; } 65% { stroke-dashoffset: 0.12; } 100% { stroke-dashoffset: 0; } } /* Decisive check stroke */ @keyframes pvCheck { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } /* Breathing dot pulse */ @keyframes pvDotPulse { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.6); opacity: 1; } } /* Deploy bars turn green on completion */ @keyframes deployGreen { from { stroke: currentColor; } to { stroke: #10b981; } } /* Compass needle wobble */ @keyframes discNeedleWobble { 0% { transform: rotate(0deg); } 15% { transform: rotate(-25deg); } 35% { transform: rotate(20deg); } 55% { transform: rotate(-15deg); } 75% { transform: rotate(10deg); } 90% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } /* Scope tuner handle slides */ @keyframes scopeTune1 { 0% { transform: translateY(7px); } 35% { transform: translateY(-9px); } 65% { transform: translateY(3px); } 85% { transform: translateY(-1px); } 100% { transform: translateY(0); } } @keyframes scopeTune2 { 0% { transform: translateY(-8px); } 30% { transform: translateY(6px); } 60% { transform: translateY(-3px); } 80% { transform: translateY(1px); } 100% { transform: translateY(0); } } @keyframes scopeTune3 { 0% { transform: translateY(6px); } 40% { transform: translateY(-7px); } 70% { transform: translateY(2px); } 100% { transform: translateY(0); } } /* ---- DISCOVERY — compass with wobbling needle ---- */ .stage-node.is-active .disc-ring { animation: pvDraw 0.5s 0.08s cubic-bezier(0.16,1,0.3,1) both; } .stage-node.is-active .disc-cardinal { animation: pvDraw 0.3s 0.35s cubic-bezier(0.16,1,0.3,1) both; } .stage-node.is-active .disc-needle { animation: pvDotIn 0.2s 0.5s cubic-bezier(0.34,1.56,0.64,1) both, discNeedleWobble 1.2s 0.7s cubic-bezier(0.34,1.56,0.64,1) both; } /* ---- EXPERIENCE — two-layer eye reveal ---- */ .stage-node.is-active .exp-eye-1 { animation: expEyeShiftUp 0.6s 0.08s cubic-bezier(0.16,1,0.3,1) both; } .stage-node.is-active .exp-eye-2 { animation: expEyeReveal 0.6s 0.4s cubic-bezier(0.34,1.56,0.64,1) both; } /* ---- SCOPE — tuner tracks draw then handles slide into position ---- */ .stage-node.is-active .scope-box-1 { animation: pvDraw 0.3s 0.08s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-line-1 { animation: pvDraw 0.3s 0.14s cubic-bezier(0.16,1,0.3,1) both, scopeTune1 0.7s 0.4s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-box-2 { animation: pvDraw 0.3s 0.22s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-line-2 { animation: pvDraw 0.3s 0.28s cubic-bezier(0.16,1,0.3,1) both, scopeTune2 0.7s 0.55s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-box-3 { animation: pvDraw 0.3s 0.36s cubic-bezier(0.22,1,0.36,1) both; } .stage-node.is-active .scope-line-3 { animation: pvDraw 0.3s 0.42s cubic-bezier(0.16,1,0.3,1) both, scopeTune3 0.7s 0.7s cubic-bezier(0.22,1,0.36,1) both; } /* ---- COMMIT — organic signature flow ---- */ .stage-node.is-active .commit-sig { animation: pvSig 0.85s 0.45s cubic-bezier(0.16,1,0.3,1) both; } /* ---- DEPLOY — gantt bars with spring-bounce stagger ---- */ .stage-node.is-active .deploy-bar-1 { animation: pvDraw 0.5s 0.1s cubic-bezier(0.34,1.56,0.64,1) both; } .stage-node.is-active .deploy-bar-2 { animation: pvDraw 0.5s 0.28s cubic-bezier(0.34,1.56,0.64,1) both; } .stage-node.is-active .deploy-bar-3 { animation: pvDraw 0.5s 0.46s cubic-bezier(0.34,1.56,0.64,1) both; } /* ---- COLLABORATION SPACE DEPLOY — 6-step scope removal sequence ---- */ /* Trigger these when Deploy stage is active in collab space */ .collab-deploy-viz.is-active .collab-deploy-bar-1 { animation: pvDraw 0.4s 0s cubic-bezier(0.34,1.56,0.64,1) both; } .collab-deploy-viz.is-active .collab-deploy-bar-2 { animation: collabDeployBar2Sequence 3s 0s both; } .collab-deploy-viz.is-active .collab-deploy-bar-3 { animation: collabDeployBar3Sequence 3s 0s both; } .collab-deploy-viz.is-active .collab-deploy-bar-4 { animation: collabDeployBar4Appear 0.4s 1.2s cubic-bezier(0.34,1.56,0.64,1) both; } .collab-deploy-viz.is-active .collab-deploy-bar-5 { animation: collabDeployBar5Appear 0.4s 2.5s cubic-bezier(0.34,1.56,0.64,1) both; } .collab-deploy-viz.is-active .collab-deploy-remove-text { animation: collabDeployRemoveText 3s 0s both; } .collab-deploy-viz.is-active .collab-deploy-schedule-text { animation: collabDeployScheduleText 3s 0s both; } /* (1) Bar 2 draws in, (2) turns red, (3) fades out */ @keyframes collabDeployBar2Sequence { 0% { stroke-dashoffset: 1; stroke: currentColor; opacity: 1; } 13% { stroke-dashoffset: 0; stroke: currentColor; opacity: 1; } 27% { stroke-dashoffset: 0; stroke: var(--alert-red-start); opacity: 1; } 40%, 100% { stroke-dashoffset: 0; stroke: var(--alert-red-end); opacity: 0; } } /* (1) Bar 3 draws in, (3) moves up to position 2 (y=60), (5) moves left */ @keyframes collabDeployBar3Sequence { 0% { stroke-dashoffset: 1; transform: translate(0, 0); } 20% { stroke-dashoffset: 0; transform: translate(0, 0); } 40% { stroke-dashoffset: 0; transform: translate(0, -30px); } 73% { stroke-dashoffset: 0; transform: translate(0, -30px); } 100% { stroke-dashoffset: 0; transform: translate(-20px, -30px); } } /* (3) Bar 4 appears as new bar 3 */ @keyframes collabDeployBar4Appear { 0% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* (6) Bar 5 fills the space */ @keyframes collabDeployBar5Appear { 0% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 1; } } /* (4) "Out of scope module removed" text */ @keyframes collabDeployRemoveText { 0%, 49% { opacity: 0; } 50%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } } /* (5) "Rescheduling..." text */ @keyframes collabDeployScheduleText { 0%, 66% { opacity: 0; } 67%, 82% { opacity: 1; } 83%, 100% { opacity: 0; } } /* ---- SUCCESS — bug icon dances ---- */ .success-bug-dance { opacity: 0; transform-origin: center center; } .stage-node.is-active .success-bug-dance { animation: bugDanceIn 0.4s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes bugDanceIn { from { opacity: 0; transform: scale(0.3) rotate(-15deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } /* Bug legs jiggle animation */ .stage-node.is-active .bug-legs { transform-origin: 12px 14px; animation: bugLegsJiggle 0.8s ease-in-out infinite; } .stage-node.is-active .bug-legs-top { animation-delay: 0.5s; } .stage-node.is-active .bug-legs-mid { animation-delay: 0.6s; } .stage-node.is-active .bug-legs-bot { animation-delay: 0.7s; } @keyframes bugLegsJiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } 75% { transform: rotate(-1deg); } } @media (prefers-reduced-motion: reduce) { .stage-node-preview { display: none; } } .stage-progress-card { pointer-events: none; position: relative; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 4%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 2%, transparent) 100%) !important; backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; border-radius: 20px !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), 0 8px 32px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important; z-index: 5; width: clamp(276px, 60%, 380px) !important; padding: clamp(14px, 4%, 22px) !important; transform: scale(1); opacity: 1; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; } .stage-progress-card.is-collapsing { transform: scale(0); opacity: 0; transition: transform 0.3s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.25s ease; } .stage-progress-card.is-expanding { transform: scale(1); opacity: 1; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.05s; } .stage-progress-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurpleblue) 50%, transparent), color-mix(in srgb, var(--purple) 30%, transparent)); opacity: 0.5; z-index: 1; } .stage-progress-bar { display: none; position: relative; overflow: hidden; height: 10px; border-radius: 9999px; } .stage-progress-fill { display: block; height: 100%; width: var(--bar-width, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--blurple), var(--purple)); /* box-shadow: 0 0 10px rgba(120, 115, 245, 0.35); */ transition: width 0.5s ease-in-out; } .stage-progress-card .rounded-full{ margin: 20px 0 0 0 !important; background: none; border: none; font-size: 12px !important; color: var(--inv-bg-color); opacity: 0.8; height: 10px; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .stage-progress-card .rounded-full * { fill: var(--inv-bg-color) !important; } .powered-by{ font-size: 10px !important; color: var(--inv-bg-color); } .stage-progress-card svg{ margin-right: -5px !important; } .stage-participants { margin-top: 0.5rem; } .participants-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; margin-bottom: 0.25rem; font-weight: 600; } .participants-grid { display: flex; gap: 0.5rem; justify-content: center; align-items: flex-start; } .participant-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; overflow: visible; } .participant-side-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; font-weight: 600; text-align: left; } .participant-chips { display: flex; flex-direction: column; gap: 2px; align-items: stretch; } .participant-chip { display: flex; align-items: center; gap: 5px; padding: 4px 7px; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 6px; font-size: 8px; font-weight: 500; letter-spacing: 0.01em; color: var(--inv-bg-color); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); opacity: 0.75; box-shadow: 0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 3%, transparent); transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .participant-chip.is-accent { opacity: 0.75; } .participant-avatar { width: 12px; height: 12px; border-radius: 50%; background: var(--inv-bg-color); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--main-bg-color); font-size: 4px; flex-shrink: 0; letter-spacing: 0.02em; line-height: 1; padding-top: 0; } /* Varying shades for avatars - purple, blurple, and pink */ .participant-chip[data-color-index="0"] .participant-avatar { background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(124, 58, 237, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(139, 92, 246, 0.15); } .participant-chip[data-color-index="1"] .participant-avatar { background: linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(79, 70, 229, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(99, 102, 241, 0.15); } .participant-chip[data-color-index="2"] .participant-avatar { background: linear-gradient(135deg, rgba(168, 85, 247, 0.7), rgba(147, 51, 234, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(168, 85, 247, 0.15); } .participant-chip[data-color-index="3"] .participant-avatar { background: linear-gradient(135deg, rgba(236, 72, 153, 0.7), rgba(219, 39, 119, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(236, 72, 153, 0.15); } .participant-chip[data-color-index="4"] .participant-avatar { background: linear-gradient(135deg, rgba(59, 130, 246, 0.7), rgba(37, 99, 235, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(59, 130, 246, 0.15); } .participant-chip[data-color-index="5"] .participant-avatar { background: linear-gradient(135deg, rgba(244, 114, 182, 0.7), rgba(225, 29, 155, 0.7)); color: #fff; box-shadow: 0 0 8px rgba(244, 114, 182, 0.15); } .participant-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .participant-name { font-size: 8px; font-weight: 500; color: var(--inv-bg-color); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; } .participant-title { font-size: 7px; color: var(--inv-bg-color); opacity: 0.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; font-weight: 500; letter-spacing: 0.02em; } .participant-chip.is-entering { animation: chipEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .participant-chip.is-leaving { animation: chipLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both; } @keyframes chipEnter { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.75; transform: scale(1); } } @keyframes chipLeave { from { opacity: 0.75; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } } .participant-chip.is-accent.is-entering { animation: chipEnterAccent 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes chipEnterAccent { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.75; transform: scale(1); } } .stage-bottom-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } /* Collaboration Space */ .stage-collaboration { flex: 66; min-width: 0; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 2%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 1%, transparent) 100%); border-radius: 8px; } .collaboration-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; margin-bottom: 3px !important; font-weight: 600; text-align: left; } .collaboration-items { display: flex; flex-direction: column; gap: 3px; } .collaboration-items:has(.scope-toggle) { min-height: 110px; } .collaboration-item:nth-child(1) { z-index: 3; } .collaboration-item:nth-child(2) { z-index: 2; } .collaboration-item:nth-child(3) { z-index: 1; } .collaboration-item { height: 32px; padding: 0 10px 0 22px; box-sizing: border-box; display: flex; align-items: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); box-shadow: 0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-radius: 6px; font-size: 9px; color: var(--inv-bg-color); opacity: 0.8; text-align: left; line-height: 1; position: relative; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), margin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .collaboration-item::before { content: ''; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); opacity: 0.6; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .collaboration-item.is-working { overflow: visible; white-space: normal; line-height: 1.3; align-items: flex-start; padding-top: 5px; padding-bottom: 4px; transform: translateY(-3px); } /* Utility: hide elements without inline .style */ .is-hidden { display: none !important; } .is-faded { opacity: 0; transition: opacity 0.3s ease; } /* Discovery: typing dots via JS element instead of ::before */ .collaboration-item.discovery-item::before { display: none; } .discovery-dots { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 900; letter-spacing: 2px; color: var(--lightblue); width: 20px; opacity: 0.3; transition: all 0.2s ease; } .collaboration-item.discovery-item.is-working .discovery-dots { color: var(--lightblue); opacity: 0.7; } .collaboration-item.discovery-item.is-completed .discovery-dots { color: #22c55e; opacity: 1; font-size: 13px; font-weight: 700; letter-spacing: 0; animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .discovery-label { transition: opacity 0.2s ease; } .discovery-label.is-fading { opacity: 0; } .discovery-label.is-answered { opacity: 1; font-weight: 600; } /* Experience: calendar → pulsing dot → green check */ .collaboration-item.experience-meeting.is-working .meeting-icon { border-radius: 50%; background: var(--lightblue); box-shadow: 0 0 6px color-mix(in srgb, var(--lightblue) 60%, transparent); opacity: 1; animation: livePulse 1s ease-in-out infinite; } .collaboration-item.experience-meeting.is-working .meeting-icon svg { display: none; } .collaboration-item.experience-meeting.is-working::before { display: none; } .collaboration-item.experience-meeting.is-completed .meeting-icon { border-radius: 50%; background: #22c55e; box-shadow: none; opacity: 1; animation: none; } .collaboration-item.experience-meeting.is-completed .meeting-icon svg { display: none; } .collaboration-item.experience-meeting.is-completed .meeting-icon::after { content: '✓'; font-size: 7px; font-weight: 900; color: #fff; } @keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(239, 68, 68, 0.4); } 50% { opacity: 0.5; box-shadow: 0 0 10px rgba(239, 68, 68, 0.8); } } /* Default spinner (fallback) */ .collaboration-item.is-working::before { width: 10px; height: 10px; background: none; border: 2px solid color-mix(in srgb, var(--lightblue) 30%, transparent); border-top-color: var(--lightblue); box-shadow: none; opacity: 1; animation: spinWork 0.6s linear infinite; } @keyframes spinWork { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } .collab-activity { position: absolute; left: 22px; top: calc(71% - 4px); z-index: 10; display: flex; align-items: center; gap: 2px; font-size: 8px; font-weight: 700; color: var(--lightblue); opacity: 0; transition: opacity 0.25s ease; letter-spacing: 0.02em; max-width: 120px; } .collab-activity.is-visible { opacity: 1; } .activity-text { transition: opacity 0.15s ease, transform 0.15s ease; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .activity-text.is-swapping { opacity: 0; transform: translateY(-2px); } .activity-dots::after { content: '...'; display: inline-block; animation: typingDots 1s steps(4, end) infinite; width: 0; overflow: hidden; vertical-align: bottom; } @keyframes typingDots { 0% { width: 0; } 100% { width: 12px; } } .ai-working-indicator { display: flex; align-items: center; gap: 8px; max-width: 280px; } .ai-working-text { font-size: 11px; font-weight: 800; letter-spacing: 0.03em; color: var(--inv-bg-color); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .collaboration-item.is-completed::before { content: '✓'; width: auto; height: auto; border: none; border-radius: 0; background: none; box-shadow: none; font-size: 13px; font-weight: 700; line-height: 1; color: #22c55e; opacity: 1; animation: checkPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes checkPop { 0% { transform: translateY(-50%) scale(0); opacity: 0; } 50% { transform: translateY(-50%) scale(1.4); opacity: 1; } 100% { transform: translateY(-50%) scale(1); opacity: 1; } } .collaboration-item:hover { opacity: 0.9; border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } .collaboration-item.is-entering { animation: itemEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .collaboration-item.is-leaving { animation: itemLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both; } @keyframes itemEnter { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.8; transform: scale(1); } } /* Scope toggles in collaboration space */ .collaboration-item.scope-toggle { padding-left: 36px; } .collaboration-item.scope-toggle::before { display: none; } .scope-toggle-switch { width: 24px; height: 12px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 8px; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); transition: background 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 20%, transparent); } .scope-toggle-switch::before { content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); border-radius: 50%; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 0.5px 2px color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } .scope-toggle-switch.is-on { background: linear-gradient(90deg, var(--blurple), var(--purple)); border-color: var(--blurple); } .scope-toggle-switch.is-on::before { left: calc(100% - 8px); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .scope-toggle-label { font-size: 9px; color: var(--inv-bg-color); opacity: 0.8; flex: 1; font-weight: 500; letter-spacing: 0.01em; } .collaboration-item.scope-toggle.is-fading-out { opacity: 0; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden; } /* Scope agent suggestion */ .collaboration-item.scope-agent-suggestion { padding-left: 12px; gap: 8px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08)); border: 1px solid rgba(139, 92, 246, 0.2); opacity: 0; transform: translateY(15px); transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .collaboration-item.scope-agent-suggestion::before { display: none; } .collaboration-item.scope-agent-suggestion.is-entering { opacity: 1; transform: translateY(0); } .scope-agent-icon { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .scope-agent-icon svg { width: 100%; height: 100%; stroke: var(--blurple); opacity: 0.9; } .scope-agent-text { font-size: 8px; color: var(--blurple); font-weight: 600; letter-spacing: 0.02em; flex: 1; } /* Deploy three-row auto-scheduling - inherits all from .collaboration-item */ .collaboration-item.deploy-gantt { padding-left: 12px; position: relative; } .collaboration-item.deploy-gantt::before { display: none; } .deploy-gantt-timeline { width: 100%; height: 8px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-radius: 4px; position: relative; } .deploy-gantt-bar { position: absolute; top: 0; height: 100%; background: linear-gradient(90deg, var(--blurple), var(--lightblue)); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } /* Deploy bar positions */ .deploy-bar-1 { left: 0%; width: 45%; } .deploy-bar-2 { left: 30%; width: 50%; } .deploy-bar-3 { left: 55%; width: 25%; } .deploy-bar-3-rescheduled { left: 25%; width: 35%; } .deploy-bar-4 { left: 50%; width: 40%; } .deploy-gantt-bar.is-animating { transform: scaleX(1); } .deploy-gantt-bar.is-collapsing { transform: scaleX(0); transition: transform 0.35s cubic-bezier(0.55, 0, 1, 0.45); } .deploy-gantt-bar.is-error { background: linear-gradient(90deg, var(--alert-red-start), var(--alert-red-end)); animation: errorPulse 0.4s ease-out; } .deploy-gantt-bar.is-rescheduled { left: 45%; transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .deploy-gantt-relative { position: relative; } .deploy-text-overlay { position: absolute; left: 0; width: 100%; top: 50%; transform: translateY(-50%); text-align: center; z-index: 10; } /* Scope label fade */ .scope-toggle-label { transition: opacity 0.25s ease; } .scope-toggle-label.is-fading { opacity: 0; } /* Commit icon complete */ .commit-row-icon.is-complete { opacity: 1; color: #22c55e; } .commit-row-icon.is-complete svg { stroke: #22c55e; } /* Deploy sequence row (row 3) */ .collaboration-item.deploy-sequence-row { position: relative; padding: 10px 12px; min-height: 38px; display: flex; align-items: center; } .collaboration-item.deploy-sequence-row::before { display: none; } .deploy-sequence-bar { position: absolute; height: 8px; background: linear-gradient(90deg, var(--blurple), var(--lightblue)); border-radius: 4px; opacity: 0; transform: scale(0.9); transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .deploy-sequence-bar.is-visible { opacity: 1; transform: scale(1); } .deploy-sequence-bar.is-error { background: linear-gradient(90deg, var(--alert-red-start), var(--alert-red-end)); animation: errorPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes errorPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } .deploy-sequence-text { font-size: 8px; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); font-weight: 500; text-align: center; width: 100%; opacity: 0; transform: translateY(2px); transition: opacity 0.3s ease, transform 0.3s ease; } .deploy-sequence-text.is-visible { opacity: 1; transform: translateY(0); } .deploy-sequence-text.deploy-rescheduling { color: var(--blurple); font-weight: 600; } /* Success: Bug resolution with state transitions */ .collaboration-item.success-resolve { padding-left: 4px; } .collaboration-item.success-resolve::before { display: none; } .success-state-container { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 18px; } .success-state { position: absolute; left: 0; display: flex; align-items: center; gap: 8px; opacity: 0; transform: scale(0.8); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .success-state.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; } .success-state.is-hidden { opacity: 0; transform: scale(0.8); pointer-events: none; } /* Bug state */ .success-bug { display: flex; align-items: center; gap: 8px; } .success-bug svg { width: 10px; height: 10px; flex-shrink: 0; stroke: var(--inv-bg-color); opacity: 0.7; } .success-bug-text { font-size: 9px; color: var(--inv-bg-color); opacity: 0.7; font-weight: 500; white-space: nowrap; } /* Working state */ .success-working-state { display: flex; align-items: center; gap: 8px; } .success-resolver { width: 14px; height: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .success-resolver.auto-solve svg, .success-resolver.sync svg, .success-resolver.team-respond svg { width: 100%; height: 100%; stroke: var(--blurple); opacity: 0.7; } .success-resolver.team-member { min-width: 18px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blurple)); font-size: 7px; font-weight: 800; color: #fff; letter-spacing: -0.02em; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; } .success-status-text { font-size: 9px; color: var(--inv-bg-color); opacity: 0.7; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; } /* Check resolved state */ .success-check-state { display: flex; align-items: center; gap: 8px; } .success-check-icon { width: 14px; height: 14px; flex-shrink: 0; } .success-check-icon svg { width: 100%; height: 100%; stroke: #22c55e; stroke-width: 2.5; } .success-resolved-text { font-size: 9px; color: #22c55e; font-weight: 600; letter-spacing: 0.01em; } /* Discovery conversation with Smart Conversation agent */ .collaboration-item.discovery-convo { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; } .collaboration-item.discovery-convo::before { display: none; } .discovery-participant { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blurple)); flex-shrink: 0; position: relative; } .discovery-participant::after { content: ''; position: absolute; bottom: -2px; right: -2px; width: 6px; height: 6px; background: var(--inv-bg-color); border-radius: 50%; opacity: 0; transform: scale(0); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .discovery-participant.is-talking::after { opacity: 0.8; transform: scale(1); animation: pulse 1.5s ease-in-out infinite; } .discovery-agent { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative; } .discovery-agent svg { width: 100%; height: 100%; stroke: var(--blurple); opacity: 0.7; } .discovery-agent.is-working svg { animation: sparkle 2s ease-in-out infinite; } .discovery-context { flex: 1; display: flex; gap: 3px; align-items: center; justify-content: flex-end; } .discovery-context-bar { width: 18%; height: 6px; background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 3px; position: relative; overflow: hidden; } .discovery-context-bar::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 3px; transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .discovery-context-bar.is-filled::after { width: 100%; } @keyframes pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } @keyframes sparkle { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* Commit document signing with e-sign option */ /* Commit: Single document with dual signatures */ .collaboration-item.commit-document-box { display: flex; align-items: center; gap: 6px; padding: 6px 10px; height: auto; max-height: 32px; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--inv-bg-color) 4%, transparent), color-mix(in srgb, var(--inv-bg-color) 2%, transparent)); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .collaboration-item.commit-document-box::before { display: none; } .commit-doc-icon { width: 16px; height: 16px; flex-shrink: 0; } .commit-doc-icon svg { width: 100%; height: 100%; stroke: var(--inv-bg-color); opacity: 0.7; } .commit-signatures { flex: 1; min-width: 0; display: flex; gap: 4px; align-items: center; overflow: hidden; } .commit-signature { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; overflow: hidden; } .commit-signer-badge { width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--blurple)); display: flex; align-items: center; justify-content: center; font-size: 5px; font-weight: 700; color: #fff; letter-spacing: -0.02em; flex-shrink: 0; } .commit-signature.seller .commit-signer-badge { background: linear-gradient(135deg, var(--blurple), var(--lightblue)); } .commit-signature-line { flex: 1; height: 6px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-radius: 3px; position: relative; overflow: hidden; } .commit-signature-line::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 3px; transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .commit-signature-line.is-signing::after { width: 100%; } /* ======================================== COMMIT — Minimal Doc + Avatar + Signature ======================================== */ /* Row 1: Doc row */ .commit-doc-row { gap: 10px; } .commit-doc-row::before { display: none; } .commit-row-icon { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; flex-shrink: 0; opacity: 0.6; } .commit-row-icon svg { width: 100%; height: 100%; stroke: var(--inv-bg-color); } .commit-row-label { font-size: 10px; font-weight: 500; color: var(--inv-bg-color); opacity: 0.8; transition: opacity 0.3s ease; } .commit-row-label.is-fading { opacity: 0; } .commit-row-label.is-complete { opacity: 1; color: #22c55e; font-weight: 600; } /* Row 2 & 3: Signature rows */ .commit-sig-row { overflow: hidden; } .commit-sig-row::before { display: none; } .commit-sig-avatar { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: var(--avatar-color, var(--blurple)); display: flex; align-items: center; justify-content: center; font-size: 7px; font-weight: 800; color: #fff; letter-spacing: -0.02em; flex-shrink: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .commit-sig-avatar.is-signed { background: #22c55e; font-size: 8px; font-weight: 900; letter-spacing: 0; } .commit-signer-name { font-size: 10px; font-weight: 500; color: var(--inv-bg-color); opacity: 0.8; transition: opacity 0.3s ease; } /* Signature SVG overlay — draws over the name */ .commit-sig-overlay { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: calc(100% - 40px); height: 20px; overflow: hidden; pointer-events: none; } .commit-sig-path { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity 0.2s ease; } /* Fade name out when signing, signature draws over */ .commit-sig-row.is-signing .commit-signer-name { opacity: 0; } .commit-sig-row.is-signing .commit-sig-path { opacity: 1; } .commit-sig-path.is-drawing { animation: commit-sig-draw 1.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } @keyframes commit-sig-draw { from { stroke-dashoffset: 1; opacity: 0; } 10% { opacity: 0.3; } to { stroke-dashoffset: 0; opacity: 0.9; } } .commit-sig-row.is-signed .commit-sig-path { opacity: 0.8; } .commit-sig-path.is-complete { stroke: #22c55e; opacity: 1; transition: stroke 0.4s ease, opacity 0.3s ease; } /* ── Desktop typography scale for navigator ring ── */ @media (min-width: 768px) { /* Stage node numbers */ .stage-node-index { font-size: 1.2rem; } /* Section labels — unified */ .participant-side-label, .collaboration-label, .agents-label { font-size: 8px; letter-spacing: 0.12em; } /* Participant chips */ .participant-chip { font-size: 9px; padding: 5px 9px; } .participant-avatar { font-size: 5px; width: 16px; height: 16px; } .participant-name { font-size: 9px; } /* Collaboration items */ .collaboration-item { height: 36px; font-size: 10px; border-radius: 8px; } /* Activity indicator */ .collab-activity { font-size: 9px; } /* Commit rows */ .commit-row-label, .commit-signer-name { font-size: 11px; } /* Agent chips */ .agent-chip-label { font-size: 9px; } /* Footer items */ .stage-footer-item { font-size: 8px; letter-spacing: 0.1em; } /* Nav counter */ .ring-nav-counter { font-size: 12px; } /* Powered-by */ .powered-by { font-size: 11px; } /* Internal spacing */ .participants-grid { gap: 0.75rem; } .participants-label { margin-bottom: 0.4rem; } .participant-side { gap: 0.35rem; } .participant-chips { gap: 3px; } .collaboration-items { gap: 4px; } .stage-footer { margin-top: 1rem; padding-top: 1rem; } } @keyframes itemLeave { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } } /* Experience meeting rows (same layout as Discovery) */ .collaboration-item.experience-meeting::before { display: none; } .meeting-icon { position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; opacity: 0.6; transition: all 0.3s ease; } .meeting-icon svg { width: 100%; height: 100%; stroke: var(--blurple); } /* AI Agents */ .stage-agents { flex: 34; min-width: 0; padding: 0rem 0.5rem 0.5rem 0.5rem; } .agents-label { font-size: 7px; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.4; margin-bottom: 3px !important; font-weight: 600; text-align: right; } .agent-chips { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 5px !important; align-items: center !important; justify-content: flex-end !important; padding: 0 !important; margin: 0 !important; } .agent-chip { display: flex !important; align-items: center !important; gap: 5px !important; width: auto !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-width: none !important; max-height: 26px !important; padding: 0 6px 0 4px !important; margin: 0 !important; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important; border-radius: 8px !important; color: var(--inv-bg-color) !important; opacity: 0.75; cursor: default; overflow: hidden !important; box-sizing: border-box !important; box-shadow: 0 1px 4px color-mix(in srgb, var(--inv-bg-color) 3%, transparent), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 3%, transparent); transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .agent-chip:hover { opacity: 1; transform: translateY(-1px); border-color: color-mix(in srgb, var(--purple) 20%, transparent) !important; } .agent-chip-icon { flex-shrink: 0 !important; width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; padding: 0 !important; margin: 0 !important; opacity: 0.7; line-height: 0 !important; } .agent-chip-icon svg { display: block !important; width: 14px !important; height: 14px !important; stroke: var(--inv-bg-color) !important; flex-shrink: 0 !important; } .agent-chip-label { display: block !important; font-size: 8px !important; font-weight: 500 !important; letter-spacing: 0.02em !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 0.7; } /* Navigate section: show icon + label on desktop, icon-only on mobile */ #navigate .agent-knowledge-bar { display: none !important; } #navigate .agent-chip { width: auto !important; max-width: none !important; padding: 0 6px 0 4px !important; gap: 5px !important; } #navigate .agent-chip-label { display: block !important; font-size: 8px !important; font-weight: 500 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; opacity: 0.7; } /* Mobile: icon-only agent chips */ @media (max-width: 768px) { .agent-chip { width: 26px !important; max-width: 26px !important; padding: 0 !important; justify-content: center !important; } .agent-chip-label { display: none !important; width: 0 !important; height: 0 !important; } } /* Stage Footer */ .stage-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .stage-footer-item { font-size: 7px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--inv-bg-color); opacity: 0.6; font-weight: 500; cursor: pointer; transition: opacity 0.2s ease; white-space: nowrap; } .stage-footer-item:hover { opacity: 0.85; } .agent-knowledge-bar { width: 100%; height: 2px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 1px; margin-top: 4px; overflow: hidden; } .agent-knowledge-fill { height: 100%; width: var(--bar-width, 0%); background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 1px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .agent-intel-status { display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 3px; font-size: 8px; font-weight: 500; color: var(--inv-bg-color); opacity: 0; letter-spacing: 0.02em; transition: opacity 0.3s ease; } .agent-intel-status.is-entering { animation: none; opacity: 0.45; } .intel-label { opacity: 0.8; } .intel-sparkles { color: color-mix(in srgb, var(--blurple) 80%, var(--inv-bg-color)); letter-spacing: 1px; font-size: 7px; } .agent-chip.is-entering { animation: agentEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .agent-chip.is-leaving { animation: agentLeave 0.2s cubic-bezier(0.4, 0, 0.6, 1) both; } @keyframes agentEnter { from { opacity: 0; transform: scale(0.3); } to { opacity: 0.95; transform: scale(1); } } @keyframes agentLeave { from { opacity: 0.95; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: } /* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */ ::after, ::before { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; color: var(--white); } ::after, ::before { --tw-content: '' } :host, html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal; -webkit-tap-highlight-color: transparent; overflow-x: clip; } body { margin: 0; line-height: inherit; overflow-x: clip; } hr { height: 0; color: inherit; border-top-width: 1px } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit } a { color: inherit; text-decoration: inherit } b, strong { font-weight: bolder } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-feature-settings: normal; font-variation-settings: normal; font-size: 1em } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -.25em } sup { top: -.5em } table { text-indent: 0; border-color: inherit; border-collapse: collapse } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; margin: 0; padding: 0 } button, select { text-transform: none } button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none } :-moz-focusring { outline: auto } :-moz-ui-invalid { box-shadow: none } progress { vertical-align: baseline } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto } [type=search] { -webkit-appearance: textfield; outline-offset: -2px } ::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } summary { display: list-item } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0 } fieldset { margin: 0; padding: 0 } legend { padding: 0 } menu, ol, ul { list-style: none; margin: 0; padding: 0 } dialog { padding: 0 } textarea { resize: vertical } input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af } [role=button], button { cursor: pointer } :disabled { cursor: default }.hero-wrapper .blurpleButtonAlt, .surface-beat--navigate-wrapper .blurpleButtonAlt{ border: 1px solid var(--blurple) !important; color: var(--blurple) !important; background: var(--main-bg-color) !important; text-decoration: none !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle } img, video { max-width: 100%; height: auto } [hidden]:where(:not([hidden=until-found])) { display: none } .fixed { position: fixed } .absolute { position: absolute } .relative { position: relative } .inset-10 { inset: 2.5rem } .top-0 { top: 0px } .z-10 { z-index: 10 } .z-50 { z-index: 50 } .order-1 { order: 1 } .order-2 { order: 2 } .mx-auto { margin-left: auto; margin-right: auto } .mb-1 { margin-bottom: 0.25rem } .mb-10 { margin-bottom: 2.5rem } .mb-16 { margin-bottom: 4rem } .mb-2 { margin-bottom: 0.5rem } .mb-3 { margin-bottom: 0.75rem } .mb-4 { margin-bottom: 1rem } .mb-6 { margin-bottom: 1.5rem } .mb-8 { margin-bottom: 2rem } .mt-4 { margin-top: 1rem } .flex { display: flex } .inline-flex { display: inline-flex } .grid { display: grid } .hidden { display: none } .aspect-square { aspect-ratio: 1 / 1 } .h-1\.5 { height: 0.375rem } .h-10 { height: 2.5rem } .h-12 { height: 3rem } .h-2 { height: 0.5rem } .h-20 { height: 5rem } .h-3 { height: 0.75rem } .h-4 { height: 1rem } .h-5 { height: 1.25rem } .h-8 { height: 2rem } .h-full { height: 100% } .w-1\/2 { width: 50% } .w-10 { width: 2.5rem } .w-12 { width: 3rem } .w-2\/3 { width: 66.666667% } .w-24 { width: 6rem } .w-3 { width: 0.75rem } .w-3\/4 { width: 75% } .w-4 { width: 1rem } .w-5 { width: 1.25rem } .w-64 { width: 16rem } .w-8 { width: 2rem } .w-full { width: 100% } .max-w-3xl { max-width: 48rem } .max-w-7xl { max-width: 80rem } .max-w-xl { max-width: 36rem } .flex-1 { flex: 1 1 0% } .shrink-0 { flex-shrink: 0 } .translate-y-10 { --tw-translate-y: 2.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } .translate-y-0 { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) } @keyframes pulse { 50% { opacity: .5 } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .flex-col { flex-direction: column } .flex-wrap { flex-wrap: wrap } .items-center { align-items: center } .justify-center { justify-content: center } .justify-between { justify-content: space-between } .gap-12 { gap: 3rem } .gap-2 { gap: 0.5rem } .gap-20 { gap: 5rem } .gap-3 { gap: 0.75rem } .gap-4 { gap: 1rem } .gap-8 { gap: 2rem } .space-y-2> :not([hidden])~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) } .space-y-4> :not([hidden])~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)) } .space-y-6> :not([hidden])~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) } .overflow-hidden { overflow: hidden } .scroll-smooth { scroll-behavior: smooth } .rounded { border-radius: 0.25rem } .rounded-2xl { border-radius: 1rem } .rounded-3xl { border-radius: 1.5rem } .rounded-full { border-radius: 9999px } .rounded-lg { border-radius: 0.5rem } .rounded-xl { border-radius: 0.75rem } .border { border-width: 1px } .border-2 { border-width: 2px } .border-y { border-top-width: 1px; border-bottom-width: 1px } .border-b { border-bottom-width: 1px } .border-t { border-top-width: 1px } .border-dashed { border-style: dashed } .border-indigo-500 { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity, 1)) } .border-indigo-500\/20 { border-color: rgb(99 102 241 / 0.2) } .border-indigo-500\/30 { border-color: rgb(99 102 241 / 0.3) } .border-purple-500\/30 { border-color: rgb(168 85 247 / 0.3) } .border-white\/10 { border-color: rgb(255 255 255 / 0.1) } .border-white\/5 { border-color: rgb(255 255 255 / 0.05) } .border-t-transparent { border-top-color: transparent } .bg-\[\#050505\] { --tw-bg-opacity: 1; background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1)) } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)) } .bg-black\/40 { background-color: rgb(0 0 0 / 0.4) } .bg-black\/50 { background-color: rgb(0 0 0 / 0.5) } .bg-indigo-500 { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)) } .bg-indigo-500\/10 { background-color: rgb(99 102 241 / 0.1) } .bg-indigo-500\/20 { background-color: rgb(99 102 241 / 0.2) } .bg-indigo-600 { background-color: var(--purple); } .bg-indigo-900\/10 { background-color: rgb(49 46 129 / 0.1) } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) } .bg-white\/10 { background-color: rgb(255 255 255 / 0.1) } .bg-white\/20 { background-color: rgb(255 255 255 / 0.2) } .bg-white\/5 { background-color: rgb(255 255 255 / 0.05) } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) } .from-indigo-400 { --tw-gradient-from: var(--purple) var(--tw-gradient-from-position); --tw-gradient-to: rgb(129 140 248 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) } .to-purple-400 { --tw-gradient-to: var(--blurple) var(--tw-gradient-to-position) } .bg-clip-text { -webkit-background-clip: text; background-clip: text } .p-2 { padding: 0.5rem } .p-3 { padding: 0.75rem } .p-4 { padding: 1rem } .p-6 { padding: 1.5rem } .p-8 { padding: 2rem } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem } .px-8 { padding-left: 2rem; padding-right: 2rem } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem } .py-12 { padding-top: 3rem; padding-bottom: 3rem } .py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem } .py-16 { padding-top: 4rem; padding-bottom: 4rem } .py-24 { padding-top: 6rem; padding-bottom: 6rem } .py-4 { padding-top: 1rem; padding-bottom: 1rem } .pb-20 { padding-bottom: 5rem } .pt-2 { padding-top: 0.5rem } .pt-40 { padding-top: 10rem } .text-center { text-align: center } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace } .text-2xl { font-size: 1.5rem; line-height: 2rem } .text-4xl { font-size: 2.25rem; line-height: 2.5rem } .text-3xl { font-size: 1.75rem; line-height: 2.5rem } .text-6xl { font-size: 3.75rem; line-height: 1 } .text-\[10px\] { font-size: 10px } .text-lg { font-size: 1.125rem; line-height: 1.75rem } .text-sm { font-size: 0.875rem; line-height: 1.25rem } .text-xl { font-size: 1.25rem; line-height: 1.75rem } .text-xs { font-size: 0.75rem; line-height: 1rem } .font-black { font-weight: 900 } .font-bold { font-weight: 600 } .font-extrabold { font-weight: 800 } .font-medium { font-weight: 500 } .uppercase { text-transform: uppercase } .italic { font-style: italic } .leading-relaxed { line-height: 1.625 } .leading-tight { line-height: 1.25 } .tracking-tight { letter-spacing: -0.025em } .tracking-tighter { letter-spacing: -0.05em } .tracking-widest { letter-spacing: 0.1em } .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)) } .text-blue-400 { --tw-text-opacity: 1; color: rgb(96 165 250 / var(--tw-text-opacity, 1)) } .text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity, 1)) } .text-emerald-400 { --tw-text-opacity: 1; color: rgb(52 211 153 / var(--tw-text-opacity, 1)) } .text-emerald-500 { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity, 1)) } .text-indigo-400 { color: var(--inv-bg-color) !important; } .text-indigo-500 { --tw-text-opacity: 1; color: rgb(99 102 241 / var(--tw-text-opacity, 1)) } .text-purple-400 { --tw-text-opacity: 1; color: rgb(192 132 252 / var(--tw-text-opacity, 1)) } .text-purple-500 { --tw-text-opacity: 1; color: rgb(168 85 247 / var(--tw-text-opacity, 1)) } .text-slate-300 { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity, 1)) } .text-slate-400 { opacity: 0.8; color: var(--inv-bg-color); } .text-slate-500 { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)) } .text-slate-600 { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)) } .text-transparent { color: transparent } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) } .opacity-0 { opacity: 0 } .opacity-100 { opacity: 1 } .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) } .shadow-indigo-500\/20 { --tw-shadow-color: rgb(99 102 241 / 0.2); --tw-shadow: var(--tw-shadow-colored) } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms } .transition-colors { transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms } .duration-1000 { transition-duration: 1000ms } .hoverScale105:hover{ scale: 1.05; } .desc-text-hero{ } .hover\:bg-indigo-500:hover { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1)); scale:1.05 } .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1) } .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)) } .md\:text-7xl{ font-size: 3rem !important; } @media (min-width: 768px) { .md\:flex { display: flex } .md\:hidden { display: none } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) } .md\:flex-row { flex-direction: row } .md\:text-7xl { font-size: 3.5rem !important; line-height: 1 } } @media (min-width: 1300px) { .md\:text-7xl { font-size: 3rem !important; line-height: 1 } } .md\:text-5xl { font-size: 2.5rem !important; line-height: 1 } @media (min-width:1450px) { .md\:text-7xl { font-size: 4.5rem !important; line-height: 1 } .md\:text-5xl { font-size: 3rem !important; line-height: 1 } } @media (min-width: 1024px) { .md\:text-5xl { font-size: 3rem !important; line-height: 1 } .lg\:order-1 { order: 1 } .lg\:order-2 { order: 2 } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } } /* Stacked hero layout — mobile/tablet only */ @media (max-width: 1249px) {.hero.particles .hero-wrapper, .surface-beat--navigate.particles .surface-beat--navigate-wrapper{ display: flex !important; flex-direction: column !important; align-items: center !important; padding-top: 90px !important; gap: 44px !important; }.hero-pills, .surface-beat--navigate-pills{ display: flex; justify-content: center; } h1, p { text-align: center; }.hero .reveal-from-top, .surface-beat--navigate .reveal-from-top{ display: flex; flex-direction: column; align-items: center; text-align: center; } .flex.flex-wrap.gap-4{ justify-content: center; }.hero-kicker, .surface-beat--navigate-kicker{ width: 100% !important; justify-content: center !important; } /* ---- Mobile hero — vertical rhythm ---- */.hero h1.mb-6, .surface-beat--navigate h1.mb-6{ margin-bottom: 0.6rem !important; }.hero .hero-kicker, .surface-beat--navigate .surface-beat--navigate-kicker{ display: flex; align-items: center; gap: 0.45rem; width: fit-content !important; background: none; border: none; padding: 0; box-shadow: none; margin-left: auto; margin-right: auto; margin-bottom: 1.75rem; }.hero .hero-kicker-text, .surface-beat--navigate .surface-beat--navigate-kicker-text{ flex-direction: row; align-items: baseline; gap: 0.35rem; }.hero .hero-kicker-icon, .surface-beat--navigate .surface-beat--navigate-kicker-icon{ width: 18px; height: 18px; margin-right: 0; margin-top: 0; opacity: 0.85; }.hero .hero-kicker-prefix, .surface-beat--navigate .surface-beat--navigate-kicker-prefix{ font-size: 0.7rem; letter-spacing: 0.14em; }.hero .desc-text-hero, .surface-beat--navigate .desc-text-hero{ line-height: 1.7; letter-spacing: 0.015em; margin-bottom: 2rem !important; /* font-size: 1.05rem !important; */ } .md\:text-5xl { font-size: 2rem !important; }.hero-wrapper .flex.gap-12, .surface-beat--navigate-wrapper .flex.gap-12{ justify-content: center; width: 100%; gap: 2rem; } .stage-progress-card { padding: 20px !important; } .py-24 { padding-top: 5rem !important; padding-bottom: 5rem !important; } .problem-section { padding-top: 7rem !important; } .tg-subline { text-align: left !important; } .transition-bridge { padding-top: 2rem !important; padding-bottom: 2rem !important; } .transition-bridge-line-top { font-size: clamp(1.3rem, 4.5vw, 2.8rem) !important; white-space: nowrap !important; } .transition-bridge-line-bottom { font-size: clamp(2.2rem, 6vw, 3.4rem) !important; white-space: nowrap !important; } .text-lg.mb-8.text-subdued { text-align: left !important; width: 100%; word-break: break-word; } .ai-feature-list-container { max-width: calc(100vw - 1.6rem) !important; overflow: hidden; } .ai-tool-card * { text-align: left !important; } .ai-tool-card { padding: 10px 12px !important; } .ai-tool-hint { padding-left: 0.8rem !important; } .px-6 { padding-left: 0.8rem !important; padding-right: 0.8rem !important; } .create-templates-section { border-top: none !important; } .order-2.lg\:order-1.glass { max-width: calc(100vw - 1.6rem) !important; } .ai-architect-card--glass { padding-left: 0.8rem !important; padding-right: 0.8rem !important; padding-bottom: 0.8rem !important; } [data-tool-view="default"], [data-tool-view="editor"], [data-tool-view="coach"] { height: auto !important; min-height: auto !important; max-height: none !important; } .editor-prompt-bar { height: 220px !important; } .editor-flow-body.creator-two-col { height: 340px !important; min-height: 340px !important; max-height: 340px !important; gap: 1rem !important; } .editor-flow-body.creator-two-col .editor-circle-column { flex-shrink: 0 !important; } .editor-circle-chart--lg { width: 100px !important; height: 100px !important; } .editor-circle-chart--lg .editor-circle-center { display: none !important; } .editor-flow-body.creator-two-col .ai-process-log { flex: 1 !important; min-width: 0 !important; min-height: 0 !important; max-height: none !important; } .editor-flow-body .editor-circle-chart { width: 100px !important; height: 100px !important; } .editor-flow-body .editor-circle-center { font-size: 0.55rem !important; } .editor-flow-body .editor-coach-btn { font-size: 0.6rem !important; padding: 0.3rem 0.6rem !important; } .editor-flow-body .editor-circle-column { flex-shrink: 0 !important; } .editor-flow-body { height: 340px !important; min-height: 340px !important; max-height: 340px !important; overflow: hidden !important; } .ai-process-log-status { display: none !important; } .coach-chat-messages { height: 505px !important; min-height: 505px !important; max-height: 505px !important; overflow-y: auto !important; } .text-xl { font-size: 1.1rem !important; } .text-lg { font-size: 1.05rem !important; } .text-xs { font-size: 0.6rem !important; } .md\:text-5xl { font-size: 1.8rem !important; } .ai-header-icon svg { width: 24px !important; height: 24px !important; } .problem-tag { font-size: 0.45rem; letter-spacing: 0.15em; } /* Navigate Outcomes - match Create Templates mobile layout */ #navigate > .max-w-7xl > .grid { gap: 2rem !important; } #navigate-visualization { max-width: calc(100vw - 1.6rem) !important; overflow: visible !important; } #navigate p { text-align: left !important; } .navigate-journey-card { padding: 10px 12px !important; } .navigate-journey-card h4 { font-size: 0.85rem !important; } .navigate-journey-card p { font-size: 0.75rem !important; } .navigate-stage-hint { font-size: 0.7rem !important; } .navigate-ring-container { width: 260px !important; height: 260px !important; }.hero-kicker-term, .surface-beat--navigate-kicker-term{ text-align: left !important; font-size: 1.5rem !important; }.hero .hero-kicker-term, .surface-beat--navigate .surface-beat--navigate-kicker-term{ font-size: 0.7rem !important; }.hero .hero-kicker-inline .hero-kicker-term, .surface-beat--navigate .surface-beat--navigate-kicker-inline .surface-beat--navigate-kicker-term{ font-size: inherit !important; } } /* ── Desktop hero — side-by-side layout ── */ @media (min-width: 1250px) {.hero.particles .hero-wrapper, .surface-beat--navigate.particles .surface-beat--navigate-wrapper{ display: grid !important; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem !important; padding-top: 0 !important; }.hero .reveal-from-top, .surface-beat--navigate .reveal-from-top{ text-align: left; align-items: flex-start; }.hero-headline, .surface-beat--navigate-headline{ text-align: left; }.hero .desc-text-hero, .surface-beat--navigate .desc-text-hero{ text-align: left; font-size: 0.9rem !important; }.hero-cta-row, .surface-beat--navigate-cta-row{ justify-content: flex-start; }.hero-tag, .surface-beat--navigate-tag{ align-self: flex-start; } } @media (min-width: 1200px) and (max-width: 1290px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 2.3rem !important; } } @media (min-width: 1397px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 2.7rem !important; } } @media (min-width: 1500px) {.hero-headline, .surface-beat--navigate-headline{ font-size: 3rem !important; } } @media (max-width: 450px){.hero-pills, .surface-beat--navigate-pills{ flex-direction: column; gap: 20px; margin-bottom: 20px; align-items: center; }.hero-pills>div, .surface-beat--navigate-pills>div{ width: fit-content; margin-bottom: 0px; } } /* ========== AI ECOSYSTEM SECTION ========== */ /* ========== AI ECOSYSTEM SECTION ========== */ .ai-ecosystem-section { position: relative; background: var(--main-bg-color); color: var(--inv-bg-color); } /* Ambient glow behind the section */ .ai-ecosystem-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 400px; background: radial-gradient(ellipse, rgba(99, 102, 241, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 0; }.ai-ecosystem-section .hero-kicker, .ai-ecosystem-section .surface-beat--navigate-kicker{ margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--grey-accent-color); }.ai-ecosystem-section .hero-kicker-icon, .ai-ecosystem-section .surface-beat--navigate-kicker-icon{ width:7vh; height: 7vh; margin-right: 10px; margin-top: -1vh; }.ai-ecosystem-section .hero-kicker-text, .ai-ecosystem-section .surface-beat--navigate-kicker-text{ font-size: 1.8rem; align-items: baseline; gap: 0px !important; flex-direction: column !important; }.ai-ecosystem-section .hero-kicker-prefix, .ai-ecosystem-section .surface-beat--navigate-kicker-prefix{ font-size: 0.6rem; } /* AI Ecosystem — Header */ .ai-eco-kicker { justify-content: center; } .ai-eco-desc { color: var(--inv-bg-color); opacity: 0.7; max-width: 700px; margin: 0 auto; } .ai-eco-patent-header { font-size: 0.55rem; color: var(--inv-bg-color); opacity: 0.12; text-align: center; margin: 0.5rem auto 0; letter-spacing: 0.02em; } .ai-eco-cta-wrap { text-align: center; margin-top: 3rem; } .ai-eco-learn-more { all: unset; /* local easings (the --v6-* tokens are scoped to the mockup panels, not global) */ --cta-spring: cubic-bezier(0.16, 1, 0.3, 1); --cta-ease: cubic-bezier(0.22, 1, 0.36, 1); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.95rem 2rem; border-radius: 9999px; font-family: var(--brand-font); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em; color: #fff !important; /* canonical brand gradient (blurple -> purple), matches the section kicker/title */ background: linear-gradient(135deg, var(--blurple) 0%, var(--purple) 100%); cursor: pointer; text-decoration: none !important; /* glass depth: top inner highlight + hairline + layered colored ambient shadow */ box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 32%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent), 0 10px 28px -8px color-mix(in srgb, var(--purple) 60%, transparent), 0 3px 8px -3px rgba(0, 0, 0, 0.45); transition: transform 0.4s var(--cta-spring), box-shadow 0.4s var(--cta-ease); } /* Premium sheen — a soft light sweeps across on hover */ .ai-eco-learn-more::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient( 115deg, transparent 25%, color-mix(in srgb, #fff 38%, transparent) 48%, transparent 72% ); transform: translateX(-130%); transition: transform 0.85s var(--cta-ease); pointer-events: none; } .ai-eco-learn-more svg { position: relative; z-index: 1; stroke: #fff; transition: transform 0.4s var(--cta-spring); } .ai-eco-learn-more:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 42%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 16%, transparent), 0 18px 40px -10px color-mix(in srgb, var(--purple) 75%, transparent), 0 6px 14px -4px rgba(0, 0, 0, 0.5); } .ai-eco-learn-more:hover::before { transform: translateX(130%); } .ai-eco-learn-more:hover svg { transform: translateX(4px); } .ai-eco-learn-more:focus-visible { outline: 2px solid color-mix(in srgb, var(--blurple) 70%, #fff); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .ai-eco-learn-more, .ai-eco-learn-more svg, .ai-eco-learn-more::before { transition: none; } .ai-eco-learn-more::before { display: none; } .ai-eco-learn-more:hover { transform: none; } .ai-eco-learn-more:hover svg { transform: none; } } /* ── Example Journey Badges ── */ .ai-eco-examples { display: flex; justify-content: center; gap: 0.625rem; margin-top: 1.5rem; flex-wrap: wrap; } .ai-eco-example { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.5rem 1rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--purple) 3%, var(--main-bg-color)); } .ai-eco-example-name { font-size: 0.75rem; font-weight: 700; color: var(--inv-bg-color); opacity: 0.8; } .ai-eco-example-meta { font-size: 0.65rem; color: var(--inv-bg-color); opacity: 0.35; } /* ── Footer Badge ── */ .ai-eco-footer-badge { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 2rem auto 0; padding: 0.5rem 1.5rem; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.08); background: color-mix(in srgb, var(--purple) 5%, var(--main-bg-color)); width: fit-content; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ai-eco-footer-count { font-size: 0.8rem; font-weight: 700; color: var(--purple); letter-spacing: 0.02em; } .ai-eco-footer-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex-shrink: 0; } .ai-eco-footer-patent { font-size: 0.7rem; color: var(--inv-bg-color); opacity: 0.4; letter-spacing: 0.01em; text-align: center; margin-top: 0.75rem; } .ai-eco-patent-name { font-size: 0.55rem; opacity: 0.7; } /* ── Sliding Tile Gallery ── */ .ai-eco-pillars { display: flex; gap: 0.75rem; align-items: stretch; height: 280px; max-width: 720px; margin: 0 auto; position: relative; z-index: 1; } .ai-eco-pillar { position: relative; flex: 0 0 70px; min-width: 0; padding: 2rem 1.25rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.06); background: color-mix(in srgb, var(--purple) 2%, var(--main-bg-color)); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; transition: flex 0.65s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease, background 0.4s ease; } /* Gradient top accent on every pillar */ .ai-eco-pillar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); transition: all 0.5s ease; } /* ── Inactive tile ── */ .ai-eco-pillar:not(.is-active) { opacity: 0.5; box-shadow: none; } .ai-eco-pillar:not(.is-active):hover { opacity: 0.75; border-color: rgba(255, 255, 255, 0.12); background: color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)); } /* ── Active tile expands ── */ .ai-eco-pillar.is-active { flex: 1 1 60%; padding: 2rem 1.75rem; border-color: color-mix(in srgb, var(--purple) 25%, transparent); background: color-mix(in srgb, var(--purple) 4%, var(--main-bg-color)); box-shadow: 0 24px 80px rgba(99, 102, 241, 0.1), 0 8px 32px rgba(96, 165, 250, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Active accent line — color per pillar */ .ai-eco-pillar:nth-child(1).is-active::before { background: linear-gradient(90deg, transparent, #4f46e5, transparent); } .ai-eco-pillar:nth-child(2).is-active::before { background: linear-gradient(90deg, transparent, #6366f1, transparent); } .ai-eco-pillar:nth-child(3).is-active::before { background: linear-gradient(90deg, transparent, #8b5cf6, transparent); } /* ── Pillar Header ── */ .ai-eco-pillar-head { display: flex; align-items: center; gap: 0.625rem; white-space: nowrap; } .ai-eco-pillar-title { font-size: 1rem; font-weight: 700; color: var(--inv-bg-color); margin: 0; overflow: hidden; text-overflow: ellipsis; max-width: 0; opacity: 0; transition: max-width 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; } .ai-eco-pillar.is-active .ai-eco-pillar-title { max-width: 200px; opacity: 1; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-head { justify-content: center; } .ai-eco-pillar-icon { width: 2.25rem; height: 2.25rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--inv-bg-color); transition: all 500ms cubic-bezier(0.22, 1, 0.36, 1); } .ai-eco-pillar-icon svg { width: 18px; height: 18px; opacity: 0.9; color: var(--inv-bg-color); overflow: visible; } /* ── Icon: draw in once, then shimmer gradient while active ── */ .eco-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0s; } .ai-eco-pillar.is-active .eco-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s ease-out; } .ai-eco-pillar.is-active .eco-draw:nth-child(2) { transition-delay: 0.08s; } .ai-eco-pillar.is-active .eco-draw:nth-child(3) { transition-delay: 0.16s; } .ai-eco-pillar.is-active .eco-draw:nth-child(4) { transition-delay: 0.22s; } .ai-eco-pillar.is-active .eco-draw:nth-child(5) { transition-delay: 0.28s; } .ai-eco-pillar.is-active .eco-draw:nth-child(6) { transition-delay: 0.34s; } .ai-eco-pillar.is-active .eco-draw:nth-child(7) { transition-delay: 0.4s; } .ai-eco-pillar.is-active .eco-draw:nth-child(8) { transition-delay: 0.46s; } .ai-eco-pillar.is-active .eco-draw:nth-child(9) { transition-delay: 0.52s; } .ai-eco-pillar.is-active .eco-draw:nth-child(10) { transition-delay: 0.58s; } /* Gradient shimmer on the icon container while active */ .ai-eco-pillar.is-active .ai-eco-pillar-icon { background-size: 200% 200%; animation: eco-icon-shimmer 3s ease-in-out infinite; } @keyframes eco-icon-shimmer { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } /* Per-pillar gradient backgrounds matching stage-icon / template-icon pattern */ .ai-eco-pillar:nth-child(1) .ai-eco-pillar-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 20%, var(--white) 80%), var(--lightestblue)); border: 1.5px solid color-mix(in srgb, var(--blurple) 50%, transparent); } .ai-eco-pillar:nth-child(2) .ai-eco-pillar-icon { background: linear-gradient(135deg, var(--lightestblue), color-mix(in srgb, var(--purple) 20%, var(--white) 80%)); border: 1.5px solid color-mix(in srgb, var(--blurple) 55%, transparent); } .ai-eco-pillar:nth-child(3) .ai-eco-pillar-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--lightblue) 30%, var(--white) 70%), color-mix(in srgb, var(--purple) 15%, var(--white) 85%)); border: 1.5px solid color-mix(in srgb, var(--lightblue) 40%, transparent); } /* ── Collapsible content ── */ .ai-eco-pillar-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); transition: opacity 0.45s ease, max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), margin 0.45s ease; overflow: hidden; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-divider { opacity: 0; max-height: 0; margin: 0; } .ai-eco-pillar.is-active .ai-eco-pillar-divider { opacity: 1; max-height: 2px; margin: 0.75rem 0; } /* ── Pillar Bullet Lists ── */ .ai-eco-pillar-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; transition: opacity 0.45s ease, max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-bullets { opacity: 0; max-height: 0; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets { opacity: 1; max-height: 200px; } .ai-eco-pillar-bullets li { font-size: 0.8rem; color: var(--inv-bg-color); line-height: 1.4; padding-left: 0; display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li { opacity: 0.55; transform: translateY(0); } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(1) { transition-delay: 0.3s; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(2) { transition-delay: 0.42s; } .ai-eco-pillar.is-active .ai-eco-pillar-bullets li:nth-child(3) { transition-delay: 0.54s; } .ai-eco-pillar-bullets li::before { display: none; } .eco-bullet-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.3; margin-right: 0.5rem; position: relative; top: -1px; } /* ── Responsive ── */ @media (max-width: 1024px) { .ai-eco-pillars { flex-direction: column; height: auto; min-height: 550px; } .ai-eco-pillar:not(.is-active) { flex: 0 0 auto; } .ai-eco-pillar.is-active { flex: 0 0 auto; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-divider, .ai-eco-pillar:not(.is-active) .ai-eco-pillar-bullets { max-height: 0; opacity: 0; } .ai-eco-pillar-title { max-width: 200px; opacity: 1; } .ai-eco-pillar:not(.is-active) .ai-eco-pillar-head { justify-content: flex-start; } } @media (max-width: 640px) { .ai-eco-pillars { gap: 0.5rem; } .ai-eco-pillar { padding: 1.25rem 1rem; } .ai-eco-pillar.is-active { padding: 1.25rem 1rem; } .ai-eco-footer-badge { flex-direction: column; gap: 0.25rem; padding: 0.625rem 1.25rem; margin-top: 0; } .ai-eco-footer-sep { display: none; } } /* ========== GLOBAL AESTHETIC POLISH ========== */ /* Soft Ambient Shadows - Replace Harsh Shadows */ .glass, .proof-stat-card, .ai-architect-card{ box-shadow: 0 20px 60px rgba(99, 102, 241, 0.07), 0 8px 24px rgba(96, 165, 250, 0.04) !important; } /* Consistent Border Radius */ .ai-architect-card, .proof-stat-card:first-child { border-radius: 24px !important; } /* Consistent Subtle Borders */ .glass, .ai-architect-card { border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* ========== GENERAL POLISH & STANDARDIZATION ========== */ .proof-section { padding-bottom: 7rem !important; } /* Create templates section has transition bridge, so no top padding */ .create-templates-section { padding-top: 0 !important; padding-bottom: 6rem !important; border-top: none !important; } /* Content area within create-templates has standard padding */ .create-templates-content { padding-top: 0 !important; padding-bottom: 6rem !important; } /* Typography Consistency - Sub-headers */ .proof-pill, .epic-portal-title { letter-spacing: 0.1em !important; text-transform: uppercase !important; } /* ========== END GENERAL POLISH ========== */ /* Create Templates Section - Main Background Color */ .create-templates-section { background: var(--main-bg-color) !important; padding-bottom: 0px !important; } /* ========== TRANSITION BRIDGE - CLEAN TYPOGRAPHY ========== */ .transition-bridge { background: linear-gradient(180deg, var(--main-bg-color) 0%, color-mix(in srgb, var(--blurple) 3%, transparent) 45%, color-mix(in srgb, var(--purple) 2%, transparent) 65%, var(--main-bg-color) 100%); padding: 3.5rem 2rem; margin-bottom: 2rem; margin-top: 0; position: relative; } .transition-bridge-content { max-width: 1200px; margin: 0 auto; text-align: center; } .transition-bridge-stack { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .transition-bridge-line-top { display: block; font-size: 2.8rem; font-weight: 500; line-height: 1.2; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); letter-spacing: -0.02em; } .transition-bridge-line-bottom { display: block; font-size: 3.4rem; font-weight: 800; line-height: 1.2; color: color-mix(in srgb, var(--inv-bg-color) 90%, transparent); letter-spacing: -0.025em; } .transition-bridge-flow { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; } .bridge-flow-step { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); } .bridge-flow-num { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0; border-radius: 50%; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 30%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); flex-shrink: 0; } .bridge-flow-sep { width: 28px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 40%, transparent), color-mix(in srgb, var(--purple) 30%, transparent)); position: relative; } .bridge-flow-sep::after { content: ''; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-top: 1px solid color-mix(in srgb, var(--purple) 40%, transparent); border-right: 1px solid color-mix(in srgb, var(--purple) 40%, transparent); transform: rotate(45deg); } .create-templates-content { position: relative; } .create-templates-content > div > div > .glass{ padding: 0px !important; border: none !important; background: none !important; } /* Title Styling - Sick Elevated Gradient */ .create-templates-section .epic-portal-title { background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; background-size: 200% 200% !important; font-weight: 900 !important; opacity: 1 !important; filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4)) drop-shadow(0 8px 24px rgba(118, 75, 162, 0.3)) drop-shadow(0 2px 6px rgba(79, 172, 254, 0.2)) !important; animation: gradient-shift 8s ease infinite !important; } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Main Heading - Use inverse background color */ .create-templates-section .solution-title { color: var(--inv-bg-color) !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: unset !important; background-clip: unset !important; } /* Description Text - Only for right side agent list */ .create-templates-section .order-1.lg\:order-2 p :not(* .ai-tool-hint) { color: var(--inv-bg-color) !important; opacity: 0.8 !important; } /* Agent Card Headings - Only for right side agent list */ .create-templates-section .order-1.lg\:order-2 h4 { color: var(--inv-bg-color) !important; opacity: 0.95 !important; font-size: 1.15rem; letter-spacing: -0.01em; } /* Agent Icons - Minimal, No Decoration */ .create-templates-section .template-icon { width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .create-templates-section .template-icon svg, .create-templates-section .template-icon svg * { width: 24px; height: 24px; opacity: 0.9; color: var(--inv-bg-color); fill: var(--inv-bg-color) } /* AI Tool Selector - Flex Container */ .create-templates-section .ai-tool-selector { display: flex; flex-direction: column; gap: 8px; } .create-templates-section .ai-tool-selector.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; margin-bottom: 0; } p.ai-tool-hint { font-size: 0.7rem; font-weight: 600; color: var(--inv-bg-color); opacity: 0.6 !important; text-align: left; margin-top: 1.25rem; letter-spacing: 0.04em; margin-top: 40px !important; padding-left: 30px; } /* AI Tool Cards */ .create-templates-section .ai-tool-card { transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, opacity 0.4s ease; padding: 14px 16px; border-radius: 14px; cursor: pointer; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); position: relative; align-items: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .create-templates-section .ai-tool-card:hover { background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-color: color-mix(in srgb, var(--blurple) 18%, transparent); transform: translateX(3px); box-shadow: 0 8px 40px color-mix(in srgb, var(--blurple) 10%, transparent), 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .create-templates-section .ai-tool-card.is-active { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--blurple) 30%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--blurple) 12%, transparent), 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--blurple) 8%, transparent); } .create-templates-section .ai-tool-card.is-active .template-icon svg, .create-templates-section .ai-tool-card.is-active .template-icon svg * { opacity: 1; } .create-templates-section .ai-tool-card:not(.is-active) { opacity: 0.55; } .create-templates-section .ai-tool-card:not(.is-active):hover { opacity: 0.85; } /* Unified demo view height */ [data-tool-view="default"], [data-tool-view="editor"], [data-tool-view="coach"] { height: 540px; min-height: 540px; max-height: 540px; overflow: hidden; } [data-tool-view="default"] { display: flex; flex-direction: column; gap: 0.75rem; } [data-tool-view="default"].space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; } [data-tool-view="default"] .editor-flow-body { flex: 1; min-height: 0; } .ai-demo-mode-hint { display: none; font-size: 0.55rem; color: rgba(255, 255, 255, 0.25); font-weight: 400; letter-spacing: 0.03em; } @media (max-width: 1150px) { .ai-demo-mode-hint { display: inline; } } /* ========== AI EDITOR FLOW VIEW ========== */ .editor-flow-view { display: flex; flex-direction: column; gap: 0.75rem; } .editor-prompt-bar { padding: 0.75rem 0.875rem; border-radius: 10px; background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); min-height: 200px; } .editor-flow-body { display: flex; gap: 1rem; align-items: flex-start; min-height: 340px; } .editor-circle-column { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex-shrink: 0; overflow: hidden; transition: width 0.4s ease, opacity 0.4s ease; } .editor-flow-body .editor-circle-column.is-collapsed { width: 0 !important; opacity: 0; gap: 0; } .editor-flow-body.diff-expanded { gap: 0 !important; } .editor-coach-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .editor-coach-btn:hover { background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.25); } .editor-coach-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .editor-circle-chart { width: 160px; height: 160px; position: relative; flex-shrink: 0; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--blurple) 8%, transparent)) drop-shadow(0 2px 4px color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); } .ring-track { display: none; } /* Gradient arc stop colors — shared by creator, editor, personalize rings */ .rg-stop-a { stop-color: rgba(99, 102, 241, 0.68); } .rg-stop-b { stop-color: rgba(139, 92, 246, 0.26); } .rg-stop-c { stop-color: rgba(99, 102, 241, 0.03); } /* Large circle for creator-only view */ .editor-circle-chart--lg { width: 280px; height: 280px; filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)) drop-shadow(0 0 120px rgba(99, 102, 241, 0.06)); } .editor-circle-chart--lg .editor-circle-center { font-size: 0.82rem; font-weight: 600; padding: 4.5rem; line-height: 1.5; letter-spacing: 0.01em; } .editor-circle-chart--lg .editor-circle-nodes rect { transition: fill 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Creator two-column layout: circle left, process log right */ .creator-two-col { align-items: stretch; min-height: 0; flex: 1; gap: 1.25rem; } .creator-two-col .editor-circle-column { align-items: center; gap: 1.25rem; flex-shrink: 0; } /* ========== AI PROCESS LOG ========== */ .ai-process-log { flex: 1; display: flex; flex-direction: column; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; min-width: 0; } .ai-process-log-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .ai-process-log-title { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.85); } .ai-process-log-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(110, 231, 183, 0.9); } .ai-log-pulse { width: 6px; height: 6px; border-radius: 50%; background: rgba(110, 231, 183, 0.9); animation: aiLogPulse 2s ease-in-out infinite; } @keyframes aiLogPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(110, 231, 183, 0.4); } 50% { opacity: 0.5; box-shadow: 0 0 8px 3px rgba(110, 231, 183, 0); } } .ai-process-log-body { flex: 1; padding: 0.5rem 0; overflow-y: auto; scrollbar-width: none; font-family: var(--font-main, 'Satoshi', sans-serif); } .ai-process-log-body::-webkit-scrollbar { display: none; } .ai-log-entry { display: flex; align-items: baseline; gap: 0.65rem; padding: 0.3rem 0.85rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes aiLogFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .ai-log-ts { font-size: 0.55rem; color: rgba(255, 255, 255, 0.2); flex-shrink: 0; min-width: 2.2rem; } .ai-log-msg { font-size: 0.75rem; color: rgba(255, 255, 255, 0.95); line-height: 1.5; } .ai-log-entry--system .ai-log-msg { color: rgba(200, 210, 255, 1); font-weight: 600; } .ai-log-entry--success .ai-log-msg { color: #86efac; } .ai-log-entry--success .ai-log-msg::before { content: "\2713 "; font-weight: 700; color: #86efac; } .ai-log-dots::after { content: ''; animation: aiLogDots 1.5s steps(4, end) infinite; } @keyframes aiLogDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } } /* ========== EDITOR AI STATUS CYCLING ========== */ .editor-ai-status-cycle { display: inline-flex; align-items: center; color: rgba(165, 180, 252, 0.8); transition: opacity 0.4s ease; } .editor-diff-panel.is-visible .editor-diff-lines:empty ~ .editor-diff-actions { opacity: 0.3; pointer-events: none; } .editor-circle-ring { position: absolute; inset: 0; width: 100%; height: 100%; } .editor-circle-nodes { position: absolute; inset: 0; width: 100%; height: 100%; } .editor-circle-nodes rect { fill: rgba(99, 102, 241, 0.04); stroke: rgba(99, 102, 241, 0.38); stroke-width: 0.6; transition: fill 0.4s ease, stroke 0.4s ease, filter 0.4s ease; } .editor-circle-nodes rect.is-idle { fill: rgba(99, 102, 241, 0.03); stroke: rgba(99, 102, 241, 0.22); filter: none; } .editor-circle-nodes rect.is-target { fill: rgba(251, 191, 36, 0.9); stroke: rgba(251, 191, 36, 0.6); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); } .editor-circle-nodes rect.is-working { fill: rgba(165, 180, 252, 0.92); stroke: rgba(165, 180, 252, 0.7); filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.5)); animation: editorNodePulse 1s ease-in-out infinite; } .editor-circle-nodes rect.is-complete { fill: rgba(34, 197, 94, 0.88); stroke: rgba(34, 197, 94, 0.5); filter: drop-shadow(0 0 5px rgba(34, 197, 94, 0.4)); } @keyframes editorNodePulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } .editor-circle-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.65rem; font-weight: 700; text-align: center; color: var(--inv-bg-color); opacity: 0.7; padding: 2rem; line-height: 1.3; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .personalize-circle-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.65rem; font-weight: 700; text-align: center; color: var(--inv-bg-color); opacity: 0.7; padding: 2rem; line-height: 1.3; letter-spacing: 0.02em; } .creator-center-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; color: #fff; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; text-decoration: none; pointer-events: auto; transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s; opacity: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .creator-center-cta:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); transform: scale(1.05); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.12); } .editor-diff-panel { flex: 1; min-width: 0; overflow: hidden; position: relative; border-radius: 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); padding: 0.75rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .editor-diff-panel.is-visible { opacity: 1; transform: translateY(0); } .editor-diff-header { margin-bottom: 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.65rem; } .editor-diff-header [data-editor-diff-title] { transition: opacity 0.25s ease; display: inline-block; } .editor-diff-lines { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.72rem; line-height: 1.65; } .editor-diff-line { padding: 0.2rem 0.5rem; border-radius: 4px; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; } .editor-diff-line.is-visible { opacity: 1; transform: translateX(0); } .editor-diff-line.diff-remove { background: rgba(239, 68, 68, 0.1); color: rgba(252, 165, 165, 0.9); text-decoration: line-through; text-decoration-color: rgba(252, 165, 165, 0.3); } .editor-diff-line.diff-add { background: rgba(34, 197, 94, 0.1); color: rgba(134, 239, 172, 0.9); } .editor-diff-line.diff-context { color: var(--inv-bg-color); opacity: 0.35; } .editor-diff-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; opacity: 0; transition: opacity 0.3s ease; } .editor-diff-actions.is-visible { opacity: 1; } .editor-accept-btn, .editor-reject-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.65rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; border: none; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; } .editor-accept-btn { background: rgba(34, 197, 94, 0.15); border: 1px solid rgba(34, 197, 94, 0.25); color: rgba(134, 239, 172, 0.9); } .editor-accept-btn:hover { background: rgba(34, 197, 94, 0.25); transform: translateY(-1px); } .editor-reject-btn { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); color: rgba(252, 165, 165, 0.8); } .editor-reject-btn:hover { background: rgba(239, 68, 68, 0.2); transform: translateY(-1px); } /* ========== AI COACH CHAT VIEW ========== */ .coach-chat-view { display: flex; flex-direction: column; } .coach-chat-messages { flex: 1; overflow-y: auto; padding: 0.5rem 0; display: flex; flex-direction: column; gap: 0.625rem; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; } .coach-chat-bubble { max-width: 88%; padding: 0.625rem 0.875rem; border-radius: 10px; font-size: 0.8rem; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .coach-chat-bubble.is-visible { opacity: 1; transform: translateY(0); } .coach-bubble-user { align-self: flex-end; background: rgba(78, 137, 241, 0.15); border: 1px solid rgba(78, 137, 241, 0.2); color: var(--inv-bg-color); } .coach-bubble-ai { align-self: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.05); color: var(--inv-bg-color); } .coach-bubble-thinking { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--inv-bg-color); opacity: 0.85; font-style: italic; font-size: 0.75rem; } .coach-bubble-thinking.is-visible { opacity: 0.85; } .coach-thinking-dots { display: inline-flex; gap: 3px; margin-left: 4px; } .coach-thinking-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--inv-bg-color); opacity: 0.7; animation: coachDotPulse 1.2s infinite; } .coach-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .coach-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes coachDotPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Coach report card */ .coach-report-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blurple); opacity: 0.8; margin-bottom: 0.2rem; } .coach-report-headline { font-size: 0.85rem; font-weight: 800; line-height: 1.25; margin-bottom: 0.6rem; } /* Coach flow pivot bars */ .coach-flow-pivot { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.5rem; } .coach-flow-row { display: flex; align-items: center; gap: 0.35rem; } .coach-flow-stage { flex: 0 0 5.2rem; font-size: 0.58rem; font-weight: 600; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .coach-flow-bar-wrap { flex: 1; height: 6px; border-radius: 3px; background: rgba(78, 137, 241, 0.1); overflow: hidden; } .coach-flow-bar { height: 100%; width: var(--bar-width, 0%); border-radius: 3px; background: var(--blurple); opacity: 0.55; } .coach-flow-row.is-alert .coach-flow-bar { background: #ef4444; opacity: 0.8; } .coach-flow-row.is-good .coach-flow-bar { background: #22c55e; opacity: 0.7; } .coach-flow-pct { flex: 0 0 2.2rem; font-size: 0.6rem; font-weight: 700; text-align: right; opacity: 0.85; } .coach-flow-row.is-alert .coach-flow-pct { color: #ef4444; } .coach-flow-row.is-good .coach-flow-pct { color: #22c55e; } .coach-flow-note { flex: 0 0 auto; font-size: 0.5rem; opacity: 0.5; font-style: italic; white-space: nowrap; } .coach-report-finding { font-size: 0.72rem; line-height: 1.45; opacity: 0.85; margin-bottom: 0.35rem; } .coach-report-source { font-size: 0.58rem; opacity: 0.4; font-style: italic; margin-bottom: 0.5rem; } .coach-cta-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.2rem; border-radius: 10px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em; border: none; cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none; box-shadow: 0 2px 12px rgba(139, 92, 246, 0.35); } .coach-cta-btn:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5); } .coach-chat-input { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.875rem; margin-top: 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); } .coach-input-row { flex: 1; font-size: 0.8rem; color: var(--inv-bg-color); opacity: 0.7; display: flex; align-items: center; min-height: 1.2em; } .coach-send-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(78, 137, 241, 0.2); border: 1px solid rgba(78, 137, 241, 0.25); color: var(--blurple); cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; } .coach-send-btn:hover { background: rgba(78, 137, 241, 0.35); } /* Glass Container Enhancement */ .create-templates-section .glass { border: 1px solid rgba(139, 92, 246, 0.2) !important; box-shadow: 0 20px 60px rgba(139, 92, 246, 0.18), 0 10px 30px rgba(96, 165, 250, 0.12) !important; } /* ========== AI ARCHITECT CARD - VISIBLE BLUE GRADIENT (OLD STYLE - KEPT FOR BACKWARDS COMPATIBILITY) ========== */ /* Background with visible blue gradient - more contrast */ .create-templates-section .ai-architect-card { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 25px 70px rgba(55, 48, 163, 0.4), 0 15px 40px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } /* ========== GLASSMORPHISM GRADIENT STYLE ========== */ /* Semi-transparent gradient with glassmorphism */ /* Reduce header area spacing */ .create-templates-section .ai-architect-card--glass { padding-top: 1.25rem !important; } .create-templates-section .ai-architect-card--glass > .flex.items-center.justify-between { margin-bottom: 1rem !important; } .create-templates-section .ai-architect-card--glass { background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(160deg, rgba(79,70,229,0.85) 0%, rgba(99,102,241,0.75) 50%, rgba(139,92,246,0.8) 100%), var(--main-bg-color) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; box-shadow: 0 25px 70px rgba(55, 48, 163, 0.35), 0 15px 40px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; } /* Text colors for gradient background */ .create-templates-section .ai-architect-card--glass > div > div > span { color: rgba(255, 255, 255, 0.98) !important; } /* Icon container for gradient background */ .create-templates-section .ai-architect-card--glass .ai-architect-glyph { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; } .create-templates-section .ai-architect-card--glass .ai-architect-glyph svg { color: rgba(255, 255, 255, 0.95) !important; } /* AI Flow Circle Chart in Creator CTA */ .ai-flow-circle-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ai-flow-circle-bg { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(255, 255, 255, 0.06); } /* Creator-specific overrides (reuses editor layout classes) */ .creator-progress-panel { padding: 0; display: flex; flex-direction: column; overflow: hidden; } .creator-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .creator-panel-scroll { flex: 1; overflow-y: auto; padding: 0.5rem 0.75rem; min-height: 0; scrollbar-width: none; -ms-overflow-style: none; } .creator-panel-scroll::-webkit-scrollbar { display: none; } .create-templates-section .ai-architect-card--glass .ai-prompt-caret { background: #4E89F1 !important; animation: blink 1s step-end infinite; } /* Status container for gradient card */ .create-templates-section .ai-architect-card--glass .ai-architect-status { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; } .create-templates-section .ai-architect-card--glass .ai-status-header { color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .ai-architect-card--glass .ai-status-label { color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .ai-architect-card--glass .ai-status-message { color: rgba(255, 255, 255, 0.95) !important; } .create-templates-section .ai-architect-card--glass .ai-stage { color: rgba(255, 255, 255, 0.85) !important; } .create-templates-section .ai-architect-card--glass .ai-stage-label { color: rgba(255, 255, 255, 0.95) !important; } .create-templates-section .ai-architect-card--glass .ai-status-chip--idle { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: rgba(255, 255, 255, 0.95) !important; } /* Vertical centering and spacing */ .create-templates-section .ai-feature-list-container { display: flex; flex-direction: column; justify-content: center; } .create-templates-section .ai-stage-list { line-height: 1.8; } .create-templates-section .ai-stage-list > * + * { margin-top: 1rem; } /* ========== OLD SOLID GRADIENT STYLES (FOR REFERENCE) ========== */ /* AI Creator label and text - white for gradient background */ .create-templates-section .ai-architect-card > div > div > span { color: rgba(255, 255, 255, 0.98) !important; } /* Icon container */ .create-templates-section .ai-architect-glyph { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; } .create-templates-section .ai-architect-glyph svg { color: rgba(255, 255, 255, 0.95) !important; } /* Status Header Text */ .create-templates-section .ai-status-header { color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .ai-status-label { color: rgba(255, 255, 255, 0.9) !important; } /* Status Chips */ .create-templates-section .ai-status-chip--idle { background: rgba(255, 255, 255, 0.25) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: rgba(255, 255, 255, 0.95) !important; } .create-templates-section .ai-status-chip--active { background: rgba(255, 200, 0, 1) !important; border: 2px solid rgba(255, 220, 0, 1) !important; color: rgba(30, 30, 30, 1) !important; font-weight: 700 !important; box-shadow: 0 0 16px rgba(255, 200, 0, 0.8) !important; } .create-templates-section .ai-status-chip--done { background: rgba(34, 197, 94, 1) !important; border: 2px solid rgba(34, 197, 94, 1) !important; color: rgba(255, 255, 255, 1) !important; font-weight: 700 !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.8) !important; } /* Status Message */ .create-templates-section .ai-status-message { color: rgba(255, 255, 255, 0.95) !important; } /* Stage Items */ .create-templates-section .ai-stage { color: rgba(255, 255, 255, 0.85) !important; } .create-templates-section .ai-stage-label { color: rgba(255, 255, 255, 0.95) !important; } /* Stage Indicators */ .create-templates-section .ai-stage-indicator { border-color: rgba(255, 255, 255, 0.4) !important; } /* Stage Indicator with Check - VIBRANT GREEN BACKGROUND WITH GLOW */ .create-templates-section .ai-stage.is-complete .ai-stage-indicator { background: rgba(34, 197, 94, 0.9) !important; border: 2px solid rgba(34, 197, 94, 1) !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.7) !important; } /* Stage Checkmarks - WHITE ON GREEN WITH BOLD STROKE */ .create-templates-section .ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } .create-templates-section .ai-stage.is-complete .ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } .create-templates-section svg.ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } .create-templates-section .ai-stage.is-complete svg.ai-stage-check { color: #ffffff !important; stroke: #ffffff !important; stroke-width: 3 !important; } /* Creator panel - gradient card overrides */ .create-templates-section .creator-panel-header { border-bottom-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.9) !important; } .create-templates-section .creator-center-cta { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; text-decoration: none !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.02em; padding: 10px 22px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; border-radius: 10px !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .create-templates-section .creator-center-cta:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.25) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.15) !important; transform: scale(1.05); } /* ========== EDITOR VIEW - GRADIENT CARD OVERRIDES ========== */ /* Boost contrast for editor elements on purple glass background */ .create-templates-section .editor-prompt-bar { background: var(--main-bg-color) !important; border-color: color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; backdrop-filter: blur(10px) !important; border-radius: 14px !important; padding: 0.875rem 1rem !important; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06), 0 0 0 1px color-mix(in srgb, var(--inv-bg-color) 4%, transparent) !important; } .create-templates-section .editor-prompt-bar .text-indigo-400 { color: #4E89F1 !important; opacity: 1 !important; font-weight: 600 !important; } .create-templates-section .editor-prompt-text { color: var(--inv-bg-color) !important; } .create-templates-section .editor-prompt-bar .ai-prompt-caret { background: #4E89F1 !important; } .create-templates-section .editor-diff-panel { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.35) !important; backdrop-filter: blur(6px) !important; } .create-templates-section .editor-diff-header span { color: rgba(255, 255, 255, 0.95) !important; opacity: 1 !important; } .create-templates-section .editor-diff-line.diff-remove { background: rgba(220, 38, 38, 0.3) !important; color: #fee2e2 !important; } .create-templates-section .editor-diff-line.diff-add { background: rgba(22, 163, 74, 0.3) !important; color: #dcfce7 !important; } .create-templates-section .editor-diff-line.diff-context { color: rgba(255, 255, 255, 0.8) !important; opacity: 1 !important; } .create-templates-section .editor-circle-center { color: rgba(255, 255, 255, 0.98) !important; opacity: 1 !important; /* text-shadow: 0 1px 8px rgba(0, 0, 0, 0.15), 0 0 20px rgba(139, 92, 246, 0.15); */ /* background: radial-gradient(circle at center, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.04) 40%, transparent 70%); */ border-radius: 50%; /* backdrop-filter: blur(4px); */ -webkit-backdrop-filter: blur(4px); } .create-templates-section .editor-circle-ring .ring-track { stroke: rgba(255, 255, 255, 0.12) !important; } .create-templates-section .editor-circle-nodes rect.is-idle { fill: rgba(255, 255, 255, 0.18) !important; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.08)) !important; } .create-templates-section .editor-circle-nodes rect.is-target { fill: rgba(251, 191, 36, 1) !important; filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.7)) drop-shadow(0 0 24px rgba(251, 191, 36, 0.25)) !important; } .create-templates-section .editor-circle-nodes rect.is-working { fill: rgba(255, 255, 255, 1) !important; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(165, 180, 252, 0.3)) !important; } .create-templates-section .editor-circle-nodes rect.is-complete { fill: rgba(52, 211, 153, 1) !important; filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4)) !important; } /* Celebration animation when all stages finish */ .editor-circle-chart.is-celebrating { animation: creatorCelebrate 1.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .editor-circle-chart.is-celebrating .editor-circle-nodes rect.is-complete { animation: nodeCelebratePop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .editor-circle-chart.is-celebrating .editor-circle-ring .ring-track { animation: ringCelebrateGlow 1.4s ease forwards; } @keyframes creatorCelebrate { 0% { transform: scale(1); filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)); } 20% { transform: scale(1.06); filter: drop-shadow(0 0 80px rgba(52, 211, 153, 0.25)); } 50% { transform: scale(0.98); } 70% { transform: scale(1.02); } 100% { transform: scale(1); filter: drop-shadow(0 0 60px rgba(139, 92, 246, 0.12)); } } @keyframes nodeCelebratePop { 0% { filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0)); } 35% { filter: drop-shadow(0 0 14px rgba(52, 211, 153, 0.9)) drop-shadow(0 0 28px rgba(52, 211, 153, 0.3)); } 100% { filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4)); } } @keyframes ringCelebrateGlow { 0% { stroke: rgba(255, 255, 255, 0.12); } 30% { stroke: rgba(52, 211, 153, 0.5); } 100% { stroke: rgba(255, 255, 255, 0.12); } } .ai-stage.is-done-pulse { animation: stageDonePulse 0.5s ease; } @keyframes stageDonePulse { 0% { opacity: 1; transform: translateX(0); } 30% { opacity: 0.7; transform: translateX(3px); } 100% { opacity: 1; transform: translateX(0); } } .create-templates-section .editor-accept-btn { background: rgba(34, 197, 94, 0.35) !important; border-color: rgba(34, 197, 94, 0.55) !important; color: #dcfce7 !important; } .create-templates-section .editor-reject-btn { background: rgba(239, 68, 68, 0.3) !important; border-color: rgba(239, 68, 68, 0.45) !important; color: #fee2e2 !important; } /* ========== COACH VIEW - GRADIENT CARD OVERRIDES ========== */ /* Boost contrast for coach elements on purple glass background */ .create-templates-section .coach-bubble-user { background: rgba(255, 255, 255, 0.22) !important; border-color: rgba(255, 255, 255, 0.35) !important; color: rgba(255, 255, 255, 0.98) !important; } .create-templates-section .coach-bubble-ai { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.98) !important; } .create-templates-section .coach-bubble-thinking { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.85) !important; } .create-templates-section .coach-report-tag { color: rgba(255, 255, 255, 0.7) !important; opacity: 1 !important; } .create-templates-section .coach-report-headline { color: rgba(255, 255, 255, 1) !important; } .create-templates-section .coach-flow-stage { color: rgba(255, 255, 255, 0.85) !important; opacity: 1 !important; } .create-templates-section .coach-flow-bar-wrap { background: rgba(255, 255, 255, 0.15) !important; } .create-templates-section .coach-flow-bar { background: rgba(255, 255, 255, 0.7) !important; opacity: 0.9 !important; } .create-templates-section .coach-flow-row.is-alert .coach-flow-bar { background: #fca5a5 !important; opacity: 1 !important; } .create-templates-section .coach-flow-row.is-good .coach-flow-bar { background: #86efac !important; opacity: 0.9 !important; } .create-templates-section .coach-flow-pct { color: rgba(255, 255, 255, 0.95) !important; opacity: 1 !important; } .create-templates-section .coach-flow-row.is-alert .coach-flow-pct { color: #fca5a5 !important; } .create-templates-section .coach-flow-row.is-good .coach-flow-pct { color: #86efac !important; } .create-templates-section .coach-flow-note { color: rgba(255, 255, 255, 0.6) !important; opacity: 1 !important; } .create-templates-section .coach-report-finding { color: rgba(255, 255, 255, 0.95) !important; opacity: 1 !important; } .create-templates-section .coach-report-source { color: rgba(255, 255, 255, 0.5) !important; opacity: 1 !important; } .create-templates-section .coach-cta-btn { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); color: #fff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important; } .create-templates-section .coach-cta-btn:hover { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(139, 92, 246, 0.15) !important; } .create-templates-section .coach-chat-input { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(255, 255, 255, 0.3) !important; backdrop-filter: blur(10px) !important; } .create-templates-section .coach-input-row { color: rgba(30, 30, 30, 0.9) !important; opacity: 1 !important; } .create-templates-section .coach-input-row .ai-prompt-caret { background: #4E89F1 !important; } .create-templates-section .coach-send-btn { background: rgba(78, 137, 241, 0.15) !important; border-color: rgba(78, 137, 241, 0.3) !important; color: #4E89F1 !important; } .create-templates-section .coach-thinking-dots span { background: rgba(255, 255, 255, 0.9) !important; } /* ========== SHARE JOURNEYS SECTION ========== */ /* Section Background - Matches Problem Section Layout */ .share-journeys-section { background: var(--main-bg-color); /* background: color-mix(in srgb, var(--main-bg-color) 95%, rgba(139, 92, 246, 1) 5%); */ color: var(--inv-bg-color); } .share-journeys-section .share-copy, .share-journeys-section .share-copy p:not(.beat-mockup-caption):not(.beat-graphic-caption), .share-journeys-section .share-copy h2 { color: var(--inv-bg-color); text-align: center; } .share-journeys-section .share-copy p:not(.beat-mockup-caption):not(.beat-graphic-caption) { font-size: 1.125rem; opacity: 0.7; } .share-journeys-section .share-feature-title { color: var(--inv-bg-color) !important; } .share-journeys-section .share-feature-desc { color: var(--inv-bg-color) !important; opacity: 0.8 !important; } /* Feature Icons */ .share-journeys-section .share-feature-icon { width: 48px; height: 48px; min-width: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 20%, var(--white) 80%), color-mix(in srgb, var(--purple) 25%, var(--white) 75%)); border: 1px solid color-mix(in srgb, var(--blurple) 40%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--blurple) 25%, transparent); transition: all 0.3s ease; } .share-journeys-section .share-feature-icon svg { color: var(--inv-bg-color) !important; } .share-journeys-section .share-feature-icon:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 32px color-mix(in srgb, var(--blurple) 35%, transparent); } /* ========== WORKFLOW CONTAINER ========== */ .share-workflow-container { position: relative; width: 100%; background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(96, 165, 250, 0.05)); border-radius: 16px; padding: 40px 30px; display: flex; flex-direction: column; gap: 0; } /* Workflow Step */ .workflow-step { position: relative; display: flex; align-items: flex-start; gap: 20px; opacity: 0; animation: fade-in-step 0.5s ease-out forwards; } .workflow-step-1 { animation-delay: 0.2s; } .workflow-step-2 { animation-delay: 0.4s; } .workflow-step-3 { animation-delay: 0.6s; } .workflow-step-4 { animation-delay: 0.8s; } /* Step Number */ .workflow-step-number { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4), 0 4px 12px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); z-index: 2; position: relative; } .workflow-step-number::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(96, 165, 250, 0.2)); z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .workflow-step:hover .workflow-step-number::after { opacity: 1; } /* Step Content */ .workflow-step-content { flex: 1; display: flex; align-items: center; gap: 16px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.7)), radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.05), transparent 50%); border: 1.5px solid rgba(139, 92, 246, 0.2); border-radius: 14px; padding: 20px; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.12), 0 2px 8px rgba(96, 165, 250, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .workflow-step-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); } .workflow-step-content:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)), radial-gradient(circle at 10% 20%, rgba(139, 92, 246, 0.08), transparent 50%); border-color: rgba(139, 92, 246, 0.35); box-shadow: 0 8px 28px rgba(139, 92, 246, 0.2), 0 4px 12px rgba(96, 165, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9); transform: translateX(8px); } /* Step Icon */ .workflow-step-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 20%, var(--white) 80%), color-mix(in srgb, var(--purple) 25%, var(--white) 75%)); border: 1.5px solid color-mix(in srgb, var(--blurple) 40%, transparent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2), 0 2px 8px rgba(96, 165, 250, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: all 0.3s ease; } .workflow-step-content:hover .workflow-step-icon { transform: scale(1.05); box-shadow: 0 8px 24px rgba(139, 92, 246, 0.25), 0 3px 12px rgba(96, 165, 250, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6); } .workflow-step-icon svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); } /* Step Text */ .workflow-step-text { flex: 1; } .workflow-step-title { font-size: 18px; font-weight: 700; color: var(--darkblue); margin-bottom: 4px; } .workflow-step-desc { font-size: 14px; color: rgba(0, 0, 0, 0.6); line-height: 1.5; } /* Connector Line */ .workflow-connector { position: absolute; left: 23px; top: 48px; width: 2px; height: calc(100% + 8px); background: linear-gradient(180deg, rgba(139, 92, 246, 0.4), rgba(96, 165, 250, 0.3)); z-index: 1; } .workflow-step-4 .workflow-connector { display: none; } /* Animations */ @keyframes fade-in-step { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */ @media (max-width: 768px) { .workflow-step { flex-direction: column; align-items: flex-start; } .workflow-step-number { width: 40px; height: 40px; font-size: 16px; } .workflow-connector { left: 19px; top: 40px; } .workflow-step-content { flex-direction: column; align-items: flex-start; padding: 16px; } .workflow-step-icon { width: 48px; height: 48px; } .workflow-step-title { font-size: 16px; } .workflow-step-desc { font-size: 13px; } } .share-workflow-container { max-width: 800px; margin: 0 auto; background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 2px solid color-mix(in srgb, var(--purple) 20%, transparent); border-radius: 32px; padding: 64px 56px; display: flex; flex-direction: column; align-items: center; gap: 32px; box-shadow: 0 30px 80px rgba(139, 92, 246, 0.15), 0 12px 32px rgba(96, 165, 250, 0.1), inset 0 2px 4px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(16px); position: relative; overflow: hidden; } .share-workflow-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent); } /* Step Label */ .share-step-label { color: var(--inv-bg-color) !important; font-size: 12px; font-weight: 700; text-align: center; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.5; position: relative; display: inline-block; width: 100%; } .share-step-label::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 40px; height: 2px; background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent); } /* Common Step Styles */ .share-step { width: 100%; opacity: 0; animation: share-step-flow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; transform-origin: center; } .share-step-1 { animation-delay: 0.2s; } .share-step-2 { animation-delay: 0.6s; } .share-step-3 { animation-delay: 1.0s; } .share-step-4 { animation-delay: 1.4s; } /* Arrow Down */ .share-arrow-down { opacity: 0; animation: share-arrow-flow 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards, share-arrow-pulse 2.5s ease-in-out infinite; position: relative; } .share-arrow-down::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%); border-radius: 50%; z-index: -1; animation: share-arrow-glow 2.5s ease-in-out infinite; } .share-arrow-down:nth-of-type(2) { animation-delay: 0.4s, 0.4s; } .share-arrow-down:nth-of-type(4) { animation-delay: 0.8s, 0.8s; } .share-arrow-down:nth-of-type(6) { animation-delay: 1.2s, 1.2s; } .share-arrow-down svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.25)); } /* Step 1: Templates Grid */ .share-templates-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .share-template-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; transition: all 0.3s ease; padding: 8px; border-radius: 16px; } .share-template-item:hover { background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .share-template-item:hover .share-template-circle { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 32px rgba(139, 92, 246, 0.25), 0 6px 16px rgba(96, 165, 250, 0.2); } .share-template-circle { position: relative; width: 110px; height: 110px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--inv-bg-color) 8%, transparent), transparent 70%), radial-gradient(circle, rgba(139, 92, 246, 0.08), transparent 60%); border-radius: 50%; padding: 5px; box-shadow: 0 8px 24px rgba(139, 92, 246, 0.18), 0 4px 12px rgba(96, 165, 250, 0.12), inset 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .share-template-circle::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(96, 165, 250, 0.1)); border-radius: 50%; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .share-template-item:hover .share-template-circle::before { opacity: 1; } .share-circle-chart { width: 100%; height: 100%; filter: drop-shadow(0 6px 16px rgba(139, 92, 246, 0.2)); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .share-template-active .share-circle-chart { filter: drop-shadow(0 8px 24px rgba(102, 126, 234, 0.4)); } .share-template-item:hover .share-circle-chart { filter: drop-shadow(0 12px 32px rgba(139, 92, 246, 0.35)); } /* Stage nodes */ .share-circle-chart circle[r="5"] { transition: all 0.3s ease; stroke: color-mix(in srgb, var(--main-bg-color) 90%, transparent); stroke-width: 2.5; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } .share-template-item:hover .share-circle-chart circle[r="5"] { r: 7; stroke-width: 3; } .share-template-check { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5), 0 2px 8px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); z-index: 10; animation: pop-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s backwards; } .share-template-name { font-size: 13px; font-weight: 600; color: var(--inv-bg-color) !important; text-align: center; } /* Step 2: Customer Input */ .share-customer-input { display: flex; flex-direction: column; gap: 12px; } .share-input-field { background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent); border-radius: 14px; padding: 18px 22px; font-size: 16px; font-weight: 600; color: var(--inv-bg-color) !important; box-shadow: 0 4px 20px rgba(139, 92, 246, 0.12), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transition: all 0.3s ease; } .share-input-field:hover { border-color: color-mix(in srgb, var(--purple) 40%, transparent); box-shadow: 0 6px 24px rgba(139, 92, 246, 0.18), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .share-input-text { animation: typing 1s steps(20) 1.2s forwards; overflow: hidden; white-space: nowrap; width: 0; } .share-crm-badge { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(59, 130, 246, 0.15)); border: 1.5px solid rgba(96, 165, 250, 0.3); border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--inv-bg-color) !important; align-self: flex-start; box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15); transition: all 0.3s ease; } .share-crm-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(96, 165, 250, 0.2); } .share-crm-badge svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); } /* Step 3: Participants */ .share-participants-list { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .share-participant-chip { display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent); border-radius: 24px; padding: 8px 16px 8px 8px; font-size: 14px; font-weight: 600; color: var(--inv-bg-color) !important; box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15), 0 2px 8px rgba(96, 165, 250, 0.1), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); animation: pop-in 0.4s ease-out; transition: all 0.3s ease; } .share-participant-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2), 0 3px 12px rgba(96, 165, 250, 0.15), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-color: color-mix(in srgb, var(--purple) 35%, transparent); } .share-participant-chip:nth-child(1) { animation-delay: 1.5s; opacity: 0; animation-fill-mode: forwards; } .share-participant-chip:nth-child(2) { animation-delay: 1.7s; opacity: 0; animation-fill-mode: forwards; } .share-participant-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3); } .share-add-button { display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--inv-bg-color) 4%, var(--main-bg-color)); border: 2px dashed color-mix(in srgb, var(--purple) 35%, transparent); border-radius: 24px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--inv-bg-color) !important; cursor: pointer; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1); transition: all 0.3s ease; } .share-add-button:hover { background: linear-gradient(to bottom, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.08)); border-color: rgba(139, 92, 246, 0.5); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(139, 92, 246, 0.2); } .share-add-button svg { color: var(--inv-bg-color) !important; stroke: var(--blurple); } /* Step 4: AI Panel */ .share-ai-panel { position: relative; background: color-mix(in srgb, var(--inv-bg-color) 5%, var(--main-bg-color)); border: 1.5px solid color-mix(in srgb, var(--purple) 25%, transparent); border-radius: 18px; padding: 24px; display: flex; align-items: center; gap: 16px; box-shadow: 0 12px 40px rgba(139, 92, 246, 0.18), 0 6px 20px rgba(96, 165, 250, 0.12), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(10px); overflow: hidden; } .share-ai-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.1), transparent 60%); pointer-events: none; z-index: 0; } .share-ai-panel > * { position: relative; z-index: 1; } .share-ai-icon { width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, var(--blurple), var(--purple)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4), 0 2px 8px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); animation: pulse-glow 2s ease-in-out infinite; } .share-ai-icon svg { color: #ffffff; filter: drop-shadow(0 2px 8px rgba(255, 255, 255, 0.3)); } .share-ai-status { flex: 1; } .share-ai-text { font-size: 14px; font-weight: 600; color: var(--inv-bg-color) !important; margin-bottom: 10px; letter-spacing: -0.01em; } .share-ai-progress { width: 100%; height: 8px; background: color-mix(in srgb, var(--inv-bg-color) 8%, var(--main-bg-color)); border-radius: 4px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05); position: relative; } .share-ai-progress::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); border-radius: 4px; box-shadow: 0 0 12px rgba(139, 92, 246, 0.4); animation: progress-fill-clip 2.5s ease-out 2s forwards; clip-path: inset(0 100% 0 0); } .share-ai-progress-bar { display: none; } /* Animations */ @keyframes fade-in-step { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in-arrow { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse-arrow-down { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes pop-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4), 0 2px 8px rgba(96, 165, 250, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } 50% { box-shadow: 0 8px 28px rgba(139, 92, 246, 0.6), 0 4px 12px rgba(96, 165, 250, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); } } /* Dynamic Share Workflow Animations */ @keyframes share-step-flow { 0% { opacity: 0; transform: translateY(30px) scale(0.95); } 60% { opacity: 0.8; transform: translateY(-5px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes share-arrow-flow { 0% { opacity: 0; transform: translateY(-15px) scale(0.8); } 60% { opacity: 0.9; transform: translateY(3px) scale(1.1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes share-arrow-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } } @keyframes share-arrow-glow { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } } @keyframes progress-fill { from { width: 0; } to { width: 100%; } } /* Responsive */ @media (max-width: 768px) { .share-journeys-section { padding: 60px 20px; } .share-workflow-container { padding: 40px 24px; border-radius: 20px; } .share-templates-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .share-template-circle { width: 80px; height: 80px; } .share-template-name { font-size: 11px; } .share-participants-list { flex-direction: column; align-items: stretch; } .share-ai-panel { padding: 20px; border-radius: 16px; } .share-ai-icon { width: 44px; height: 44px; } .workflow-step-content { padding: 16px; border-radius: 12px; } .workflow-step-icon { width: 48px; height: 48px; } .workflow-step-number { width: 42px; height: 42px; font-size: 18px; } } @media (max-width: 480px) { .share-journeys-section { padding: 40px 16px; } .share-workflow-container { padding: 30px 20px; border-radius: 18px; } .share-templates-grid { gap: 12px; } .share-template-circle { width: 70px; height: 70px; } .share-template-check { width: 24px; height: 24px; font-size: 14px; } .share-input-field { padding: 14px 18px; font-size: 14px; border-radius: 12px; } .share-participant-chip { padding: 6px 12px 6px 6px; font-size: 13px; } .share-participant-avatar { width: 28px; height: 28px; font-size: 11px; } .share-ai-panel { padding: 16px; flex-direction: column; text-align: center; } .share-ai-icon { width: 40px; height: 40px; } .share-ai-text { font-size: 13px; } .workflow-step { gap: 12px; } .workflow-step-content { padding: 12px; flex-direction: column; align-items: flex-start; } .workflow-step-icon { width: 42px; height: 42px; } .workflow-step-number { width: 36px; height: 36px; font-size: 16px; } .workflow-step-title { font-size: 16px; } .workflow-step-desc { font-size: 13px; } } /* ============================================ Navigate Journeys Section (3) ============================================ */ /* Stage Icon Styles */ .stage-icon { width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color) !important; } .stage-icon--discovery { background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 28%, transparent) 0%, color-mix(in srgb, var(--blurple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--purple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--purple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--experience { background: linear-gradient(160deg, color-mix(in srgb, var(--blurple) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--blurple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--blurple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--scope { background: linear-gradient(160deg, color-mix(in srgb, var(--lightblue) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--lightblue) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--lightblue) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } /* Navigate Stage Cards */ .navigate-stage-selector { display: flex; flex-direction: column; gap: 0.25rem; } .navigate-stage-card { transition: all 250ms ease; padding: 0.75rem 0.875rem; cursor: pointer; border: none; border-left: 2.5px solid transparent; position: relative; align-items: center; background: transparent; } .navigate-stage-card:hover { background: rgba(255, 255, 255, 0.03); } .navigate-stage-card.is-active { border-left-color: var(--inv-bg-color); background: rgba(255, 255, 255, 0.03); } .navigate-stage-card.is-active .stage-icon svg { opacity: 1; } .navigate-stage-card:not(.is-active) { opacity: 0.5; } .navigate-stage-card:not(.is-active):hover { opacity: 0.8; } .navigate-stage-hint { font-size: 0.7rem; color: var(--inv-bg-color); opacity: 0.6 !important; text-align: left; margin-top: 1.25rem; letter-spacing: 0.04em; margin-top: 40px !important; padding-left: 30px; font-weight: 600 !important; } /* Navigate Journey Cards */ .navigate-journey-selector { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 1230px) { .navigate-grid { grid-template-columns: repeat(2, 1fr); } } .navigate-journey-card { transition: all 300ms cubic-bezier(0.22, 1, 0.36, 1); padding: 14px 16px; border-radius: 14px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); position: relative; align-items: center; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); } .navigate-journey-card:hover { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); transform: translateX(3px); } .navigate-journey-card.is-active { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-color: color-mix(in srgb, var(--blurple) 30%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--blurple) 10%, transparent); } .navigate-journey-card.is-active .stage-icon svg { opacity: 1; } .navigate-journey-card:not(.is-active) { opacity: 0.55; } .navigate-journey-card:not(.is-active):hover { opacity: 0.85; } .navigate-journey-selector:has(.navigate-journey-card:hover) .navigate-journey-card:not(:hover):not(.is-active) { opacity: 0.35; filter: blur(0.5px); } /* Navigate Journey Visualizations */ /* Legacy: this used to override a section-level overflow:hidden so vertical * nodes in the old navigate-journey-viz layout could escape. The v6 mockup * panel doesn't share that container; keeping `overflow-x: hidden` here * was clipping the navigate panel's surrounding glow. Allow both axes to * pass through. */ #navigate { overflow: visible !important; } .navigate-journey-viz { position: relative; width: 100%; min-height: 560px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s ease; } .navigate-journey-viz.is-active { opacity: 1; } /* Navigate Ring Container */ .navigate-ring-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 500px; height: 500px; max-width: 95%; max-height: 95%; } .navigate-ring { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(139, 92, 246, 0.3)); } .progress-ring { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } .stage-marker { transition: all 0.4s ease; cursor: pointer; } .stage-marker:hover { r: 10; opacity: 1 !important; } /* Collaboration Space */ .navigate-collab-space { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; max-width: 70%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 16px; padding: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } .collab-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .stage-name-display { font-size: 18px; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 4px; } .stage-progress { font-size: 12px; color: var(--inv-bg-color); opacity: 0.6; } .collab-participants { margin-bottom: 12px; } .participant-group { margin-bottom: 8px; } .participant-group:last-child { margin-bottom: 0; } .group-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--inv-bg-color); opacity: 0.5; margin-bottom: 8px; } .participant-list { display: flex; flex-direction: column; gap: 6px; } .participant { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.02); transition: all 0.3s ease; } .participant.accent { background: rgba(139, 92, 246, 0.15); border: 1px solid rgba(139, 92, 246, 0.3); } .participant-avatar { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--lightblue)); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: white; margin-right: 3px; flex-shrink: 0; } .participant-info { flex: 1; min-width: 0; } .participant-name { font-size: 10px; font-weight: 600; color: var(--inv-bg-color); white-space: nowrap; overflow: hidden; text-align: left; text-overflow: ellipsis; } .participant-title { font-size: 10px; color: var(--inv-bg-color); opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; } .collab-activities { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .activity-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--inv-bg-color); opacity: 0.5; margin-bottom: 8px; } .activity-list { display: flex; flex-direction: column; gap: 6px; } .activity-item { font-size: 11px; color: var(--inv-bg-color); opacity: 0.8; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); border-radius: 6px; border-left: 2px solid rgba(139, 92, 246, 0.4); } /* AI Navigator Widget Animations */ #ai-navigator-widget { transition: all 0.3s ease; } #nav-probability, #nav-confidence { transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); } #nav-justification { transition: opacity 0.4s ease; } /* Responsive adjustments */ @media (max-width: 1024px) { .navigate-collab-space { width: 240px; padding: 16px; } .stage-name-display { font-size: 16px; } .participant-name { font-size: 11px; } .activity-item { font-size: 10px; } } @media (max-width: 768px) { .navigate-ring-container { width: 300px; height: 300px; } .navigate-collab-space { width: 200px; padding: 12px; } .stage-name-display { font-size: 14px; } .collab-participants, .collab-activities { font-size: 10px; } } .stage-icon--commit { background: linear-gradient(160deg, color-mix(in srgb, var(--blurple) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--blurple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--blurple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--deploy { background: linear-gradient(160deg, color-mix(in srgb, var(--lightblue) 28%, transparent) 0%, color-mix(in srgb, var(--purple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--lightblue) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--lightblue) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } .stage-icon--success { background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 28%, transparent) 0%, color-mix(in srgb, var(--blurple) 12%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--purple) 36%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 16%, transparent), 0 3px 16px color-mix(in srgb, var(--purple) 20%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } /* ── Meets You Where You Are Section ── */ /* NOTE: an earlier revision added CSS scroll-snap here to make the section "step" through the mode cards. It was removed because it fought the sticky morphing header: near the pin line the first card's proximity-snap zone straddled the pin threshold, so any small scroll catapulted ~278px between two snap points on opposite sides of the line, flipping the header morph on and off ("spazzing"). Height reservation + pin hysteresis (v6_reveals.js) made the morph itself jitter-proof, but nothing can absorb a snap catapult that large. Plain scrolling it is. If stepping is wanted again, it must use snap points that do NOT overlap the header's pin boundary. */ .meets-section { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0; position: relative; /* `clip` (not `hidden`) still contains the decorative ::before glow but does NOT establish a scroll container, so the sticky .meets-header below pins against the page scroll instead of being trapped. */ overflow: clip; border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } /* In theater mode the pinned stage fills the viewport, so the section's own top/bottom padding just shows as an empty band above the intro's aura (and below the last card). Drop it so the stage abuts the neighbouring sections. */ @media (min-width: 900px) { .meets-section:has(.meets-scrolly.is-theater) { padding-top: 0; padding-bottom: 0; } } .meets-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--blurple) 8%, transparent), transparent 50%), radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--purple) 6%, transparent), transparent 50%); pointer-events: none; } .meets-inner { position: relative; max-width: 960px; margin: 0 auto; padding: 0 1.5rem; } /* ── Section header ── Plain static "START SIMPLE / Scale with confidence." heading. An earlier sticky-morph version was retired: desktop now uses the pinned "theater" (the header is a static stage title there), and on mobile/fallback the morph looked bad — it tucked the card's top behind a floating compact bar. */ .meets-header { text-align: center; margin-bottom: 4rem; } /* The generic .reveal rule (later in source) sets its own `transition` and would otherwise win; re-state the entry transitions here at higher specificity so the header still fades/rises in on scroll. */ .meets-header.reveal { transition: opacity 820ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 960ms var(--ease-reveal) var(--reveal-delay, 0ms), filter 720ms ease var(--reveal-delay, 0ms); } @media (prefers-reduced-motion: reduce) { .meets-header.reveal, .meets-kicker, .meets-title { transition: none; } } .meets-kicker { font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; /* Blue matches the Lightning Mode card accent (--blurple) for visual continuity with the section it kicks off. */ color: var(--blurple); margin-bottom: 1rem; transition: font-size 300ms var(--ease-reveal), letter-spacing 300ms var(--ease-reveal), margin-bottom 300ms var(--ease-reveal); } .meets-title { /* Section tier — fluid clamp shared with .tg-headline / .ai-practice-title so adjacent section titles scale together instead of freezing at 2rem. brand-font (Space Grotesk) matches .tg-headline / .ai-practice-title so this title reads as a peer, not a default-font outlier. */ font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.02em; line-height: 1.15; transition: font-size 300ms var(--ease-reveal); } /* Mode Cards */ .meets-modes { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 4rem; } .meets-mode-card { border-radius: 20px; padding: 2.25rem; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: row; gap: 2.5rem; align-items: flex-start; } .meets-mode-card:hover { transform: translateY(-3px); } /* ── Scroll spotlight ────────────────────────────────────────────────── v6_reveals.js sets .is-focused on the mode card nearest the viewport centre and .is-recede on the other, so attention tracks the card you're reading: the focused card lifts + sharpens, the other dims, desaturates and shrinks slightly. Only transform/opacity/filter/shadow change — no reflow — so it cannot move the cards it measures (no feedback loop). Container-scoped (0,3,0) so THIS is the authoritative transition for the card: it wins over .reveal-card's own transition on the same element and governs the reveal-entry settle, hover, and spotlight alike. */ .meets-stage-beats .meets-mode-card { transition: transform 0.5s var(--ease-spring), box-shadow 0.45s ease, opacity 0.45s ease, filter 0.45s ease; will-change: transform, opacity, filter; } .meets-stage-beats .meets-mode-card.is-focused { transform: translateY(-4px) scale(1.015); z-index: 2; } .meets-stage-beats .meets-mode-card.is-recede { opacity: 0.5; filter: saturate(0.55); transform: scale(0.965); } /* Hovering a receded card reclaims it — deliberate intent beats scroll pos. */ .meets-stage-beats .meets-mode-card.is-recede:hover { opacity: 1; filter: none; transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { /* JS already skips the effect under reduced motion; neutralise regardless. */ .meets-stage-beats .meets-mode-card { transition: none; } .meets-stage-beats .meets-mode-card.is-focused, .meets-stage-beats .meets-mode-card.is-recede { transform: none; opacity: 1; filter: none; } } /* Left pane: icon + name + desc (+ Trust Center link for Enterprise) */ .meets-mode-identity { flex: 0 0 220px; } /* Right pane: detail rows, tags, integrations */ .meets-mode-features { flex: 1; min-width: 0; } .meets-mode--lightning { background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--blurple) 26%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), 0 14px 36px -18px color-mix(in srgb, var(--blurple) 22%, transparent); } .meets-mode--lightning:hover { border-color: color-mix(in srgb, var(--blurple) 38%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 22px 60px -20px color-mix(in srgb, var(--blurple) 34%, transparent); } .meets-mode--lightning.is-focused { border-color: color-mix(in srgb, var(--blurple) 44%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 28px 66px -22px color-mix(in srgb, var(--blurple) 40%, transparent); } .meets-mode--enterprise { background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--purple) 4%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 26%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), 0 14px 36px -18px color-mix(in srgb, var(--purple) 22%, transparent); } .meets-mode--enterprise:hover { border-color: color-mix(in srgb, var(--purple) 38%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 22px 60px -20px color-mix(in srgb, var(--purple) 34%, transparent); } .meets-mode--enterprise.is-focused { border-color: color-mix(in srgb, var(--purple) 44%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 28px 66px -22px color-mix(in srgb, var(--purple) 40%, transparent); } /* Pricing model card — the closer. Blurple→purple accent because the model spans both modes (it isn't a tier of its own). */ .meets-mode--value { background: radial-gradient(ellipse 70% 55% at 20% 0%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 65%), radial-gradient(ellipse 70% 55% at 85% 100%, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 65%), color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 26%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), 0 14px 36px -18px color-mix(in srgb, var(--purple) 22%, transparent); } .meets-mode--value:hover, .meets-mode--value.is-focused { border-color: color-mix(in srgb, var(--purple) 42%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 28px 66px -22px color-mix(in srgb, var(--purple) 38%, transparent); } /* ── Pricing (value) beat — premium treatment. Scoped to .meets-mode--value so the Lightning/Enterprise beats are untouched. The right pane is the pitch: check-marked value props, then a "cost as you grow" mini-chart whose whole job is to SHOW the model — per-seat SaaS climbs, CustomerNode stays flat. ────── */ .meets-value-free { background: linear-gradient(120deg, var(--blurple), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Value props as check-marked lines (higher contrast + premium mark vs the dot list) */ .meets-value-wins { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .meets-value-wins li { position: relative; padding-left: 1.65rem; font-size: 0.8rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); } .meets-value-wins li::before { /* gradient check-chip */ content: ''; position: absolute; left: 0; top: 0.05em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 9%, transparent); } .meets-value-wins li::after { /* the tick */ content: ''; position: absolute; left: 0.38rem; top: 0.28em; width: 0.28rem; height: 0.5rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); } /* Cost-as-you-grow mini-chart — the closer's visual proof */ .meets-value-compare { margin-top: 0.35rem; } .meets-cost-chart { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.15rem; } .meets-cost-row { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 14px; } .meets-cost-row--them { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); } .meets-cost-row--us { background: linear-gradient(115deg, color-mix(in srgb, var(--blurple) 12%, transparent), color-mix(in srgb, var(--purple) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--purple) 32%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent), 0 14px 34px -20px color-mix(in srgb, var(--purple) 45%, transparent); } .meets-cost-name { font-size: 0.72rem; font-weight: 700; letter-spacing: -0.01em; } .meets-cost-row--them .meets-cost-name { color: color-mix(in srgb, var(--inv-bg-color) 46%, transparent); } .meets-cost-row--us .meets-cost-name { color: var(--inv-bg-color); } .meets-cost-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 40px; } .meets-cost-bars span { flex: 0 0 9px; border-radius: 3px 3px 1px 1px; display: block; } .meets-cost-row--them .meets-cost-bars span { background: color-mix(in srgb, var(--inv-bg-color) 24%, transparent); } .meets-cost-row--us .meets-cost-bars span { background: linear-gradient(var(--blurple), var(--purple)); box-shadow: 0 3px 10px -4px color-mix(in srgb, var(--purple) 55%, transparent); } /* them — cost climbs with every seat */ .meets-cost-row--them .meets-cost-bars span:nth-child(1) { height: 24%; } .meets-cost-row--them .meets-cost-bars span:nth-child(2) { height: 38%; } .meets-cost-row--them .meets-cost-bars span:nth-child(3) { height: 54%; } .meets-cost-row--them .meets-cost-bars span:nth-child(4) { height: 70%; } .meets-cost-row--them .meets-cost-bars span:nth-child(5) { height: 86%; } .meets-cost-row--them .meets-cost-bars span:nth-child(6) { height: 100%; } /* us — flat, no matter how many people you add */ .meets-cost-row--us .meets-cost-bars span { height: 46%; } .meets-cost-tag { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .meets-cost-row--them .meets-cost-tag { color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); } .meets-cost-tag--accent { font-weight: 700; background: linear-gradient(120deg, var(--blurple), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .meets-mode-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .meets-mode--lightning .meets-mode-icon { background: color-mix(in srgb, var(--blurple) 14%, transparent); color: var(--blurple); border: 1px solid color-mix(in srgb, var(--blurple) 24%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--blurple) 12%, transparent); } .meets-mode--enterprise .meets-mode-icon { background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); border: 1px solid color-mix(in srgb, var(--purple) 24%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--purple) 12%, transparent); } .meets-mode--value .meets-mode-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 16%, transparent), color-mix(in srgb, var(--purple) 16%, transparent)); color: var(--purple); border: 1px solid color-mix(in srgb, var(--purple) 24%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--purple) 12%, transparent); } .meets-mode-name { font-size: 1.35rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.6rem; letter-spacing: -0.01em; } .meets-mode-desc { font-size: 0.95rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.6; margin-bottom: 1.5rem; /* Left, to sit under the left-aligned kicker + title as one clean identity column (it was inheriting `center`, which floated it off-axis on desktop). */ text-align: left; } .meets-mode-detail { margin-bottom: 1.25rem; } .meets-mode-detail:last-child { margin-bottom: 0; } .meets-mode-label { display: block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); margin-bottom: 0.5rem; } .meets-mode-detail-desc { font-size: 0.75rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.5; margin: 0; } .meets-mode-detail-list { list-style: none; margin: 0; padding: 0; } .meets-mode-detail-list li { position: relative; font-size: 0.75rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.5; padding-left: 1rem; margin-bottom: 0.3rem; } .meets-mode-detail-list li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 4px; height: 4px; border-radius: 50%; background: var(--blurple); opacity: 0.7; } .meets-mode-includes { font-size: 0.85rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.55; margin: 0; } .meets-mode-footer { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; /* 22% read as an accidental artifact under the cards; 35% makes it a legible intentional footnote while staying clearly subordinate to the body copy. */ color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); margin: 0.75rem 0 0; } /* Trust Center link inside Enterprise identity pane */ .meets-trust-link { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--purple); text-decoration: none !important; border: 1px solid color-mix(in srgb, var(--purple) 28%, transparent); padding: 0.4rem 0.85rem; border-radius: 6px; margin-top: 1.25rem; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; letter-spacing: 0.02em; } .meets-trust-link:hover { background: color-mix(in srgb, var(--purple) 10%, transparent); border-color: color-mix(in srgb, var(--purple) 45%, transparent); color: color-mix(in srgb, var(--purple) 70%, var(--inv-bg-color)); text-decoration: none !important; } .meets-trust-link svg { flex-shrink: 0; opacity: 0.65; } /* Compact SOC 2 pill inside Enterprise identity pane — matches Trust Center link weight */ .soc2-pill--card { display: flex; justify-content: center; padding: 0.4rem 0.85rem; gap: 0.5rem; margin-top: 0.65rem; border-radius: 6px; background: transparent; box-shadow: none; border-color: color-mix(in srgb, var(--purple) 28%, transparent); } .soc2-pill--card:hover { border-color: color-mix(in srgb, var(--purple) 45%, transparent); box-shadow: none; background: color-mix(in srgb, var(--purple) 10%, transparent); } .soc2-pill--card .soc2-pill-logo { /* Brand-themed SOC 2 seal: the monochrome soc2_badge.svg is rendered as a mask so it takes the pill's brand purple instead of a full-color raster badge that clashes with the theme. Relative url() resolves from this file (/static/css/public/) up to /static/svg/ and is rewritten correctly if ManifestStaticFilesStorage is ever enabled. */ width: 15px; height: 15px; flex-shrink: 0; display: inline-block; background-color: var(--purple); -webkit-mask: url("../../svg/soc2_badge.c3c3ecc42d9c.svg") center / contain no-repeat; mask: url("../../svg/soc2_badge.c3c3ecc42d9c.svg") center / contain no-repeat; } .soc2-pill--card .soc2-pill-text { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: var(--purple); text-transform: none; } /* Integration tag logos — double-class selector beats .meets-tag's inline-block */ .meets-tag.meets-tag--int { display: inline-flex; align-items: center; gap: 0.35rem; } .meets-int-logo { display: block; width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; } .meets-modes-note { text-align: center; /* Fine print, but legible -- 0.65rem/40% read as an accidental fragment floating below the cards. Bumped so it reads as an intentional footnote tied to the CTA beneath it. */ font-size: 0.7rem; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); /* No extra top margin -- .meets-modes already contributes its 4rem gap; stacking 1.75rem on top left the note + CTA orphaned in a void. */ margin: 0 auto; max-width: 30rem; line-height: 1.5; letter-spacing: 0.01em; } .meets-cta-wrap { text-align: center; margin-top: 1.5rem; } /* "View Pricing" closes the Scale-with-confidence section, so it must speak the same design language as everything above it -- the 20px-rounded glass mode cards and pill chips. The old 6px sharp outline read as a bare default button pasted in. This mirrors the site-wide .hero-glass-btn component: glass chassis, blurple->purple top hairline, soft lift on hover. */ .meets-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; color: var(--inv-bg-color) !important; text-decoration: none !important; padding: 0.8rem 2.4rem; border-radius: 14px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 4%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent); transition: border-color 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .meets-cta::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurpleblue) 60%, transparent), color-mix(in srgb, var(--purple) 40%, transparent)); opacity: 0.6; transition: opacity 0.4s ease; } .meets-cta:hover { border-color: color-mix(in srgb, var(--purple) 24%, transparent); box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 12%, transparent), 0 12px 48px color-mix(in srgb, var(--purple) 6%, transparent), inset 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transform: translateY(-3px); } .meets-cta:hover::before { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════ "MODES THEATER" — pinned scroll-scrub for #meets. v6_reveals.js (meets theater block) adds .is-theater to .meets-scrolly ONLY on wide screens with motion allowed, then advances .meets-beat items as you scroll the tall track. Everything cinematic is gated on BOTH `.meets-scrolly.is-theater` AND `@media (min-width:900px)`, so no-JS, reduced-motion, and narrow viewports all fall through to the normal-flow fallback below (beats stacked, all visible — the classic layout). ═══════════════════════════════════════════════════════════════════════════ */ /* ---- Fallback (default): beats in normal flow, all visible ---- */ .meets-beat { position: relative; } .meets-beat + .meets-beat { margin-top: 1.5rem; } .meets-progress { display: none; } /* progress rail — theater only */ /* Mode "usability tier" eyebrow — reframes Lightning/Enterprise as toggles you move between, not capability/price tiers. */ .meets-mode-kind { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); margin-bottom: 0.5rem; } /* progress-dot look (shared; container hidden unless theater) */ .meets-progress-dot { width: 12px; padding: 4px 1px; border: 0; background: none; cursor: pointer; display: block; -webkit-appearance: none; appearance: none; } .meets-progress-dot > span { display: block; width: 9px; height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 20%, transparent); transition: background 0.3s ease, height 0.4s var(--ease-spring); } .meets-progress-dot:hover > span { background: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); } .meets-progress-dot.is-active > span { height: 26px; background: linear-gradient(var(--blurple), var(--purple)); } .meets-scroll-cue { display: none; } /* intro scroll hint — theater only */ /* Intro hero motion (theater only; never runs under reduced motion since .is-theater isn't added there). */ @keyframes meets-aura-drift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d(3%, 3%, 0) scale(1.09); } 100% { transform: translate3d(4%, -2%, 0) scale(1.03); } } @keyframes meets-cue-bounce { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(6px); opacity: 1; } } /* ---- Theater (wide viewport + JS + motion allowed) ---- */ @media (min-width: 900px) { .meets-scrolly.is-theater { --beat-scroll: 74vh; /* scroll distance each beat holds the stage */ height: calc(100vh + var(--beats, 3) * var(--beat-scroll)); position: relative; } /* Intro hero backdrop: a soft blurple/purple aurora that slowly drifts behind the title, giving the opening slide depth. Sits at z-index -1 in the stage's (sticky) stacking context — behind the title/beats, above the section bg — and is clipped by the stage's overflow. Fades out on dock. */ .meets-scrolly.is-theater .meets-stage::before { content: ""; position: absolute; inset: -15%; z-index: -1; pointer-events: none; opacity: var(--intro-vis, 0); /* scrubbed by v6_reveals.js */ background: radial-gradient(38% 40% at 32% 34%, color-mix(in srgb, var(--blurple) 26%, transparent), transparent 70%), radial-gradient(42% 44% at 70% 62%, color-mix(in srgb, var(--purple) 24%, transparent), transparent 72%), radial-gradient(30% 32% at 58% 30%, color-mix(in srgb, var(--blurpleblue, var(--blurple)) 20%, transparent), transparent 70%); filter: blur(34px); animation: meets-aura-drift 16s ease-in-out infinite alternate; } /* Scroll cue — invites the first advance; fades with the intro (--intro-vis). */ .meets-scrolly.is-theater .meets-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: var(--intro-vis, 0); pointer-events: none; z-index: 4; } .meets-scrolly.is-theater .meets-scroll-cue svg { animation: meets-cue-bounce 1.6s ease-in-out infinite; } .meets-scrolly.is-theater .meets-stage { position: sticky; top: 0; height: 100vh; /* clear the 60px fixed .site-header at the top so the title never tucks under it; box-sizing keeps the stage a true viewport tall. */ padding: 88px 0 40px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; overflow: hidden; } /* header is the stage title — drop the section's bottom margin so it sits inside the flex-centred stage. transform-origin at top-centre so the intro "dock" scales toward the header's resting spot. No transition: v6_reveals.js scrubs the transform off scroll, so any easing here would lag behind. */ .meets-scrolly.is-theater .meets-header { margin: 0; flex: 0 0 auto; transform-origin: 50% 0; transition: none; } .meets-scrolly.is-theater .meets-stage-beats { position: relative; flex: 1 1 auto; align-self: stretch; width: 100%; max-width: 960px; margin: 0 auto; /* 3D depth for the beat advance — lets rotateX/translateZ read as cards tilting through space rather than a flat slide. */ perspective: 1500px; perspective-origin: 50% 45%; } /* Advance choreography: each beat cross-fades and rises/falls through 3D depth around its centre. v6_reveals.js writes opacity/transform/filter inline every frame off the scroll position — so NO transition here (the scroll is the timeline; a transition would lag). The values below are the pre-JS default (first frame overwrites them). */ .meets-scrolly.is-theater .meets-beat { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform-origin: 50% 50%; transform: translateY(72px) translateZ(-160px) rotateX(-11deg) scale(0.965); filter: blur(9px); pointer-events: none; will-change: opacity, transform, filter; } /* Uniform container: every beat's card is the SAME size so the three read as one cohesive frame the content morphs within (not three different boxes). Fixed height (fits the tallest card), capped to the viewport on short screens. Panes stretch full-height and the footer anchors to the bottom so shorter cards use the space intentionally rather than leaving it dead. */ .meets-scrolly.is-theater .meets-beat--mode > .meets-mode-card { width: 100%; /* tall enough for the densest card (Enterprise) so nothing scrolls internally; the viewport cap only bites on very short screens. */ height: min(540px, calc(100vh - 220px)); align-items: stretch; overflow: auto; } .meets-scrolly.is-theater .meets-beat--mode .meets-mode-features { display: flex; flex-direction: column; } .meets-scrolly.is-theater .meets-beat--mode .meets-mode-footer { margin-top: auto; padding-top: 1rem; } /* vertical progress rail on the right — fades in as the intro leaves. */ .meets-scrolly.is-theater .meets-progress { display: flex; flex-direction: column; gap: 0.55rem; align-items: center; position: absolute; right: max(1.5rem, calc((100% - 1120px) / 2)); top: 50%; transform: translateY(-50%); z-index: 5; opacity: calc(1 - var(--intro-vis, 0)); } } /* Sticky pricing footer -- the bottom-of-section mirror of the sticky .meets-header at the top. The note + "View Pricing" CTA pin to the bottom of the viewport while #meets is in view, so the Lightning/Enterprise mode cards scroll up and dissolve BEHIND it (bottom-anchored gradient backdrop), the same way the cards rise up beneath the pinned header. Pure CSS: the footer is already compact, so unlike the morphing header it needs no JS. overflow:clip on .meets-section (not hidden) is what lets this pin against page scroll. */ .meets-footer { /* NOT sticky. A sticky bottom:0 here pinned the pricing note + "View Pricing" button to the viewport bottom while the section scrolled in, floating them over the mode cards (user: "sticky bottom ... looks like shit"). The note + CTA belong in normal flow at the section's end. */ padding: 2rem 0 1.5rem; } /* ---- CRM Bridge Card ---- */ /* ── CRM Bridge — Premium Integration Diagram ── */ .meets-crm-bridge { margin-top: 2.5rem; border-radius: 20px; padding: 2.75rem 2.25rem 2.25rem; background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--blurple) 5%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); box-shadow: 0 0 50px 10px color-mix(in srgb, var(--blurple) 2%, transparent), 0 12px 40px -8px color-mix(in srgb, var(--blurple) 4%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 5%, transparent); position: relative; overflow: hidden; } /* Ambient atmosphere behind the bridge */ .meets-crm-bridge::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 60% at 50% 50%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 70%); pointer-events: none; animation: meetsBridgeAtmosphere 8s ease-in-out infinite; } @keyframes meetsBridgeAtmosphere { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .meets-bridge-inner { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr; align-items: start; gap: 0; max-width: 54rem; margin: 0 auto; position: relative; z-index: 1; } /* ── Nodes ── */ .meets-bridge-node { text-align: center; padding: 1.25rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: border-color 0.4s ease, box-shadow 0.4s ease; } .meets-bridge-node:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--blurple) 4%, transparent); } .meets-bridge-node--center { position: relative; background: radial-gradient(ellipse 80% 60% at 50% 20%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border-color: color-mix(in srgb, var(--blurple) 15%, transparent); box-shadow: 0 0 40px 8px color-mix(in srgb, var(--blurple) 4%, transparent), 0 8px 30px -6px color-mix(in srgb, var(--blurple) 6%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent); } /* ── Icons ── */ .meets-bridge-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.85rem; position: relative; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .meets-bridge-node:hover .meets-bridge-icon { transform: scale(1.08); } .meets-bridge-icon--crm { background: color-mix(in srgb, #3b82f6 12%, transparent); color: #60a5fa; border: 0.5px solid color-mix(in srgb, #3b82f6 15%, transparent); } .meets-bridge-icon--cn { background: color-mix(in srgb, var(--blurple) 15%, transparent); color: #a5b4fc; border: 0.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--blurple) 15%, transparent), 0 0 60px color-mix(in srgb, var(--blurple) 6%, transparent); } /* Spinning arc ring around the CN icon */ .meets-bridge-icon--cn::after { content: ''; position: absolute; inset: -5px; border-radius: 18px; background: conic-gradient( from 0deg, transparent 0deg, transparent 290deg, color-mix(in srgb, var(--blurple) 10%, transparent) 330deg, color-mix(in srgb, var(--blurple) 30%, transparent) 355deg, transparent 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); animation: aiNodeArcSpin 6s linear infinite; pointer-events: none; } .meets-bridge-icon--buyers { background: color-mix(in srgb, #10b981 12%, transparent); color: #6ee7b7; border: 0.5px solid color-mix(in srgb, #10b981 15%, transparent); } /* ── Node text ── */ .meets-bridge-node-title { font-size: 0.9rem; font-weight: 800; margin-bottom: 0.6rem; letter-spacing: -0.01em; color: var(--inv-bg-color); } .meets-bridge-node--center .meets-bridge-node-title { background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .meets-bridge-node-list { list-style: none; padding: 0; margin: 0; font-size: 0.74rem; font-weight: 450; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); line-height: 1.85; letter-spacing: 0.01em; } .meets-bridge-node-list li { display: flex; align-items: center; justify-content: center; gap: 0.35rem; } .meets-bridge-node-list li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); flex-shrink: 0; } .meets-bridge-node--center .meets-bridge-node-list li::before { background: color-mix(in srgb, var(--blurple) 40%, transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 20%, transparent); } .meets-bridge-node--center .meets-bridge-node-list { color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); font-weight: 500; } /* ── Arrows ── */ .meets-bridge-arrow { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 6rem; padding: 0 0.4rem; position: relative; align-self: center; } .meets-bridge-arrow-svg { width: 100%; height: 22px; color: color-mix(in srgb, var(--blurple) 35%, transparent); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blurple) 10%, transparent)); overflow: visible; } /* Animated pulse traveling along the arrow lines */ .meets-bridge-arrow-svg line { stroke-dashoffset: 0; animation: meetsBridgeFlow 3s linear infinite; } @keyframes meetsBridgeFlow { from { stroke-dashoffset: 14; } to { stroke-dashoffset: 0; } } .meets-bridge-arrow-label { font-size: 0.62rem; font-weight: 600; color: color-mix(in srgb, var(--blurple) 70%, transparent); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; text-align: center; line-height: 1.3; } .meets-bridge-arrow-label--above { order: -1; margin-bottom: 0.25rem; } .meets-bridge-arrow-label--below { margin-top: 0.25rem; } /* ── Tagline ── */ .meets-bridge-tagline { text-align: center; font-size: 0.82rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); margin-top: 2rem; letter-spacing: 0.01em; line-height: 1.6; position: relative; z-index: 1; padding-top: 1.25rem; border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .meets-mode-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .meets-tag { display: inline-block; /* Cleaner chip: a soft fill with a barely-there hairline instead of the old 6%-fill + 12%-border double-treatment that made every chip read as a heavy box. Rounder corners (8px) so the plain chips and the pill-shaped platform tag share one radius. */ padding: 0.28rem 0.72rem; border-radius: 8px; font-size: 0.75rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); } .meets-tag--more { color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); background: transparent; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); letter-spacing: 0.1em; } .meets-tag--int { cursor: pointer; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .meets-tag--int:hover { background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 85%, transparent); } .meets-tag--int.is-active { background: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); color: var(--inv-bg-color); box-shadow: 0 0 12px rgba(0, 0, 0, 0.06); } .meets-int-desc { margin-top: 0.85rem; padding: 0.7rem 1rem; overflow: hidden; font-size: 0.78rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); line-height: 1.55; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-left: 2px solid color-mix(in srgb, var(--purple) 50%, transparent); border-radius: 0 6px 6px 0; transition: opacity 0.3s ease; } .meets-int-desc span { color: var(--purple); font-weight: 700; letter-spacing: 0.01em; } .meets-tag--platform { display: inline-flex; align-items: center; gap: 5px; margin-top: 0.5rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; color: var(--blurple); background: color-mix(in srgb, var(--blurple) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blurple) 20%, transparent); padding: 0.28rem 0.72rem; /* Match the plain chips' radius so the tag row reads as one consistent set. */ border-radius: 8px; } .meets-tag--platform svg { opacity: 0.5; } /* Integrations Grid */ .meets-integrations { max-width: 540px; margin: 0 auto 2.5rem; display: flex; flex-direction: column; gap: 0; opacity: 0.6; } .meets-int-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.03); } .meets-int-row:last-of-type { border-bottom: none; } .meets-int-cat { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #475569; min-width: 110px; flex-shrink: 0; } .meets-int-name { font-size: 0.75rem; color: #94a3b8; font-weight: 500; } .meets-int-sep { color: #334155; font-size: 0.6rem; } .meets-int-more { text-align: center; font-size: 0.55rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #334155; padding-top: 1.25rem; } /* Footer */ .meets-footer { text-align: center; font-size: 0.95rem; color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.65; } /* Responsive */ @media (max-width: 768px) { .meets-section { padding: 4rem 0; } .meets-header { margin-bottom: 2.5rem; } .meets-modes { gap: 1rem; margin-bottom: 2.5rem; } .meets-footer { padding: 1.5rem 0 1.25rem; } .meets-mode-card { padding: 1.5rem; flex-direction: column; gap: 1.5rem; } .meets-mode-identity { flex: none; } .meets-crm-bridge { padding: 1.75rem 1.25rem; } .meets-bridge-inner { grid-template-columns: 1fr; gap: 0.75rem; } .meets-bridge-node { padding: 1rem 0.85rem; } .meets-bridge-arrow { min-width: unset; padding: 0.25rem 0; } .meets-bridge-arrow-svg { width: 20px; height: 36px; transform: rotate(90deg); } .meets-bridge-arrow-label { font-size: 0.58rem; } .meets-mode-desc { text-align: left; } .meets-int-cat { min-width: 100px; font-size: 0.6rem; } .meets-int-row { flex-wrap: wrap; gap: 0.35rem; } } /* ── ROI Section — Light Theme ── */ /* ============================================================ DEFENSIBILITY — featured article card. One clickable card between Scale-with-confidence (#meets) and The Multiplier (#roi). Links the patent-portfolio announcement. Theme-aware; matches the site's card language. ============================================================ */ .defend-section { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 6rem 0; position: relative; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .defend-section::before { content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 760px; max-width: 120%; height: 480px; background: radial-gradient(ellipse, color-mix(in srgb, var(--purple) 7%, transparent) 0%, transparent 70%); pointer-events: none; } .defend-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .defend-eyebrow { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: #818cf8; margin-bottom: 1.5rem; } /* ── Portfolio stat row (7 layers · 19 applications · 535 claims) ── */ .defend-stats { display: flex; align-items: center; justify-content: center; gap: 1.75rem; margin: 0 auto 2.25rem; } .defend-stat { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; } .defend-stat-num { font-size: 2.1rem; font-weight: 800; color: var(--purple); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .defend-stat-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.45; } .defend-stat-divider { width: 1px; height: 40px; background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); flex-shrink: 0; } /* ── Article card ── */ .article-card { display: flex; text-align: left; text-decoration: none !important; border-radius: 20px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); background: color-mix(in srgb, var(--purple) 2%, var(--main-bg-color)); box-shadow: 0 4px 24px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .article-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--purple) 28%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--purple) 12%, transparent); } .article-card-media { flex: 0 0 44%; position: relative; overflow: hidden; background: linear-gradient(135deg, #eef0f6, #e3e6f3); } .article-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .article-card:hover .article-card-media img { transform: scale(1.04); } .article-card-body { flex: 1; min-width: 0; padding: 1.75rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; } .article-card-meta { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.5; } .article-card-meta svg { width: 14px; height: 14px; color: #0a66c2; opacity: 0.9; flex: none; } .article-card-title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--inv-bg-color); margin: 0; } .article-card-teaser { font-size: 0.92rem; line-height: 1.5; color: var(--inv-bg-color); opacity: 0.6; margin: 0; } .article-card-readmore { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 600; color: #818cf8; } .article-card-readmore svg { transition: transform 0.25s ease; } .article-card:hover .article-card-readmore svg { transform: translateX(3px); } /* Labeled transition between the patent card and the Insights card — a centered small-caps label flanked by hairlines, so the Insights card reads as a deliberate "more from us" stream rather than another patent artifact. */ .defend-bridge { display: flex; align-items: center; gap: 1rem; max-width: 440px; margin: 2.5rem auto 0; } .defend-bridge::before, .defend-bridge::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-bg-color) 16%, transparent)); } .defend-bridge::after { background: linear-gradient(90deg, color-mix(in srgb, var(--inv-bg-color) 16%, transparent), transparent); } .defend-bridge-label { flex: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); white-space: nowrap; } /* ── Second card → Insights hub (abstract "fanned deck" SVG, same style as the patent card, sits below the article card) ── */ .article-card--hub { margin-top: 1.5rem; } /* ── "More from CustomerNode" — a deliberate SWITCH-UP in motion. Everything else on the page reveals by rising straight up (.reveal = translateY). This block changes register so it reads as a new "stream," not a continuation of the singular patent artifact above: the divider DRAWS OUTWARD from its label (a chapter break), then the Insights card is DEALT in — a fresh card off the fanned deck: it swings up from the side and springs flat into place. ── */ /* Divider label: quiet fade, no vertical rise (override the base .reveal). */ .defend-bridge.reveal { opacity: 0; transform: none; filter: none; transition: opacity 520ms var(--ease-reveal, ease) var(--reveal-delay, 0ms); will-change: opacity; } .defend-bridge.reveal.is-visible { opacity: 1; } /* Divider lines draw outward from the label toward each edge. */ .defend-bridge::before, .defend-bridge::after { transform: scaleX(0); transition: transform 760ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) var(--reveal-delay, 0ms); } .defend-bridge::before { transform-origin: right center; } .defend-bridge::after { transform-origin: left center; } .defend-bridge.reveal.is-visible::before, .defend-bridge.reveal.is-visible::after { transform: scaleX(1); } /* Insights card: dealt in — swings up from the lower-left corner and springs flat (not the straight vertical rise). The rotate + corner origin is the "card off the deck" gesture; the small offsets keep it clear of overflow. */ .article-card--hub.reveal { opacity: 0; transform: translateX(-24px) translateY(22px) rotate(-3deg) scale(0.965); transform-origin: 0% 100%; filter: blur(4px); transition: opacity 720ms var(--ease-reveal, ease) var(--reveal-delay, 0ms), transform 940ms var(--ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) var(--reveal-delay, 0ms), filter 620ms ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .article-card--hub.reveal.is-visible { opacity: 1; transform: translateX(0) translateY(0) rotate(0) scale(1); filter: blur(0); } @media (prefers-reduced-motion: reduce) { .defend-bridge.reveal, .article-card--hub.reveal { opacity: 1; transform: none; filter: none; transition: none; } .defend-bridge::before, .defend-bridge::after { transform: scaleX(1); transition: none; } } /* The featured (patent) card's meta icon is a document glyph — indigo, not the LinkedIn-blue default. The hub card carries the LinkedIn eyebrow, so it keeps the default LinkedIn-blue icon. */ .article-card--featured .article-card-meta svg { color: #6366f1; } @media (max-width: 640px) { .defend-section { padding: 4.5rem 0; } .defend-stats { gap: 1.1rem; margin-bottom: 1.75rem; } .defend-stat-num { font-size: 1.7rem; } .defend-stat-divider { height: 34px; } .article-card { flex-direction: column; } .article-card-media { flex: none; width: 100%; aspect-ratio: 1200 / 628; } .article-card-body { padding: 1.5rem 1.5rem 1.75rem; } .article-card-title { font-size: 1.3rem; } } .roi-section { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0 5rem; position: relative; overflow: hidden; } .roi-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 800px; height: 500px; background: radial-gradient(ellipse, color-mix(in srgb, var(--purple) 6%, transparent) 0%, transparent 70%); pointer-events: none; } .roi-inner { position: relative; max-width: 960px; margin: 0 auto; padding: 0 1.5rem; } .roi-header { text-align: center; margin-bottom: 3.5rem; } .roi-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; } .roi-title { font-size: 2.25rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1rem; } .roi-subtitle { font-size: 1.05rem; color: var(--inv-bg-color); opacity: 0.55; max-width: 720px; margin: 0 auto; line-height: 1.6; } /* Multiplier Cards */ .roi-multiplier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 3.5rem; } .roi-multiplier-card { display: flex; gap: 1rem; padding: 1.5rem; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); background: color-mix(in srgb, var(--purple) 2%, var(--main-bg-color)); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .roi-multiplier-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--purple) 20%, transparent); box-shadow: 0 12px 40px color-mix(in srgb, var(--purple) 8%, transparent); } .roi-card-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--purple) 10%, var(--main-bg-color)); color: var(--purple); } .roi-card-body { flex: 1; min-width: 0; } .roi-card-title { font-size: 0.95rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.35rem; } .roi-card-desc { font-size: 0.8rem; color: var(--inv-bg-color); opacity: 0.5; line-height: 1.6; margin: 0; } .roi-card-source { display: block; font-size: 0.6rem; color: var(--inv-bg-color); opacity: 0.25; font-style: italic; margin-top: 0.5rem; } /* Stats Bar */ .roi-stats-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; padding: 2.25rem 2.5rem 2.75rem; border-radius: 20px; background: color-mix(in srgb, var(--purple) 3%, var(--main-bg-color)); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-bottom: 3.5rem; position: relative; } .roi-source-note { position: absolute; bottom: 0.6rem; right: 1rem; font-size: 0.5rem; color: var(--inv-bg-color); opacity: 0.2; letter-spacing: 0.02em; } .roi-stat { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .roi-stat-source { font-size: 0.5rem; color: var(--inv-bg-color); opacity: 0.2; font-style: italic; margin-top: 0.15rem; } .roi-stat-value { font-size: 2.325rem; font-weight: 800; color: var(--purple); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; } .roi-stat-unit { font-size: 1.4rem; font-weight: 700; color: var(--purple); opacity: 0.8; } .roi-stat-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.45; } .roi-stat-divider { width: 1px; height: 48px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); flex-shrink: 0; } /* Testimonial Carousel */ .roi-testimonials { text-align: center; margin-bottom: 1rem; } .roi-testimonial-track { position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; } .roi-quote { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; margin: 0; padding: 0; border: none; } .roi-quote.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; } .roi-quote p { font-size: 1.05rem; font-weight: 400; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.7; max-width: 600px; margin: 0 0 0.75rem; font-style: italic; } .roi-quote cite { font-size: 0.7rem; font-weight: 600; font-style: normal; color: var(--purple); letter-spacing: 0.08em; text-transform: uppercase; } .roi-quote-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; } .roi-dot { all: unset; width: 5px; height: 5px; border-radius: 50%; background: var(--inv-bg-color); opacity: 0.15; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; } .roi-dot:hover { opacity: 0.35; } .roi-dot.is-active { opacity: 0.6; transform: scale(1.3); background: var(--purple); } .roi-privacy-note { font-size: 0.65rem; color: var(--inv-bg-color); opacity: 0.25; margin-top: 1rem; letter-spacing: 0.03em; } /* ── Final CTA — premium close ── Closing focal point of the page. Uses the same brand vocabulary the hero and Navigate beats use: light paper base, twin blurple/purple aurora glow, a hairline gradient divider, Space Grotesk display type with a gradient accent line, and a filled gradient CTA with a layered glow + light sweep. NOTE: the --v6-* tokens (grad-cn / ease / spring) are scoped to the mockup panels only, so the brand gradient + easing are inlined here verbatim. */ .final-cta-section { background: radial-gradient(120% 90% at 50% 100%, color-mix(in srgb, var(--purple) 7%, transparent) 0%, transparent 58%), linear-gradient(180deg, var(--main-bg-color) 0%, color-mix(in srgb, var(--purple) 3%, var(--main-bg-color)) 55%, var(--main-bg-color) 100%); padding: 7.5rem 0 8.5rem; position: relative; overflow: hidden; } /* Twin aurora glow — blurple + purple lobes drifting behind the copy. */ .final-cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 820px; height: 520px; max-width: 110%; background: radial-gradient(ellipse 58% 68% at 36% 42%, color-mix(in srgb, var(--blurple) 11%, transparent) 0%, transparent 70%), radial-gradient(ellipse 58% 68% at 66% 58%, color-mix(in srgb, var(--purple) 12%, transparent) 0%, transparent 70%); filter: blur(10px); pointer-events: none; } /* Hairline gradient divider centered on the top edge — quietly separates the close from the ROI/proof section above it. */ .final-cta-section::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(640px, 78%); height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurpleblue) 38%, transparent) 35%, color-mix(in srgb, var(--purple) 38%, transparent) 65%, transparent); opacity: 0.65; pointer-events: none; } .final-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .final-cta-title { font-family: var(--brand-font); font-size: 3rem; font-weight: 800; color: var(--inv-bg-color); letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 1.4rem; } /* Second line ("Own your future.") — brand gradient for lift + emphasis. */ .final-cta-accent { background: linear-gradient(120deg, var(--blurple) 0%, var(--purple) 52%, var(--blurpleblue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .final-cta-subtitle { font-size: 1.12rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.65; max-width: 500px; margin: 0 auto 2.75rem; } /* ── Final CTA — the CTA *is* the core of the abstract piece ── No button chrome. The call to action is glowing gradient text at the heart of the living stage-ring, and the whole medallion (.cta-stage, an ) is the click target — so it reads as part of the composition, not a button dropped into it. Canvas + external JS (cta_nucleus.js) is CSP-safe; the canvas is transparent so the section aurora shows through. Reduced-motion → static medallion (handled in JS). */ .cta-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 460px; height: 440px; margin: 0.5rem auto 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* kill the global `a:not(.button)` underline (specificity 0,1,1) — match it with a.cta-stage and win on cascade order. Separate rule so it never competes with the responsive .cta-stage sizing overrides. */ a.cta-stage, a.cta-stage:hover, a.cta-stage:focus { text-decoration: none; -webkit-text-decoration: none; } .cta-nucleus { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; /* decorative; the whole medallion is the link */ } /* the luminous label at the core — gradient text in the ring's own light */ .cta-core { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.55rem; } .cta-core-text { font-family: var(--brand-font); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.015em; background: linear-gradient(100deg, var(--blurpleblue) 0%, #ffffff 50%, var(--purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--blurple) 55%, transparent)); transition: filter 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .cta-core-arrow { color: var(--blurpleblue); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blurpleblue) 60%, transparent)); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .cta-stage:hover .cta-core-text, .cta-stage:focus-visible .cta-core-text { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--blurpleblue) 90%, transparent)); } .cta-stage:hover .cta-core-arrow, .cta-stage:focus-visible .cta-core-arrow { transform: translateX(5px); } .cta-stage:focus-visible .cta-core { outline: 2px solid color-mix(in srgb, var(--blurpleblue) 85%, #ffffff); outline-offset: 12px; border-radius: 999px; } @media (prefers-reduced-motion: reduce) { .cta-core-text, .cta-core-arrow { transition: none; } } /* ── Final CTA — "dimmed finale" dark variant ── Bookends the page against the forced-dark AI-in-practice band: the lights go down for the close, the twin aurora intensifies, and the gradient CTA becomes the single lit focal point. Activated by .is-finale on the section (swaps the local theme tokens so all child copy/rail inherit correctly). */ .final-cta-section.is-finale { --main-bg-color: #06060e; --inv-bg-color: #f1f5f9; color: #f1f5f9; background: radial-gradient(80% 65% at 50% 52%, color-mix(in srgb, var(--purple) 15%, transparent) 0%, transparent 60%), #06060e; padding: 9rem 0; } .final-cta-section.is-finale::before { width: 900px; height: 580px; background: radial-gradient(ellipse 55% 65% at 34% 42%, color-mix(in srgb, var(--blurple) 26%, transparent) 0%, transparent 70%), radial-gradient(ellipse 55% 65% at 66% 58%, color-mix(in srgb, var(--purple) 30%, transparent) 0%, transparent 70%); filter: blur(22px); } .final-cta-section.is-finale::after { opacity: 0.55; } .final-cta-section.is-finale .final-cta-subtitle { opacity: 0.62; } /* ── ROI + CTA Responsive ── */ @media (max-width: 768px) { .roi-section { padding: 4rem 0 3rem; } .roi-inner { padding: 0 0.8rem; } .roi-header { margin-bottom: 2.5rem; } .roi-title { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; } .roi-multiplier-grid { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 2.5rem; } .roi-stats-bar { flex-direction: column; gap: 1.5rem; padding: 1.5rem; } .roi-stat-divider { width: 48px; height: 1px; } .roi-stat-value { font-size: 1.875rem; } .roi-card-desc { text-align: left; } .roi-quote p { font-size: 0.95rem; } .final-cta-section { padding: 5rem 0 5.5rem; } .final-cta-title { font-size: 2.1rem; letter-spacing: -0.025em; line-height: 1.12; } .final-cta-subtitle { font-size: 1.02rem; margin-bottom: 2.25rem; } .final-cta-section.is-finale { padding: 6rem 0; } .cta-stage { max-width: 420px; height: 410px; } .cta-core-text { font-size: 1.1rem; } } @media (max-width: 480px) { .cta-stage { max-width: 330px; height: 330px; } .cta-core-text { font-size: 1rem; } .roi-multiplier-card { padding: 1.25rem; } .roi-card-icon { width: 36px; height: 36px; min-width: 36px; } } /* ── Journey V2 — Start Your Journey ── */ .journey-v2 { background: #000000; color: #f1f5f9; padding: 7rem 0 6rem; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; } .journey-v2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%), radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%); pointer-events: none; } .journey-v2-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 0 1.5rem; width: 100%; } .journey-v2-header { text-align: center; margin-bottom: 3.5rem; } .journey-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: #818cf8; margin-bottom: 1rem; } .journey-v2-title { font-size: 2.25rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .journey-v2-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .journey-v2-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 2rem; border-radius: 16px; background: rgba(255, 255, 255, 0.03); text-decoration: none !important; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .journey-v2-card:hover { transform: translateY(-3px); } .journey-v2-card--customer { border: 1px solid rgba(148, 163, 184, 0.15); } .journey-v2-card--customer:hover { border-color: rgba(99, 102, 241, 0.3); box-shadow: 0 16px 48px rgba(99, 102, 241, 0.08); } .journey-v2-card--seller { border: 1px solid rgba(139, 92, 246, 0.25); } .journey-v2-card--seller:hover { box-shadow: 0 16px 48px rgba(139, 92, 246, 0.1); } .journey-v2-card-icon { color: #818cf8; margin-bottom: 1.25rem; opacity: 0.7; } .journey-v2-card-title { font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin: 0 0 0.75rem; } .journey-v2-card-desc { font-size: 0.9rem; color: #94a3b8; line-height: 1.6; margin: 0 0 1.75rem; max-width: 280px; } .journey-v2-cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; transition: all 0.25s ease; margin-top: auto; } .journey-v2-cta--customer { background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.1); } .journey-v2-card:hover .journey-v2-cta--customer { background: rgba(255, 255, 255, 0.1); color: #fff; } .journey-v2-cta--seller { background: linear-gradient(135deg, rgba(79, 70, 229, 0.85), rgba(99, 102, 241, 0.85)); color: #ffffff; border: 1px solid transparent; } .journey-v2-card:hover .journey-v2-cta--seller { background: linear-gradient(135deg, rgba(67, 56, 202, 0.95), rgba(79, 70, 229, 0.95)); box-shadow: 0 6px 24px rgba(99, 102, 241, 0.25); } .journey-v2-cta svg { transition: transform 0.3s ease; } .journey-v2-card:hover .journey-v2-cta svg { transform: translateX(3px); } @media (max-width: 768px) { .journey-v2 { padding: 4rem 0 3rem; min-height: auto; } .journey-v2-header { margin-bottom: 2.5rem; } .journey-v2-title { font-size: 1.75rem; letter-spacing: -0.02em; line-height: 1.15; } .journey-v2-cards { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } } /* ── Pricing V2 — Premium editorial, theme-aware ── Reskinned from the legacy forced-black design so /pricing/ is coherent with the rest of the marketing site (esp. the /insights/ hub): a soft indigo aurora, frosted-glass cards, a gradient masthead, and the shared brand token system (style-variables.css) so it themes light/dark automatically like /faq. These base classes are reused by /version and the index "meets" pricing preview, both of which layer their own scoped overrides on top — so keep the class contract and colour everything through tokens, never hardcoded hex. */ .pricing-v2, .pricing { background: var(--main-bg-color) !important; color: var(--inv-bg-color); padding: 6rem 0; position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* Soft indigo aurora behind the header — depth without clutter, mirroring the insights masthead glow. Built from the shared indigo tokens so it stays on-brand (and subtle) in both light and dark themes. */ .pricing-v2::before, .pricing::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 46% 40% at 50% -2%, color-mix(in srgb, var(--indigo) 18%, transparent) 0%, transparent 66%), radial-gradient(ellipse 36% 32% at 20% 6%, color-mix(in srgb, var(--purple) 14%, transparent) 0%, transparent 70%), radial-gradient(ellipse 36% 32% at 82% 10%, color-mix(in srgb, var(--blurple) 12%, transparent) 0%, transparent 72%); pointer-events: none; } .pricing-v2-inner { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.5rem; } /* Header */ .pricing-v2-header { text-align: center; margin-bottom: 2.75rem; } .pricing-v2-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; background: var(--kicker-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin-bottom: 0.9rem; } .pricing-v2-title { font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 1rem; color: var(--inv-bg-color); } .pricing-v2-subtitle { font-size: 1.05rem; color: var(--inv-bg-color); opacity: 0.62; line-height: 1.6; max-width: 46ch; margin: 0 auto; } /* Cards Grid */ .pricing-v2-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 0; } .pricing-v2-card { position: relative; border-radius: 22px; padding: 2rem 1.9rem; display: flex; flex-direction: column; background: linear-gradient(135deg, color-mix(in srgb, var(--main-bg-color) 82%, transparent), color-mix(in srgb, var(--main-bg-color) 60%, transparent)); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); box-shadow: 0 14px 40px -20px color-mix(in srgb, var(--indigo) 35%, transparent), inset 0 1px 0 color-mix(in srgb, var(--main-bg-color) 92%, transparent); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .pricing-v2-card:hover { transform: translateY(-6px); } .pricing-v2-card--guest { border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); } .pricing-v2-card--guest:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 24%, transparent); box-shadow: 0 28px 60px -26px color-mix(in srgb, var(--inv-bg-color) 34%, transparent), inset 0 1px 0 color-mix(in srgb, var(--main-bg-color) 95%, transparent); } /* Pro is the recommended tier — an indigo-washed glass + stronger presence reads as "featured" without a loud badge. */ .pricing-v2-card--pro { border-color: color-mix(in srgb, var(--indigo) 42%, transparent); background: radial-gradient(ellipse 120% 72% at 50% 0%, color-mix(in srgb, var(--indigo) 11%, transparent), transparent 68%), linear-gradient(135deg, color-mix(in srgb, var(--main-bg-color) 84%, transparent), color-mix(in srgb, var(--main-bg-color) 62%, transparent)); box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--indigo) 48%, transparent), inset 0 1px 0 color-mix(in srgb, var(--main-bg-color) 92%, transparent); } .pricing-v2-card--pro:hover { border-color: color-mix(in srgb, var(--indigo) 60%, transparent); box-shadow: 0 32px 66px -24px color-mix(in srgb, var(--indigo) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--main-bg-color) 95%, transparent); } .pricing-v2-card--enterprise { border-color: color-mix(in srgb, var(--purple) 34%, transparent); } .pricing-v2-card--enterprise:hover { border-color: color-mix(in srgb, var(--purple) 50%, transparent); box-shadow: 0 28px 60px -26px color-mix(in srgb, var(--purple) 45%, transparent), inset 0 1px 0 color-mix(in srgb, var(--main-bg-color) 95%, transparent); } /* Card Head */ .pricing-v2-card-head { margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } .pricing-v2-tier { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.55; margin-bottom: 0.6rem; } .pricing-v2-card--pro .pricing-v2-tier { color: var(--purple); opacity: 1; } .pricing-v2-price { display: flex; align-items: baseline; gap: 0.1rem; } .pricing-v2-currency { font-size: 1.15rem; font-weight: 600; color: var(--inv-bg-color); opacity: 0.55; align-self: flex-start; margin-top: 0.25rem; } .pricing-v2-amount { font-size: 2.7rem; font-weight: 800; color: var(--inv-bg-color); letter-spacing: -0.03em; line-height: 1; } .pricing-v2-amount--text { font-size: 2.1rem; } .pricing-v2-period { font-size: 0.9rem; font-weight: 500; color: var(--inv-bg-color); opacity: 0.5; margin-left: 0.15rem; } /* Features */ .pricing-v2-features { flex: 1; margin-bottom: 1.75rem; } .pricing-v2-features-label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--inv-bg-color); opacity: 0.5; margin-bottom: 0.9rem; } .pricing-v2-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; } .pricing-v2-list li { font-size: 0.9rem; color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent); line-height: 1.5; padding-left: 1.4rem; position: relative; } /* Insights-style rotated-square gradient marker (mirrors the takeaways list). */ .pricing-v2-list li::before { content: ""; position: absolute; left: 0.15rem; top: 0.5rem; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, var(--indigo), var(--purple)); transform: rotate(45deg); } .pricing-v2-list li strong { color: var(--inv-bg-color); font-weight: 700; } /* CTA Buttons — pills, matching the insights hub CTAs */ .pricing-v2-cta { display: block; text-align: center; padding: 0.8rem 1.25rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; margin-top: auto; } .pricing-v2-cta--guest { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); color: var(--inv-bg-color) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 18%, transparent); } .pricing-v2-cta--guest:hover { background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); transform: translateY(-2px); color: var(--inv-bg-color) !important; } .pricing-v2-cta--pro { background: linear-gradient(120deg, var(--indigo), var(--purple)); color: #ffffff !important; border: 1px solid transparent; box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--indigo) 70%, transparent); } .pricing-v2-cta--pro:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -16px color-mix(in srgb, var(--indigo) 80%, transparent); color: #ffffff !important; } .pricing-v2-cta--enterprise { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple) !important; border: 1px solid color-mix(in srgb, var(--purple) 32%, transparent); } .pricing-v2-cta--enterprise:hover { background: color-mix(in srgb, var(--purple) 20%, transparent); border-color: color-mix(in srgb, var(--purple) 46%, transparent); transform: translateY(-2px); color: var(--purple) !important; } /* Card note */ .pricing-v2-card-note { text-align: center; margin: 0.85rem 0 0; font-size: 0.8rem; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); } .pricing-v2-card-note a { color: var(--purple) !important; text-decoration: none !important; font-weight: 600; transition: color 0.2s ease; } .pricing-v2-card-note a:hover { color: var(--indigo) !important; } .pricing-v2-credits-text { font-size: 0.9rem; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); margin: 0; } .pricing-v2-credits-text a { color: var(--purple) !important; text-decoration: none !important; font-weight: 600; transition: color 0.2s ease; } .pricing-v2-credits-text a:hover { color: var(--indigo) !important; } /* Highlights */ .pricing-v2-highlights { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-top: 3rem; } .pricing-v2-highlight { display: flex; align-items: center; gap: 0.6rem; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent); font-size: 0.85rem; font-weight: 600; } .pricing-v2-highlight svg { color: var(--purple); flex-shrink: 0; } /* Responsive */ @media (max-width: 900px) { .pricing-v2-cards { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } } @media (max-width: 768px) { .pricing-v2 { padding: 4rem 0 3rem; } .pricing-v2-title { font-size: 2rem; letter-spacing: -0.02em; line-height: 1.15; } .pricing-v2-highlights { flex-direction: column; align-items: center; gap: 1rem; } } /* ── Documents V2 ── */ .docs-v2 { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0 6rem; position: relative; overflow: hidden; min-height: 100vh; } .docs-v2::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 15%, rgba(99, 102, 241, 0.06) 0%, rgba(99, 102, 241, 0.03) 25%, rgba(99, 102, 241, 0) 50%), radial-gradient(circle at 70% 85%, rgba(139, 92, 246, 0.04) 0%, rgba(139, 92, 246, 0.02) 25%, rgba(139, 92, 246, 0) 50%); pointer-events: none; } .docs-v2-inner { position: relative; max-width: 960px; margin: 0 auto; padding: 0 1.5rem; } .docs-v2-header { text-align: center; margin-bottom: 4rem; } .docs-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; } .docs-v2-subtitle { font-size: 1rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.65; } /* ---- FAQ V2 ---- */ .faq-v2-section { background: var(--main-bg-color); color: var(--inv-bg-color); min-height: 100vh; } .faq .container-xs .faq-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; text-align: center !important; } .faq-v2-subtitle { font-size: 1rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.65; text-align: center; } .faq .section-header.center-content { padding-bottom: 0.5rem; } .docs-v2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .docs-v2-card { border-radius: 20px; padding: 2.25rem; display: flex; flex-direction: column; background: var(--off-bg-color); border: 1px solid var(--grey-accent-color); transition: transform 0.3s ease, box-shadow 0.3s ease; } .docs-v2-card:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(99, 102, 241, 0.06); } .docs-v2-card-body { flex: 1; margin-bottom: 1.5rem; } .docs-v2-card-title { font-size: 1.2rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .docs-v2-card-desc { font-size: 0.9rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.55; margin: 0; } .docs-v2-cta { display: block; text-align: center; padding: 0.55rem 1.25rem; border-radius: 8px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none !important; transition: all 0.25s ease; margin-top: auto; background: transparent; } .docs-v2-cta:hover { transform: translateY(-1px); } .docs-v2-card:nth-child(4n+1) .docs-v2-cta { color: var(--middleBlue) !important; border: 1px solid var(--middleBlue); } .docs-v2-card:nth-child(4n+1) .docs-v2-cta:hover { background: var(--middleBlue); color: #ffffff !important; } .docs-v2-card:nth-child(4n+2) .docs-v2-cta { color: var(--purple) !important; border: 1px solid var(--purple); } .docs-v2-card:nth-child(4n+2) .docs-v2-cta:hover { background: var(--purple); color: #ffffff !important; } .docs-v2-card:nth-child(4n+3) .docs-v2-cta { color: var(--blurple) !important; border: 1px solid var(--blurple); } .docs-v2-card:nth-child(4n+3) .docs-v2-cta:hover { background: var(--blurple); color: #ffffff !important; } .docs-v2-card:nth-child(4n+4) .docs-v2-cta { color: var(--pink) !important; border: 1px solid var(--pink); } .docs-v2-card:nth-child(4n+4) .docs-v2-cta:hover { background: var(--pink); color: #ffffff !important; } @media (max-width: 640px) { .docs-v2 { padding: 4rem 0 3rem; min-height: auto; } .docs-v2-header { margin-bottom: 2.5rem; } .docs-v2-cards { grid-template-columns: 1fr; } } /* ---- Contact V2 ---- */ .contact-v2 { background: var(--main-bg-color); color: var(--inv-bg-color); padding: 7rem 0 6rem; min-height: 100vh; position: relative; overflow: hidden; } .contact-v2-inner { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; text-align: center; } .contact-v2-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--purple); margin-bottom: 1rem; } .contact-v2-headline { font-size: 2.2rem; font-weight: 800; color: var(--inv-bg-color); line-height: 1.2; margin-bottom: 1rem; } .contact-v2-subtitle { font-size: 1rem; color: var(--inv-bg-color); opacity: 0.6; line-height: 1.65; } .contact-v2-header { margin-bottom: 3rem; } .contact-v2-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .contact-v2-card { background: var(--off-bg-color); border: 1px solid var(--grey-accent-color); border-radius: 16px; padding: 2.5rem 1.5rem 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; } .contact-v2-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(99, 102, 241, 0.08); } .contact-v2-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .contact-v2-card--gmail .contact-v2-card-icon { background: rgba(120, 115, 245, 0.1); color: var(--purple); } .contact-v2-card--copy .contact-v2-card-icon { background: rgba(86, 154, 241, 0.1); color: var(--blurple); } .contact-v2-card-title { font-size: 1.05rem; font-weight: 700; color: var(--inv-bg-color); margin-bottom: 0.5rem; } .contact-v2-card-desc { font-size: 0.85rem; color: var(--inv-bg-color); opacity: 0.5; line-height: 1.5; margin-bottom: 1.5rem; } .contact-v2-cta { display: inline-block; padding: 0.6rem 1.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: all 0.25s ease; text-decoration: none !important; margin-top: auto; background: transparent; border: 1px solid; } .contact-v2-cta--gmail { color: var(--purple) !important; border-color: var(--purple); } .contact-v2-cta--gmail:hover { background: var(--purple); color: #ffffff !important; } .contact-v2-cta--copy { color: var(--blurple) !important; border-color: var(--blurple); } .contact-v2-cta--copy:hover { background: var(--blurple); color: #ffffff !important; } @media (max-width: 768px) { .contact-v2 { padding: 4rem 0 3rem; } .contact-v2-header { margin-bottom: 2.5rem; } .contact-v2-cards { grid-template-columns: 1fr; } } /* ── SweetAlert2 themed overrides (shared CN style) ── */ .swal2-cn-popup { background: var(--main-bg-color) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 16px !important; padding: 2.25rem 2rem !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12); } .swal2-cn-title { font-size: 1.35rem !important; font-weight: 700 !important; color: var(--inv-bg-color) !important; letter-spacing: -0.01em !important; padding: 0 !important; margin: 0 0 1rem !important; } .swal2-cn-html { font-size: 0.85rem !important; color: var(--inv-bg-color) !important; opacity: 0.6; line-height: 1.6 !important; padding: 0 !important; margin: 0 0 0.5rem !important; } .swal2-cn-html b { color: var(--inv-bg-color); font-weight: 700; opacity: 1; } .swal2-cn-confirm { background: var(--purple) !important; color: #ffffff !important; border: none !important; border-radius: 10px !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; padding: 0.65rem 1.75rem !important; box-shadow: 0 4px 24px color-mix(in srgb, var(--purple) 30%, transparent) !important; transition: all 0.25s ease !important; } .swal2-cn-confirm:hover { background: color-mix(in srgb, var(--purple) 85%, var(--blurple)) !important; box-shadow: 0 8px 32px color-mix(in srgb, var(--purple) 35%, transparent) !important; } .swal2-cn-cancel { background: none !important; color: var(--inv-bg-color) !important; opacity: 0.4; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px !important; font-size: 0.8rem !important; font-weight: 600 !important; padding: 0.65rem 1.75rem !important; transition: all 0.25s ease !important; } .swal2-cn-cancel:hover { opacity: 0.6; border-color: color-mix(in srgb, var(--inv-bg-color) 15%, transparent) !important; } .swal2-cn-input { border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px !important; background: var(--main-bg-color) !important; color: var(--inv-bg-color) !important; font-size: 0.9rem !important; padding: 0.75rem 1rem !important; box-shadow: none !important; } @keyframes swal2-cn-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes swal2-cn-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } } .swal2-cn-show { animation: swal2-cn-in 0.25s ease-out !important; } .swal2-cn-hide { animation: swal2-cn-out 0.2s ease-in !important; } /* ── CSP-compliant utility classes (moved from inline styles) ── */ .svg-nudge-up { transform: translateY(-1px); } .text-subdued { color: var(--inv-bg-color); opacity: 0.7; } .text-subdued-light { color: var(--inv-bg-color); opacity: 0.6; } .fill-purple { fill: var(--purple) !important; } .icon-scale-up { scale: 1.1; } .share-section-header { text-align: center; margin-bottom: 2.5rem; } .share-section-title { text-align: center; } .share-description { text-align: center; margin: 0; color: var(--inv-bg-color); opacity: 0.7; } /* ── JS state classes (CSP-compliant replacements for .style) ── */ .is-hidden { display: none !important; } .is-visible { opacity: 1; transform: translateY(0); } .is-faded { opacity: 0; } .is-clickable { cursor: pointer; } .fade-swap { transition: opacity 280ms ease; } .fade-in-fast { transition: opacity 0.25s ease; opacity: 1; } .fade-in-medium { transition: opacity 0.4s ease; opacity: 1; } .fade-in-slow { transition: opacity 0.5s ease; opacity: 1; } .fade-out-fast { transition: opacity 0.25s ease; opacity: 0; } .fade-out-medium { transition: opacity 0.3s ease; opacity: 0; } .flash-accept { background: rgba(34, 197, 94, 0.3); } .completion-arc-animated { transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Data-attribute driven CSS custom properties (replaces JS style.setProperty) ── */ /* Bar widths: [data-bar-w="N"] → --bar-width: N% */ [data-bar-w="0"] { --bar-width: 0%; } [data-bar-w="1"] { --bar-width: 1%; } [data-bar-w="2"] { --bar-width: 2%; } [data-bar-w="3"] { --bar-width: 3%; } [data-bar-w="4"] { --bar-width: 4%; } [data-bar-w="5"] { --bar-width: 5%; } [data-bar-w="6"] { --bar-width: 6%; } [data-bar-w="7"] { --bar-width: 7%; } [data-bar-w="8"] { --bar-width: 8%; } [data-bar-w="9"] { --bar-width: 9%; } [data-bar-w="10"] { --bar-width: 10%; } [data-bar-w="11"] { --bar-width: 11%; } [data-bar-w="12"] { --bar-width: 12%; } [data-bar-w="13"] { --bar-width: 13%; } [data-bar-w="14"] { --bar-width: 14%; } [data-bar-w="15"] { --bar-width: 15%; } [data-bar-w="16"] { --bar-width: 16%; } [data-bar-w="17"] { --bar-width: 17%; } [data-bar-w="18"] { --bar-width: 18%; } [data-bar-w="19"] { --bar-width: 19%; } [data-bar-w="20"] { --bar-width: 20%; } [data-bar-w="21"] { --bar-width: 21%; } [data-bar-w="22"] { --bar-width: 22%; } [data-bar-w="23"] { --bar-width: 23%; } [data-bar-w="24"] { --bar-width: 24%; } [data-bar-w="25"] { --bar-width: 25%; } [data-bar-w="26"] { --bar-width: 26%; } [data-bar-w="27"] { --bar-width: 27%; } [data-bar-w="28"] { --bar-width: 28%; } [data-bar-w="29"] { --bar-width: 29%; } [data-bar-w="30"] { --bar-width: 30%; } [data-bar-w="31"] { --bar-width: 31%; } [data-bar-w="32"] { --bar-width: 32%; } [data-bar-w="33"] { --bar-width: 33%; } [data-bar-w="34"] { --bar-width: 34%; } [data-bar-w="35"] { --bar-width: 35%; } [data-bar-w="36"] { --bar-width: 36%; } [data-bar-w="37"] { --bar-width: 37%; } [data-bar-w="38"] { --bar-width: 38%; } [data-bar-w="39"] { --bar-width: 39%; } [data-bar-w="40"] { --bar-width: 40%; } [data-bar-w="41"] { --bar-width: 41%; } [data-bar-w="42"] { --bar-width: 42%; } [data-bar-w="43"] { --bar-width: 43%; } [data-bar-w="44"] { --bar-width: 44%; } [data-bar-w="45"] { --bar-width: 45%; } [data-bar-w="46"] { --bar-width: 46%; } [data-bar-w="47"] { --bar-width: 47%; } [data-bar-w="48"] { --bar-width: 48%; } [data-bar-w="49"] { --bar-width: 49%; } [data-bar-w="50"] { --bar-width: 50%; } [data-bar-w="51"] { --bar-width: 51%; } [data-bar-w="52"] { --bar-width: 52%; } [data-bar-w="53"] { --bar-width: 53%; } [data-bar-w="54"] { --bar-width: 54%; } [data-bar-w="55"] { --bar-width: 55%; } [data-bar-w="56"] { --bar-width: 56%; } [data-bar-w="57"] { --bar-width: 57%; } [data-bar-w="58"] { --bar-width: 58%; } [data-bar-w="59"] { --bar-width: 59%; } [data-bar-w="60"] { --bar-width: 60%; } [data-bar-w="61"] { --bar-width: 61%; } [data-bar-w="62"] { --bar-width: 62%; } [data-bar-w="63"] { --bar-width: 63%; } [data-bar-w="64"] { --bar-width: 64%; } [data-bar-w="65"] { --bar-width: 65%; } [data-bar-w="66"] { --bar-width: 66%; } [data-bar-w="67"] { --bar-width: 67%; } [data-bar-w="68"] { --bar-width: 68%; } [data-bar-w="69"] { --bar-width: 69%; } [data-bar-w="70"] { --bar-width: 70%; } [data-bar-w="71"] { --bar-width: 71%; } [data-bar-w="72"] { --bar-width: 72%; } [data-bar-w="73"] { --bar-width: 73%; } [data-bar-w="74"] { --bar-width: 74%; } [data-bar-w="75"] { --bar-width: 75%; } [data-bar-w="76"] { --bar-width: 76%; } [data-bar-w="77"] { --bar-width: 77%; } [data-bar-w="78"] { --bar-width: 78%; } [data-bar-w="79"] { --bar-width: 79%; } [data-bar-w="80"] { --bar-width: 80%; } [data-bar-w="81"] { --bar-width: 81%; } [data-bar-w="82"] { --bar-width: 82%; } [data-bar-w="83"] { --bar-width: 83%; } [data-bar-w="84"] { --bar-width: 84%; } [data-bar-w="85"] { --bar-width: 85%; } [data-bar-w="86"] { --bar-width: 86%; } [data-bar-w="87"] { --bar-width: 87%; } [data-bar-w="88"] { --bar-width: 88%; } [data-bar-w="89"] { --bar-width: 89%; } [data-bar-w="90"] { --bar-width: 90%; } [data-bar-w="91"] { --bar-width: 91%; } [data-bar-w="92"] { --bar-width: 92%; } [data-bar-w="93"] { --bar-width: 93%; } [data-bar-w="94"] { --bar-width: 94%; } [data-bar-w="95"] { --bar-width: 95%; } [data-bar-w="96"] { --bar-width: 96%; } [data-bar-w="97"] { --bar-width: 97%; } [data-bar-w="98"] { --bar-width: 98%; } [data-bar-w="99"] { --bar-width: 99%; } [data-bar-w="100"] { --bar-width: 100%; } /* Transit angles: [data-from-angle] / [data-to-angle] → --from-angle / --to-angle */ /* Covers multiples of 60° (6 stages), 72° (5 stages), 90° (4 stages) up to 660° wrap */ .nav-transit[data-from-angle="0"] { --from-angle: 0deg; } .nav-transit[data-from-angle="60"] { --from-angle: 60deg; } .nav-transit[data-from-angle="72"] { --from-angle: 72deg; } .nav-transit[data-from-angle="90"] { --from-angle: 90deg; } .nav-transit[data-from-angle="120"] { --from-angle: 120deg; } .nav-transit[data-from-angle="144"] { --from-angle: 144deg; } .nav-transit[data-from-angle="180"] { --from-angle: 180deg; } .nav-transit[data-from-angle="216"] { --from-angle: 216deg; } .nav-transit[data-from-angle="240"] { --from-angle: 240deg; } .nav-transit[data-from-angle="270"] { --from-angle: 270deg; } .nav-transit[data-from-angle="288"] { --from-angle: 288deg; } .nav-transit[data-from-angle="300"] { --from-angle: 300deg; } .nav-transit[data-to-angle="60"] { --to-angle: 60deg; } .nav-transit[data-to-angle="72"] { --to-angle: 72deg; } .nav-transit[data-to-angle="90"] { --to-angle: 90deg; } .nav-transit[data-to-angle="120"] { --to-angle: 120deg; } .nav-transit[data-to-angle="144"] { --to-angle: 144deg; } .nav-transit[data-to-angle="180"] { --to-angle: 180deg; } .nav-transit[data-to-angle="216"] { --to-angle: 216deg; } .nav-transit[data-to-angle="240"] { --to-angle: 240deg; } .nav-transit[data-to-angle="270"] { --to-angle: 270deg; } .nav-transit[data-to-angle="288"] { --to-angle: 288deg; } .nav-transit[data-to-angle="300"] { --to-angle: 300deg; } .nav-transit[data-to-angle="360"] { --to-angle: 360deg; } .nav-transit[data-to-angle="420"] { --to-angle: 420deg; } .nav-transit[data-to-angle="432"] { --to-angle: 432deg; } .nav-transit[data-to-angle="450"] { --to-angle: 450deg; } .nav-transit[data-to-angle="480"] { --to-angle: 480deg; } .nav-transit[data-to-angle="504"] { --to-angle: 504deg; } .nav-transit[data-to-angle="540"] { --to-angle: 540deg; } .nav-transit[data-to-angle="576"] { --to-angle: 576deg; } .nav-transit[data-to-angle="600"] { --to-angle: 600deg; } .nav-transit[data-to-angle="630"] { --to-angle: 630deg; } .nav-transit[data-to-angle="648"] { --to-angle: 648deg; } .nav-transit[data-to-angle="660"] { --to-angle: 660deg; } /* Avatar colors: driven by existing data-signer-index on parent row */ [data-signer-index="0"] .commit-sig-avatar { --avatar-color: var(--purple); } [data-signer-index="1"] .commit-sig-avatar { --avatar-color: var(--blurple); } /* Magnet positions: [data-magnet-x/y] → --magnet-x/y (range: -14 to 14, integer px) */ [data-magnet-x="-14"] { --magnet-x: -14px; } [data-magnet-x="-13"] { --magnet-x: -13px; } [data-magnet-x="-12"] { --magnet-x: -12px; } [data-magnet-x="-11"] { --magnet-x: -11px; } [data-magnet-x="-10"] { --magnet-x: -10px; } [data-magnet-x="-9"] { --magnet-x: -9px; } [data-magnet-x="-8"] { --magnet-x: -8px; } [data-magnet-x="-7"] { --magnet-x: -7px; } [data-magnet-x="-6"] { --magnet-x: -6px; } [data-magnet-x="-5"] { --magnet-x: -5px; } [data-magnet-x="-4"] { --magnet-x: -4px; } [data-magnet-x="-3"] { --magnet-x: -3px; } [data-magnet-x="-2"] { --magnet-x: -2px; } [data-magnet-x="-1"] { --magnet-x: -1px; } [data-magnet-x="0"] { --magnet-x: 0px; } [data-magnet-x="1"] { --magnet-x: 1px; } [data-magnet-x="2"] { --magnet-x: 2px; } [data-magnet-x="3"] { --magnet-x: 3px; } [data-magnet-x="4"] { --magnet-x: 4px; } [data-magnet-x="5"] { --magnet-x: 5px; } [data-magnet-x="6"] { --magnet-x: 6px; } [data-magnet-x="7"] { --magnet-x: 7px; } [data-magnet-x="8"] { --magnet-x: 8px; } [data-magnet-x="9"] { --magnet-x: 9px; } [data-magnet-x="10"] { --magnet-x: 10px; } [data-magnet-x="11"] { --magnet-x: 11px; } [data-magnet-x="12"] { --magnet-x: 12px; } [data-magnet-x="13"] { --magnet-x: 13px; } [data-magnet-x="14"] { --magnet-x: 14px; } [data-magnet-y="-14"] { --magnet-y: -14px; } [data-magnet-y="-13"] { --magnet-y: -13px; } [data-magnet-y="-12"] { --magnet-y: -12px; } [data-magnet-y="-11"] { --magnet-y: -11px; } [data-magnet-y="-10"] { --magnet-y: -10px; } [data-magnet-y="-9"] { --magnet-y: -9px; } [data-magnet-y="-8"] { --magnet-y: -8px; } [data-magnet-y="-7"] { --magnet-y: -7px; } [data-magnet-y="-6"] { --magnet-y: -6px; } [data-magnet-y="-5"] { --magnet-y: -5px; } [data-magnet-y="-4"] { --magnet-y: -4px; } [data-magnet-y="-3"] { --magnet-y: -3px; } [data-magnet-y="-2"] { --magnet-y: -2px; } [data-magnet-y="-1"] { --magnet-y: -1px; } [data-magnet-y="0"] { --magnet-y: 0px; } [data-magnet-y="1"] { --magnet-y: 1px; } [data-magnet-y="2"] { --magnet-y: 2px; } [data-magnet-y="3"] { --magnet-y: 3px; } [data-magnet-y="4"] { --magnet-y: 4px; } [data-magnet-y="5"] { --magnet-y: 5px; } [data-magnet-y="6"] { --magnet-y: 6px; } [data-magnet-y="7"] { --magnet-y: 7px; } [data-magnet-y="8"] { --magnet-y: 8px; } [data-magnet-y="9"] { --magnet-y: 9px; } [data-magnet-y="10"] { --magnet-y: 10px; } [data-magnet-y="11"] { --magnet-y: 11px; } [data-magnet-y="12"] { --magnet-y: 12px; } [data-magnet-y="13"] { --magnet-y: 13px; } [data-magnet-y="14"] { --magnet-y: 14px; } /* ============================================================ AI IN PRACTICE SECTION ============================================================ */ .ai-practice-section { position: relative; /* Force dark — premium gradient theme matching First-Party AI page */ --main-bg-color: #06060e; --inv-bg-color: #f1f5f9; --off-bg-color: #06060e; --grey-accent-color: #0f172a; --secondary-grey-color: #1e293b; color: #f1f5f9; background: #06060e; } .ai-practice-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 20% 0%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%), radial-gradient(ellipse 50% 30% at 80% 100%, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 70%); pointer-events: none; } /* Header */ .ai-practice-kicker { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.4em; text-transform: uppercase; color: var(--inv-bg-color); margin-bottom: 1rem; } .ai-practice-title { /* Flagship brand section — matches the .tg-headline ("Experience your journey") section tier: same fluid clamp so the two read as peers. */ font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 0.5rem; background: linear-gradient(160deg, rgba(79,70,229,1) 0%, rgba(99,102,241,1) 50%, rgba(139,92,246,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ai-practice-subline { /* Section subline tier — matches .tg-subline (1rem); was 0.78rem, which read undersized once .ai-practice-title moved up to the 3rem clamp. */ font-size: 1rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); line-height: 1.5; margin: 0.5rem 0 0; letter-spacing: 0.01em; } .ai-practice-stat-inline { font-weight: 800; color: var(--blurple); letter-spacing: -0.02em; } /* View Toggle */ .ai-practice-toggle-wrap { display: flex; justify-content: center; margin-bottom: 2rem; } .ai-practice-toggle { display: inline-flex; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 100px; padding: 4px; gap: 2px; } .ai-practice-toggle-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.05rem; border-radius: 100px; font-size: 0.8rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); background: transparent; border: none; cursor: pointer; transition: color 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .ai-practice-toggle-btn svg { opacity: 0.6; transition: opacity 0.25s ease; flex-shrink: 0; } .ai-practice-toggle-btn.is-active { background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); color: var(--inv-bg-color); box-shadow: 0 1px 6px color-mix(in srgb, var(--blurple) 20%, transparent); } .ai-practice-toggle-btn.is-active svg { opacity: 1; } .ai-practice-toggle-btn:hover:not(.is-active) { color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent); } .ai-toggle-audience { font-size: 0.55rem; font-weight: 500; letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); margin-left: 0.15rem; } .ai-practice-toggle-btn.is-active .ai-toggle-audience { color: color-mix(in srgb, var(--blurple) 60%, transparent); } /* Views */ .ai-practice-view { display: none; opacity: 0; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .ai-practice-view.is-active { display: block; opacity: 1; } /* ================================================================ INTEGRATED STAGE PANEL — Nodes + Content in One Surface ================================================================ */ .ai-stage-ring { position: relative; width: 100%; max-width: 580px; margin: 0 auto; border-radius: 20px; padding: 1.75rem 1.75rem 1.5rem; background: radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); box-shadow: 0 0 60px 15px color-mix(in srgb, var(--blurple) 3%, transparent), 0 16px 60px -10px color-mix(in srgb, var(--blurple) 5%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 3%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 5%, transparent); overflow: hidden; } /* Orbit repurposed as horizontal divider between nodes and content */ .ai-ring-orbit { position: relative; width: 100%; height: 1px; margin: 1rem 0 1.25rem; pointer-events: none; z-index: 1; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 15%, color-mix(in srgb, var(--blurple) 14%, transparent) 50%, color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 85%, transparent 100%); } /* Sweeping light on the divider */ .ai-ring-orbit::after { content: ''; position: absolute; top: -1px; left: -30%; width: 30%; height: 3px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurple) 40%, transparent), color-mix(in srgb, var(--blurple) 60%, transparent), transparent); border-radius: 2px; animation: aiDividerSweep 6s cubic-bezier(0.22, 1, 0.36, 1) infinite; pointer-events: none; } @keyframes aiDividerSweep { 0% { left: -30%; opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { left: 100%; opacity: 0; } } /* Arc hidden in panel layout — no circular path */ .ai-ring-arc { display: none; } /* Nodes — integrated horizontal nav row */ .ai-ring-nodes { position: relative; display: flex; justify-content: center; gap: 1.25rem; z-index: 1; padding: 0 0.5rem; } /* ── Progress Track — connecting line between nodes ── */ .ai-ring-track { position: absolute; top: 17px; left: var(--track-left, 10%); width: var(--track-width, 80%); height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); z-index: 0; pointer-events: none; } .ai-ring-track-fill { position: absolute; top: 0; left: 0; height: 100%; width: var(--track-fill, 0%); border-radius: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 50%, transparent), var(--blurple)); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 8px color-mix(in srgb, var(--blurple) 25%, transparent); } .ai-stage-node { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; background: none; border: none; cursor: pointer; padding: 0; position: relative; flex: 1 1 0%; } /* Primary expanding ring on active node */ .ai-stage-node::before { content: ''; position: absolute; top: 17px; left: 50%; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--blurple) 30%, transparent); transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none; } .ai-stage-node.is-active::before { animation: aiRingExpand 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; } /* Secondary expanding ring — offset timing for layered depth */ .ai-stage-node::after { content: ''; position: absolute; top: 17px; left: 50%; width: 38px; height: 38px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 15%, transparent); transform: translate(-50%, -50%) scale(1); opacity: 0; pointer-events: none; } .ai-stage-node.is-active::after { animation: aiRingExpand 2.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s infinite; } @keyframes aiRingExpand { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; } 80% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } } /* Burst effect on stage select — JS-created element */ .ai-node-burst { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--blurple) 50%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--blurple) 30%, transparent); animation: aiNodeBurst 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: none; } @keyframes aiNodeBurst { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } } .ai-stage-node-dot { width: 34px; height: 34px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); display: flex; align-items: center; justify-content: center; position: relative; color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent); transition: background 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Outer breathing ring — always visible on active */ .ai-stage-node-ring-outer { position: absolute; inset: -8px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 0%, transparent); transition: border-color 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .ai-stage-node.is-active .ai-stage-node-ring-outer { border-color: color-mix(in srgb, var(--blurple) 20%, transparent); animation: aiNodeRingBreath 3s ease-in-out infinite; } @keyframes aiNodeRingBreath { 0%, 100% { transform: scale(1); opacity: 0.6; border-color: color-mix(in srgb, var(--blurple) 15%, transparent); } 50% { transform: scale(1.15); opacity: 1; border-color: color-mix(in srgb, var(--blurple) 30%, transparent); } } /* Inner conic-gradient sweep ring — spinning arc on active */ .ai-stage-node-ring-inner { position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient( from 0deg, transparent 0deg, transparent 300deg, color-mix(in srgb, var(--blurple) 8%, transparent) 330deg, color-mix(in srgb, var(--blurple) 25%, transparent) 355deg, transparent 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px), #000 100%, transparent 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .ai-stage-node.is-active .ai-stage-node-ring-inner { opacity: 1; animation: aiNodeArcSpin 4s linear infinite; } @keyframes aiNodeArcSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ai-stage-node-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); transition: color 0.5s cubic-bezier(0.22, 1, 0.36, 1), font-weight 0.3s ease; white-space: nowrap; position: relative; } /* Active node — 5-layer shadow stack with dramatic presence */ .ai-stage-node.is-active .ai-stage-node-dot { background: color-mix(in srgb, var(--blurple) 18%, transparent); border-color: color-mix(in srgb, var(--blurple) 50%, transparent); color: var(--blurple); transform: scale(1.3); box-shadow: 0 0 0 5px color-mix(in srgb, var(--blurple) 6%, transparent), 0 0 30px color-mix(in srgb, var(--blurple) 35%, transparent), 0 0 60px color-mix(in srgb, var(--blurple) 15%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--blurple) 20%, transparent); } .ai-stage-node.is-active .ai-stage-node-label { color: var(--blurple); font-weight: 700; } /* Active node downward glow — connects node to content */ .ai-stage-node.is-active .ai-stage-node-label::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 60px; height: 40px; background: radial-gradient(ellipse 100% 100% at 50% 0%, color-mix(in srgb, var(--blurple) 12%, transparent) 0%, transparent 70%); pointer-events: none; } /* Past nodes — completed feel */ .ai-stage-node.is-past .ai-stage-node-dot { background: color-mix(in srgb, var(--blurple) 8%, transparent); border-color: color-mix(in srgb, var(--blurple) 20%, transparent); color: color-mix(in srgb, var(--blurple) 55%, transparent); } .ai-stage-node.is-past .ai-stage-node-label { color: color-mix(in srgb, var(--blurple) 40%, transparent); } /* Inactive nodes — subtle idle pulse (feel "alive") */ .ai-stage-node:not(.is-active):not(.is-past) .ai-stage-node-dot { animation: aiNodeIdlePulse 4s ease-in-out infinite; } @keyframes aiNodeIdlePulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 12px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } } /* Hover — subtle magnetism */ .ai-stage-node:hover:not(.is-active) .ai-stage-node-dot { background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 18%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); transform: scale(1.12); box-shadow: 0 0 20px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); animation: none; } /* Content area — below the nodes, full width */ .ai-ring-center { position: relative; text-align: center; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } /* Stage context header — counter + name inline */ .ai-stage-context-header { display: flex; align-items: center; gap: 0.5rem; } .ai-stage-counter { font-size: 0.55rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: color-mix(in srgb, var(--blurple) 65%, transparent); background: color-mix(in srgb, var(--blurple) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 15%, transparent); padding: 0.15rem 0.5rem; border-radius: 4px; white-space: nowrap; } .ai-stage-context-name { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; margin: 0; line-height: 1.15; background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: opacity 0.3s ease; } .ai-stage-context-desc { font-size: 0.62rem; font-weight: 400; color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent); letter-spacing: 0.01em; margin: 0; line-height: 1.35; } /* Atmospheric glow inside ring */ .ai-ring-atmosphere { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; overflow: hidden; } .ai-agent-panel-glow-primary { position: absolute; top: -50%; left: var(--glow-x, 30%); width: 50%; height: 140%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--blurple) 7%, transparent) 0%, transparent 65%); pointer-events: none; animation: aiPanelGlowDrift 8s ease-in-out infinite; transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1); transform: translateX(-50%); } .ai-agent-panel-glow-secondary { position: absolute; top: -30%; right: 15%; width: 40%; height: 100%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 65%); pointer-events: none; animation: aiPanelGlowDrift 8s ease-in-out 4s infinite; } @keyframes aiPanelGlowDrift { 0%, 100% { transform: translateX(0) translateY(0); opacity: 0.6; } 50% { transform: translateX(15px) translateY(-10px); opacity: 1; } } /* Scanline — horizontal light sweep (terminal/mission-control feel) */ .ai-agent-panel-scanline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blurple) 12%, transparent), transparent); z-index: 2; pointer-events: none; animation: aiScanlineMove 6s cubic-bezier(0.22, 1, 0.36, 1) infinite; } @keyframes aiScanlineMove { 0% { top: 0; opacity: 0; } 10% { opacity: 0.6; } 90% { opacity: 0.6; } 100% { top: 100%; opacity: 0; } } .ai-agent-panel-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.65rem; width: 100%; height: 300px; margin-top: 0.5rem; position: relative; z-index: 1; perspective: 1200px; } /* ================================================================ AGENT CARDS — Premium Live Activity Cards ================================================================ */ .ai-agent-card { background: linear-gradient(160deg, color-mix(in srgb, var(--inv-bg-color) 6%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent) 100%); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 14px; padding: 0.9rem 1rem; backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); position: relative; overflow: hidden; display: flex; flex-direction: column; text-align: left; opacity: 0; transform: translateY(24px) scale(0.95) rotateX(4deg); transform-origin: center bottom; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; box-shadow: 0 0 60px 10px color-mix(in srgb, var(--blurple) 3%, transparent), 0 12px 40px -8px color-mix(in srgb, var(--blurple) 6%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 2px 8px rgba(0,0,0,0.35); } /* De-emphasize card when sibling is active */ .ai-agent-card.is-dimmed { opacity: 0.35; filter: blur(1.5px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .ai-agent-card.is-focused { opacity: 1; filter: blur(0); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease; } /* Left accent bar — color-coded by buyer/seller */ .ai-agent-card-accent { position: absolute; top: 16px; bottom: 16px; left: 0; width: 2px; border-radius: 0 1px 1px 0; background: linear-gradient(to bottom, var(--blurple), color-mix(in srgb, var(--blurple) 20%, transparent)); opacity: 0; transition: opacity 0.5s ease 0.2s; } .ai-agent-card[data-recommend="buyer"] .ai-agent-card-accent { background: linear-gradient(to bottom, #34d399, color-mix(in srgb, #10b981 20%, transparent)); } .ai-agent-card[data-recommend="seller"] .ai-agent-card-accent { background: linear-gradient(to bottom, #818cf8, color-mix(in srgb, var(--blurple) 20%, transparent)); } /* Subtle top shimmer tint per role */ .ai-agent-card[data-recommend="buyer"]::before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #10b981 12%, transparent) 20%, color-mix(in srgb, #10b981 30%, transparent) 50%, color-mix(in srgb, #10b981 12%, transparent) 80%, transparent 100%); } .ai-agent-card[data-recommend="seller"]::before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--blurple) 15%, transparent) 20%, color-mix(in srgb, var(--blurple) 50%, transparent) 50%, color-mix(in srgb, var(--blurple) 15%, transparent) 80%, transparent 100%); } /* Buyer card status dot — green pulse */ .ai-agent-card[data-recommend="buyer"] .ai-agent-status-dot { background: #34d399; box-shadow: 0 0 10px color-mix(in srgb, #10b981 70%, transparent); } .ai-agent-card[data-recommend="buyer"] .ai-agent-status-ring { border-color: color-mix(in srgb, #10b981 25%, transparent); } /* Top shimmer line */ .ai-agent-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--blurple) 15%, transparent) 20%, color-mix(in srgb, var(--blurple) 50%, transparent) 50%, color-mix(in srgb, var(--blurple) 15%, transparent) 80%, transparent 100%); opacity: 0; transition: opacity 0.6s ease; } /* Ambient shimmer sweep across card surface */ .ai-agent-card-shimmer-track { position: absolute; top: 0; left: -100%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent), transparent); pointer-events: none; z-index: 0; animation: aiCardShimmerDrift 8s cubic-bezier(0.22, 1, 0.36, 1) infinite; animation-delay: var(--shimmer-delay, 0s); } @keyframes aiCardShimmerDrift { 0% { left: -100%; } 40% { left: 200%; } 100% { left: 200%; } } .ai-agent-card > :not(.ai-agent-card-shimmer-track):not(.ai-agent-card-accent) { position: relative; z-index: 1; } .ai-agent-card.is-visible { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); } .ai-agent-card.is-visible .ai-agent-card-accent { opacity: 1; } .ai-agent-card.is-visible::before { opacity: 1; } /* Hover — elevated with dramatic glow increase */ .ai-agent-card:hover { border-color: color-mix(in srgb, var(--blurple) 28%, transparent); transform: translateY(-4px) scale(1.005); box-shadow: 0 0 80px 15px color-mix(in srgb, var(--blurple) 6%, transparent), 0 20px 60px -8px color-mix(in srgb, var(--blurple) 10%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 15%, transparent), 0 2px 8px rgba(0,0,0,0.4); } /* Exit — upward fade with perspective */ .ai-agent-card.is-exiting { opacity: 0; transform: translateY(-16px) scale(0.96) rotateX(-2deg); transition: opacity 0.25s cubic-bezier(0.55, 0, 1, 0.45), transform 0.25s cubic-bezier(0.55, 0, 1, 0.45); } /* Card Head */ .ai-agent-card-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; } .ai-agent-status-dot-wrap { position: relative; width: 8px; height: 8px; flex-shrink: 0; } .ai-agent-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #818cf8; flex-shrink: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 70%, transparent); animation: aiCardDotPulse 2.6s ease-in-out infinite; } @keyframes aiCardDotPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 70%, transparent); } 50% { opacity: 0.4; box-shadow: 0 0 16px color-mix(in srgb, var(--blurple) 40%, transparent); } } /* Status ring — pulsing ring around the status dot */ .ai-agent-status-ring { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 25%, transparent); top: 50%; left: 50%; transform: translate(-50%, -50%); animation: aiStatusRingPulse 3s ease-in-out infinite; } @keyframes aiStatusRingPulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } } .ai-agent-card-name { font-size: 0.72rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.015em; } .ai-agent-card-badge { margin-left: auto; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: 4px; } .ai-badge-buyer { color: #34d399; background: color-mix(in srgb, #10b981 10%, transparent); border: 0.5px solid color-mix(in srgb, #10b981 18%, transparent); } .ai-badge-seller { color: #818cf8; background: color-mix(in srgb, var(--blurple) 10%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent); } /* Card Body — the typewriter star */ .ai-agent-card-body { font-size: 0.84rem; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); line-height: 1.6; min-height: 2.6em; margin-bottom: 1rem; letter-spacing: 0.005em; } .ai-agent-card-cursor { display: inline-block; width: 2px; height: 1.05em; background: #818cf8; margin-left: 2px; vertical-align: text-bottom; border-radius: 1px; animation: aiCursorBlink 0.9s step-end infinite; } @keyframes aiCursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Card Footer — metadata tags, pinned to bottom */ .ai-agent-card-footer { display: none; } .ai-agent-card-tag { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); padding: 0.2rem 0.6rem; border-radius: 5px; } .ai-agent-card-footer-sep { opacity: 0.35; } /* ── Agent Viz Types ── */ .ai-agent-viz { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .ai-agent-viz::-webkit-scrollbar { display: none; } /* --- Checklist viz --- */ .ai-viz-check-row { display: flex; align-items: center; gap: 0.5rem; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-check-row.is-checked { opacity: 1; transform: translateX(0); } .ai-viz-check-icon { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); flex-shrink: 0; position: relative; transition: border-color 0.3s ease, background 0.3s ease; } .ai-viz-check-row.is-checked .ai-viz-check-icon { border-color: color-mix(in srgb, var(--blurple) 60%, transparent); background: color-mix(in srgb, var(--blurple) 12%, transparent); } .ai-viz-check-icon::after { content: ''; position: absolute; top: 3px; left: 4.5px; width: 4px; height: 7px; border: solid color-mix(in srgb, var(--blurple) 80%, transparent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .ai-viz-check-row.is-checked .ai-viz-check-icon::after { transform: rotate(45deg) scale(1); } .ai-viz-check-text { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); transition: color 0.3s ease; } .ai-viz-check-row.is-checked .ai-viz-check-text { color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent); } /* --- Bars viz --- */ .ai-agent-viz--bars { gap: 0.45rem; } .ai-viz-bar-row { display: grid; grid-template-columns: 72px 1fr 32px; align-items: center; gap: 0.4rem; padding: 0.15rem 0; } .ai-viz-bar-label { font-size: 0.6rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-viz-bar-track { height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); overflow: hidden; } .ai-viz-bar-fill { height: 100%; width: 0%; border-radius: 100px; background: linear-gradient(90deg, color-mix(in srgb, var(--blurple) 60%, transparent), var(--blurple)); transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 8px color-mix(in srgb, var(--blurple) 35%, transparent); } .ai-viz-bar-val { font-size: 0.62rem; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); text-align: right; } /* --- Metrics viz --- */ .ai-agent-viz--metrics { flex-direction: row; justify-content: space-around; align-items: center; gap: 0.75rem; padding: 0.5rem 0; } .ai-viz-metric-block { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .ai-viz-metric-num { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--inv-bg-color) 0%, color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ai-viz-metric-label { font-size: 0.58rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); } /* --- Chat viz --- */ .ai-agent-viz--chat { gap: 0.2rem; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .ai-agent-viz--chat::-webkit-scrollbar { display: none; } .ai-viz-chat-msg { opacity: 0; transform: translateY(6px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-chat-msg.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-chat-user { display: flex; justify-content: flex-end; } .ai-viz-chat-user .ai-viz-chat-text { background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 10%, transparent), color-mix(in srgb, var(--blurple) 6%, transparent)); border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent); border-radius: 8px 8px 2px 8px; padding: 0.25rem 0.5rem; font-size: 0.56rem; color: color-mix(in srgb, var(--inv-bg-color) 68%, transparent); display: inline-block; max-width: 88%; } .ai-viz-chat-ai { display: flex; justify-content: flex-start; } .ai-viz-chat-ai .ai-viz-chat-text { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-radius: 8px 8px 8px 2px; padding: 0.25rem 0.5rem; font-size: 0.56rem; color: color-mix(in srgb, var(--inv-bg-color) 58%, transparent); display: inline-block; max-width: 88%; line-height: 1.45; } /* --- Captured indicator (data flowing to journey record) --- */ .ai-viz-chat-captured { display: block; padding: 0 0.1rem; } .ai-viz-captured-tag { display: block; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.03em; color: #34d399; background: color-mix(in srgb, #10b981 6%, transparent); border-left: 2.5px solid #10b981; padding: 0.15rem 0.45rem; border-radius: 0 3px 3px 0; } /* --- Source indicator (media type being processed) --- */ .ai-viz-source { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; margin-bottom: 0.25rem; border-radius: 6px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .ai-viz-source-icon { color: color-mix(in srgb, var(--blurple) 70%, transparent); flex-shrink: 0; display: flex; align-items: center; } .ai-viz-source-label { font-size: 0.58rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); letter-spacing: 0.02em; } /* Audio waveform indicator */ .ai-viz-source-wave { margin-left: auto; display: flex; align-items: center; gap: 1.5px; height: 14px; } .ai-viz-wave-bar { width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--blurple) 55%, transparent); animation: aiWaveBar 1s ease-in-out infinite; animation-delay: calc(var(--wave-i, 0) * 0.12s); } @keyframes aiWaveBar { 0%, 100% { height: 3px; } 50% { height: 11px; } } /* --- Typewriter viz (existing body/cursor) --- */ .ai-agent-viz--typewriter { min-height: 40px; } /* --- Enhanced chat: mapping tags (Discovery↔Scope) --- */ .ai-viz-mapping-tag { display: block; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.03em; color: #a78bfa; background: color-mix(in srgb, #7c3aed 6%, transparent); border-left: 2.5px solid #7c3aed; padding: 0.15rem 0.45rem; border-radius: 0 3px 3px 0; } /* --- Enhanced chat: value-case tags (argument building) --- */ .ai-viz-valuecase-tag { display: block; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.03em; color: #fbbf24; background: color-mix(in srgb, #f59e0b 6%, transparent); border-left: 2.5px solid #f59e0b; padding: 0.15rem 0.45rem; border-radius: 0 3px 3px 0; } /* --- Enhanced chat: action button --- */ .ai-viz-action-btn { display: inline-block; font-size: 0.52rem; font-weight: 700; color: color-mix(in srgb, var(--blurple) 90%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 12%, transparent), color-mix(in srgb, var(--blurple) 6%, transparent)); border: 0.5px solid color-mix(in srgb, var(--blurple) 25%, transparent); padding: 0.2rem 0.6rem; border-radius: 5px; cursor: default; } /* --- Enhanced chat: research pipeline indicators --- */ .ai-viz-chat-research { display: flex; justify-content: flex-start; } .ai-viz-chat-research .ai-viz-chat-text { background: color-mix(in srgb, var(--blurple) 4%, transparent); border: none; border-left: 2px solid color-mix(in srgb, var(--blurple) 30%, transparent); font-size: 0.52rem; font-style: italic; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); padding: 0.12rem 0.4rem; border-radius: 0 4px 4px 0; } /* --- Field Capture viz (Smart Conversation) --- */ .ai-agent-viz--fieldCapture { gap: 0.2rem; } /* Section icon (replaces emojis) */ .ai-viz-sec-icon { display: inline-flex; align-items: center; margin-right: 0.3rem; color: #818cf8; vertical-align: middle; flex-shrink: 0; } .ai-viz-sec-icon svg { display: block; } /* Ingest viz (Think & Sync) — pipeline layout */ .ai-viz-ingest-phase { position: relative; padding-left: 1.1rem; padding-bottom: 0.4rem; } .ai-viz-ingest-phase::before { content: ''; position: absolute; left: 0.32rem; top: 0.7rem; bottom: 0; width: 1px; background: rgba(129, 140, 248, 0.18); transition: background 0.4s ease; } .ai-viz-ingest-phase.is-active::before { background: rgba(129, 140, 248, 0.4); } .ai-viz-ingest-phase:last-child::before { display: none; } .ai-viz-ingest-phase-dot { position: absolute; left: 0.1rem; top: 0.15rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border: 1.5px solid rgba(129, 140, 248, 0.35); transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } .ai-viz-ingest-phase.is-active .ai-viz-ingest-phase-dot { background: rgba(129, 140, 248, 0.25); border-color: #818cf8; box-shadow: 0 0 6px rgba(129, 140, 248, 0.3); } .ai-viz-ingest-phase-label { font-size: 0.45rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(129, 140, 248, 0.5); margin-bottom: 0.25rem; transition: color 0.4s ease; } .ai-viz-ingest-phase.is-active .ai-viz-ingest-phase-label { color: #818cf8; } .ai-viz-ingest-strip { display: flex; flex-wrap: wrap; gap: 0.25rem; } .ai-viz-ingest-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.4rem; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 0.5px solid rgba(129, 140, 248, 0.15); border-radius: 20px; opacity: 0; transform: scale(0.9); transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-ingest-chip.is-visible { opacity: 1; transform: scale(1); } .ai-viz-ingest-chip-label { font-size: 0.52rem; font-weight: 600; color: #c4b5fd; white-space: nowrap; } .ai-viz-ingest-icon { flex-shrink: 0; color: #818cf8; display: flex; align-items: center; } .ai-viz-ingest-processing { font-size: 0.5rem; font-weight: 500; color: #64748b; font-style: italic; opacity: 0; transition: opacity 0.4s ease; } .ai-viz-ingest-processing.is-visible { opacity: 1; } .ai-viz-capture-header { font-size: 0.48rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); padding-bottom: 0.15rem; border-bottom: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-bottom: 0.1rem; } .ai-viz-capture-field { background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-left: 2.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 0 6px 6px 0; padding: 0.3rem 0.45rem; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, background 0.4s ease; } .ai-viz-capture-field.is-captured { opacity: 1; transform: translateX(0); } .ai-viz-capture-field[data-status="captured"].is-captured { border-left-color: #10b981; background: color-mix(in srgb, #10b981 3%, transparent); } .ai-viz-capture-field[data-status="pending"].is-captured { border-left-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-left-style: dashed; } .ai-viz-capture-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.1rem; } .ai-viz-capture-label > span:first-child { font-size: 0.56rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); } .ai-viz-capture-status { font-size: 0.46rem; font-weight: 700; letter-spacing: 0.03em; } .ai-viz-capture-field[data-status="captured"] .ai-viz-capture-status { color: #34d399; } .ai-viz-capture-field[data-status="pending"] .ai-viz-capture-status { color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent); } .ai-viz-capture-value { font-size: 0.52rem; color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); line-height: 1.4; } .ai-viz-capture-empty { font-size: 0.48rem; font-style: italic; color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent); } /* --- Enhanced bars: owner + status columns --- */ .ai-viz-bar-row--extended { grid-template-columns: 68px 48px 1fr 28px 18px; } .ai-viz-bar-owner { font-size: 0.52rem; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-viz-bar-status { font-size: 0.6rem; text-align: center; line-height: 1; } /* --- Document viz (meeting prep, call plan) --- */ .ai-agent-viz--document { gap: 0.1rem; } .ai-viz-doc-section { opacity: 0; transform: translateX(-10px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); padding: 0.25rem 0.35rem; border-left: 2px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-left: 0.15rem; } .ai-viz-doc-section.is-visible { opacity: 1; transform: translateX(0); border-left-color: color-mix(in srgb, var(--blurple) 25%, transparent); } .ai-viz-doc-header { font-size: 0.6rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); margin-bottom: 0.1rem; } .ai-viz-doc-content { font-size: 0.54rem; color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); line-height: 1.45; white-space: pre-line; } .ai-viz-doc-sub { font-size: 0.5rem; color: color-mix(in srgb, var(--blurple) 65%, transparent); margin-top: 0.1rem; padding-left: 0.5rem; border-left: 1.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); white-space: pre-line; line-height: 1.4; } /* --- Review viz (Think & Sync, Propose Scope) --- */ .ai-agent-viz--review { gap: 0.25rem; } .ai-viz-review-step1 { font-size: 0.52rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); font-style: italic; padding: 0.2rem 0.4rem; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border-radius: 4px; opacity: 0; transition: opacity 0.4s ease; } .ai-viz-review-step1.is-visible { opacity: 1; } .ai-viz-review-card { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 6px; padding: 0.3rem 0.4rem; margin-top: 0.2rem; opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-review-card.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-review-field { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent); display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.1rem; } .ai-viz-review-conf { font-size: 0.48rem; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--blurple) 85%, transparent); background: color-mix(in srgb, var(--blurple) 10%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 15%, transparent); padding: 0.06rem 0.35rem; border-radius: 10px; margin-left: 0.3rem; } .ai-viz-review-value { font-size: 0.5rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); margin-bottom: 0.15rem; line-height: 1.35; } .ai-viz-review-btns { display: flex; gap: 0.3rem; } .ai-viz-review-btn { font-size: 0.46rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 10px; cursor: default; } .ai-viz-review-btn--approve { color: #34d399; background: color-mix(in srgb, #10b981 8%, transparent); border: 0.5px solid color-mix(in srgb, #10b981 20%, transparent); } .ai-viz-review-btn--deny { color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } /* Status badges for review cards */ .ai-viz-review-card[data-status="included"]::before, .ai-viz-review-card[data-status="approve"]::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2.5px; border-radius: 6px 0 0 6px; background: #10b981; } .ai-viz-review-card[data-status="excluded"]::before, .ai-viz-review-card[data-status="deny"]::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2.5px; border-radius: 6px 0 0 6px; background: #ef4444; } .ai-viz-review-card[data-status="potential"]::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 2.5px; border-radius: 6px 0 0 6px; background: #f59e0b; } .ai-viz-review-card[data-status] { position: relative; padding-left: 0.6rem; } /* --- Report viz (Execution Readiness) --- */ .ai-agent-viz--report { gap: 0.15rem; } .ai-viz-report-section { padding: 0.25rem 0.35rem; border-left: 2px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); margin-left: 0.1rem; opacity: 0; transform: translateY(6px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-report-section.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-report-header { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 68%, transparent); margin-bottom: 0.08rem; } .ai-viz-report-line { font-size: 0.52rem; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); line-height: 1.45; padding-left: 0.3rem; } .ai-viz-report-highlight { background: color-mix(in srgb, var(--blurple) 5%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 14%, transparent); border-left: 2.5px solid color-mix(in srgb, var(--blurple) 50%, transparent); border-radius: 0 5px 5px 0; padding: 0.3rem 0.4rem; margin-left: 0; } .ai-viz-report-highlight .ai-viz-report-header { color: color-mix(in srgb, var(--blurple) 85%, var(--inv-bg-color)); } /* --- Assignment viz (Assign Owners) --- */ .ai-agent-viz--assignment { gap: 0.2rem; } .ai-viz-assign-card { background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); border-left: 2.5px solid color-mix(in srgb, var(--blurple) 30%, transparent); border-radius: 0 6px 6px 0; padding: 0.3rem 0.45rem; opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-assign-card.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-assign-module { font-size: 0.5rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.15rem; } .ai-viz-assign-person { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent); margin-bottom: 0.05rem; } .ai-viz-assign-detail { font-size: 0.48rem; color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent); margin-bottom: 0.15rem; } .ai-viz-assign-btns { display: flex; gap: 0.3rem; } .ai-viz-assign-btn { font-size: 0.46rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 3px; color: color-mix(in srgb, var(--blurple) 85%, transparent); background: color-mix(in srgb, var(--blurple) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 18%, transparent); cursor: default; } .ai-viz-assign-btn--alt { color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .ai-viz-assign-progress { font-size: 0.52rem; font-weight: 600; color: #34d399; text-align: center; padding: 0.15rem 0; opacity: 0; transition: opacity 0.4s ease; } .ai-viz-assign-progress.is-visible { opacity: 1; } /* --- Dashboard viz (Cheat Sheet) --- */ .ai-agent-viz--dashboard { gap: 0.15rem; } .ai-viz-dash-section { display: flex; flex-direction: column; padding: 0.2rem 0.35rem; background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border-radius: 4px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; } .ai-viz-dash-section.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-dash-header { font-size: 0.58rem; font-weight: 700; color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent); } .ai-viz-dash-content { font-size: 0.5rem; color: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); line-height: 1.4; white-space: pre-line; padding-left: 0.25rem; } /* --- Gantt viz (AI Navigator) --- */ .ai-viz-gantt-header { display: flex; justify-content: space-between; padding: 0 0 0.3rem 4.35rem; } .ai-viz-gantt-month { font-size: 0.42rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--inv-bg-color) 25%, transparent); flex: 1; text-align: center; } .ai-viz-gantt-body { position: relative; display: flex; flex-direction: column; gap: 0.3rem; } .ai-viz-gantt-today { position: absolute; top: 0; bottom: 0; width: 1.5px; background: #818cf8; z-index: 2; opacity: 0; transform: scaleY(0); transform-origin: top; transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-today.is-visible { opacity: 1; transform: scaleY(1); } .ai-viz-gantt-today::before { content: 'Today'; position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); font-size: 0.38rem; font-weight: 700; color: #818cf8; letter-spacing: 0.04em; white-space: nowrap; } .ai-viz-gantt-row { display: flex; align-items: center; gap: 0.35rem; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-row.is-visible { opacity: 1; transform: translateX(0); } .ai-viz-gantt-label { width: 4rem; flex-shrink: 0; font-size: 0.5rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ai-viz-gantt-track { flex: 1; height: 1.1rem; position: relative; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border-radius: 3px; overflow: hidden; } .ai-viz-gantt-bar { position: absolute; top: 1px; bottom: 1px; left: var(--gantt-left, 0%); width: var(--gantt-width, 30%); border-radius: 2px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); overflow: hidden; } .ai-viz-gantt-bar[data-status="complete"] { border-color: rgba(16, 185, 129, 0.3); background: rgba(16, 185, 129, 0.08); } .ai-viz-gantt-bar[data-status="active"] { border-color: rgba(129, 140, 248, 0.3); background: rgba(129, 140, 248, 0.08); } .ai-viz-gantt-bar[data-status="warning"] { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); } .ai-viz-gantt-bar[data-status="upcoming"] { border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .ai-viz-gantt-fill { height: 100%; width: 0%; border-radius: 2px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-fill.is-filled { width: var(--gantt-progress, 0%); } .ai-viz-gantt-bar[data-status="complete"] .ai-viz-gantt-fill { background: rgba(16, 185, 129, 0.35); } .ai-viz-gantt-bar[data-status="active"] .ai-viz-gantt-fill { background: rgba(129, 140, 248, 0.35); } .ai-viz-gantt-bar[data-status="warning"] .ai-viz-gantt-fill { background: rgba(245, 158, 11, 0.3); } .ai-viz-gantt-bar[data-status="upcoming"] .ai-viz-gantt-fill { background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } /* Gantt guidance callouts */ .ai-viz-gantt-guidance { margin-top: 0.4rem; padding-top: 0.35rem; border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); display: flex; flex-direction: column; gap: 0.2rem; } .ai-viz-gantt-guidance-line { display: flex; align-items: flex-start; gap: 0.3rem; font-size: 0.48rem; line-height: 1.35; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); opacity: 0; transform: translateY(4px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-viz-gantt-guidance-line.is-visible { opacity: 1; transform: translateY(0); } .ai-viz-gantt-guidance-icon { flex-shrink: 0; display: inline-flex; align-items: center; margin-top: 0.05rem; } .ai-viz-gantt-guidance-line[data-level="warning"] .ai-viz-gantt-guidance-icon { color: #f59e0b; } .ai-viz-gantt-guidance-line[data-level="info"] .ai-viz-gantt-guidance-icon { color: #818cf8; } .ai-viz-gantt-guidance-line[data-level="action"] .ai-viz-gantt-guidance-icon { color: #10b981; } .ai-viz-gantt-guidance-text { flex: 1; } /* Cross Journeys View — Carousel Panels */ .ai-cross-carousel { position: relative; max-width: 720px; margin: 0 auto; } .ai-cross-slides { min-height: 360px; } .ai-cross-panel { padding: 1.25rem 1.5rem; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 14px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .ai-cross-panel-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; color: var(--blurple); } .ai-cross-panel-title { font-size: 0.82rem; font-weight: 600; color: var(--inv-bg-color); } .ai-cross-panel-sub { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent); margin-left: 0.25rem; } .ai-cross-panel-inner { max-width: 620px; margin: 0 auto; } .ai-cross-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } .ai-cross-1col { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; } /* Carousel bullet overrides (scoped) */ .ai-cross-carousel .carousel-bullets { margin-top: 1rem; gap: 10px; } .ai-cross-carousel .carousel-bullet { width: 12px; height: 12px; } .ai-cross-carousel .carousel-bullet::before { width: 8px; height: 8px; left: 2px; top: 2px; } /* Carousel arrows */ .ai-cross-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border-radius: 50%; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; z-index: 3; padding: 0; } .ai-cross-arrow:hover { color: var(--blurple); border-color: color-mix(in srgb, var(--blurple) 30%, transparent); background: color-mix(in srgb, var(--blurple) 6%, transparent); } .ai-cross-arrow--left { left: -2.75rem; } .ai-cross-arrow--right { right: -2.75rem; } .ai-cross-arrow svg { width: 14px; height: 14px; } /* Nav labels */ .ai-cross-nav-labels { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.72rem; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); } .ai-cross-nav-label { cursor: pointer; transition: color 0.25s ease; padding: 0.15rem 0; } .ai-cross-nav-label.is-active { color: var(--blurple); font-weight: 600; } .ai-cross-nav-sep { color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); } /* ── Hub 1: Chat Simulation ── */ .ai-cross-chat-sim { display: flex; flex-direction: column; gap: 0.6rem; } .ai-chat-sim-msg { opacity: 0; transform: translateY(10px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .ai-chat-sim-msg.is-visible { opacity: 1; transform: translateY(0); } .ai-chat-sim-user { display: flex; justify-content: flex-end; } .ai-chat-sim-bubble-user { background: color-mix(in srgb, var(--blurple) 14%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); border-radius: 12px 12px 2px 12px; padding: 0.55rem 0.8rem; max-width: 80%; } .ai-chat-sim-text { font-size: 0.78rem; color: var(--inv-bg-color); margin: 0; min-height: 1.15em; } .ai-chat-sim-bubble-ai { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 12px 12px 12px 2px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; } .ai-chat-sim-label { font-size: 0.65rem; font-weight: 600; color: var(--blurple); margin: 0; letter-spacing: 0.02em; } .ai-chat-sim-insight { font-size: 0.74rem; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent); margin: 0; line-height: 1.5; } .ai-chat-sim-insight strong { color: var(--inv-bg-color); } /* Inline chart in chat */ .ai-chat-sim-chart { width: 100%; max-width: 240px; height: auto; display: block; } .ai-chat-bar { transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-chat-bar[data-bar-color="pos"] { fill: color-mix(in srgb, #10b981 60%, transparent); } .ai-chat-bar[data-bar-color="warn"] { fill: color-mix(in srgb, #fbbf24 55%, transparent); } .ai-chat-bar[data-bar-color="neg"] { fill: color-mix(in srgb, #f87171 55%, transparent); } .ai-chat-bar-label { font-size: 8px; fill: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); } /* Chat action pills */ .ai-chat-sim-actions { display: flex; gap: 0.4rem; } .ai-chat-sim-btn { font-size: 0.65rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 6px; border: 0.5px solid color-mix(in srgb, var(--blurple) 30%, transparent); background: color-mix(in srgb, var(--blurple) 8%, transparent); color: var(--blurple); cursor: default; opacity: 0; transition: opacity 0.4s ease; } .ai-chat-sim-btn.is-visible { opacity: 1; } /* Typing indicator */ .ai-chat-sim-typing { display: flex; gap: 4px; padding: 0 0.3rem; opacity: 0; transition: opacity 0.3s ease; } .ai-chat-sim-typing.is-visible { opacity: 1; } .ai-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); animation: aiTypingPulse 1.4s infinite ease-in-out; } .ai-typing-dot:nth-child(2) { animation-delay: 0.2s; } .ai-typing-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes aiTypingPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } /* ── Hub 1: Predictive Intelligence ── */ .ai-cross-predict { display: flex; flex-direction: column; gap: 0.6rem; } .ai-predict-header { display: flex; align-items: baseline; gap: 0.4rem; opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-predict-header.is-visible { opacity: 1; transform: translateY(0); } .ai-predict-journey-name { font-size: 0.82rem; font-weight: 600; color: var(--inv-bg-color); } .ai-predict-template { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); } .ai-predict-prob { display: flex; flex-direction: column; gap: 0.3rem; } .ai-predict-prob-label { font-size: 0.78rem; font-weight: 700; color: var(--inv-bg-color); } .ai-predict-duration { font-size: 0.72rem; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); margin: 0; } .ai-predict-signals-title { font-size: 0.65rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); text-transform: uppercase; letter-spacing: 0.06em; margin: 0.3rem 0 0; } .ai-predict-trust { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); border-top: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); padding-top: 0.5rem; margin: 0; opacity: 0; transition: opacity 0.5s ease; } .ai-predict-trust.is-visible { opacity: 1; } /* ── Hub 2: Data Explorer ── */ .ai-explorer-prompt { display: flex; align-items: center; gap: 0.5rem; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 8px; padding: 0.6rem 1rem; max-width: 480px; width: 100%; } .ai-explorer-prompt-icon { flex-shrink: 0; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); } .ai-explorer-prompt-text { font-size: 0.78rem; color: var(--inv-bg-color); min-height: 1.2em; } .ai-explorer-cursor { width: 2px; height: 1em; background: var(--blurple); animation: aiCursorBlink 1s step-end infinite; flex-shrink: 0; } .ai-explorer-result-stage { position: relative; min-height: 200px; width: 100%; max-width: 480px; } .ai-explorer-result { opacity: 0; transform: translateY(12px); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none; } .ai-explorer-result.is-visible { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; } .ai-explorer-big-num { font-size: 3.5rem; font-weight: 800; letter-spacing: -0.04em; color: var(--blurple); line-height: 1; font-variant-numeric: tabular-nums; } .ai-explorer-trend { display: flex; align-items: center; gap: 0.3rem; color: #10b981; } .ai-explorer-trend-label { font-size: 0.72rem; font-weight: 500; } .ai-explorer-funnel-title { font-size: 0.72rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); margin: 0 0 0.3rem; align-self: flex-start; } .ai-funnel-svg { width: 100%; max-width: 360px; height: auto; display: block; } .ai-funnel-bar { fill: color-mix(in srgb, var(--blurple) 50%, transparent); transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-funnel-label { font-size: 8px; fill: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); } /* ── Hub 3: Success Hub ── */ .ai-success-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.75rem; } .ai-success-stat-card { text-align: center; padding: 0.6rem 0.4rem; border-radius: 8px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); opacity: 0; transform: translateY(8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-success-stat-card.is-visible { opacity: 1; transform: translateY(0); } .ai-success-stat-card:nth-child(2) { transition-delay: 0.08s; } .ai-success-stat-card:nth-child(3) { transition-delay: 0.16s; } .ai-success-stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; display: block; } .ai-success-stat-label { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); } .ai-success-stat-card[data-stat="open"] .ai-success-stat-value { color: #f87171; } .ai-success-stat-card[data-stat="progress"] .ai-success-stat-value { color: #fbbf24; } .ai-success-stat-card[data-stat="resolved"] .ai-success-stat-value { color: #10b981; } .ai-success-trend-svg { width: 100%; max-width: 280px; height: auto; display: block; } .ai-success-trend-line { fill: none; stroke: var(--blurple); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .ai-success-trend-line.is-drawn { stroke-dashoffset: 0; } .ai-success-trend-base { stroke: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); stroke-width: 0.5; } .ai-success-caption { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); margin: 0.3rem 0 0; } .ai-success-caption strong { color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); } /* Ticket rows inside carousel panels — animated */ .ai-cross-panel .ai-ticket-row { opacity: 0; transform: translateX(12px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .ai-cross-panel .ai-ticket-row.is-visible { opacity: 1; transform: translateX(0); } .ai-cross-panel .ai-ticket-row:nth-child(2) { transition-delay: 0.08s; } .ai-cross-panel .ai-ticket-row:nth-child(3) { transition-delay: 0.16s; } .ai-cross-panel .ai-ticket-row:nth-child(4) { transition-delay: 0.24s; } .ai-cross-panel .ai-hub-integrations { opacity: 0; transition: opacity 0.5s ease 0.4s; } .ai-cross-panel .ai-hub-integrations.is-visible { opacity: 1; } /* Pivot table mini */ .ai-hub-pivot { display: flex; flex-direction: column; gap: 0; border-radius: 6px; overflow: hidden; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .ai-pivot-row { display: grid; grid-template-columns: 1fr repeat(3, 42px); gap: 0; padding: 0.3rem 0.5rem; font-size: 0.68rem; text-align: center; } .ai-pivot-row:nth-child(even) { background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); } .ai-pivot-header-row { font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.6rem; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); } .ai-pivot-label { text-align: left; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); font-weight: 500; } .ai-pivot-val { color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); font-variant-numeric: tabular-nums; } .ai-pivot-pos { color: #10b981; font-weight: 600; } .ai-pivot-neg { color: color-mix(in srgb, #f87171 80%, transparent); } /* Ticket list mini */ .ai-hub-tickets { display: flex; flex-direction: column; gap: 0.4rem; } .ai-ticket-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; } .ai-ticket-badge { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .ai-ticket-open { background: #f87171; } .ai-ticket-progress { background: #fbbf24; } .ai-ticket-resolved { background: #10b981; } .ai-ticket-text { color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ai-ticket-age { color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); font-size: 0.62rem; font-variant-numeric: tabular-nums; flex-shrink: 0; } .ai-hub-integrations { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; } .ai-hub-int-label { font-size: 0.62rem; color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); } .ai-hub-int-tag { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); border-radius: 4px; padding: 0.12rem 0.4rem; } /* Thread lines (reused inside hub cards) */ .ai-threads-svg { width: 100%; height: auto; display: block; } .ai-thread-line { stroke: color-mix(in srgb, var(--blurple) 35%, transparent); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .ai-thread-line[data-thread="1"] { transition-delay: 0.1s; } .ai-thread-line[data-thread="2"] { transition-delay: 0.18s; } .ai-thread-line[data-thread="3"] { transition-delay: 0.28s; } .ai-thread-line[data-thread="4"] { transition-delay: 0.38s; } .ai-thread-line.is-drawn { stroke-dashoffset: 0; } .ai-thread-dot { fill: var(--blurple); opacity: 0; transition: opacity 0.4s ease; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--blurple) 80%, transparent)); } .ai-thread-dot[data-thread="0"].is-visible { transition-delay: 0.7s; } .ai-thread-dot[data-thread="1"].is-visible { transition-delay: 0.82s; } .ai-thread-dot[data-thread="2"].is-visible { transition-delay: 0.9s; } .ai-thread-dot[data-thread="3"].is-visible { transition-delay: 1.0s; } .ai-thread-dot[data-thread="4"].is-visible { transition-delay: 1.1s; } .ai-thread-dot.is-visible { opacity: 1; } /* (thread-names, org-bubble, ml-col, ml-card removed — replaced by hub cards) */ .ai-ml-bar-track { height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); margin-bottom: 0.45rem; overflow: hidden; } .ai-ml-bar-fill { height: 100%; width: 0%; border-radius: 100px; background: linear-gradient(90deg, var(--blurple), color-mix(in srgb, var(--lightblue) 80%, var(--blurple))); transition: width 1.2s cubic-bezier(0.34, 1.0, 0.64, 1); box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 50%, transparent); } .ai-ml-bar-label { font-size: 0.72rem; font-weight: 600; color: var(--inv-bg-color); } .ai-shap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .ai-shap-item { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 0.5rem; } .ai-shap-name { font-size: 0.68rem; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); white-space: nowrap; } .ai-shap-bar-wrap { height: 6px; border-radius: 100px; background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); overflow: hidden; } .ai-shap-bar { display: block; height: 100%; width: 0%; border-radius: 100px; transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .ai-shap-item[data-shap-dir="pos"] .ai-shap-bar { background: linear-gradient(90deg, color-mix(in srgb, #10b981 70%, transparent), #10b981); } .ai-shap-item[data-shap-dir="neg"] .ai-shap-bar { background: linear-gradient(90deg, color-mix(in srgb, #f87171 70%, transparent), #f87171); } .ai-shap-pct { font-size: 0.65rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .ai-shap-item[data-shap-dir="pos"] .ai-shap-pct { color: #10b981; } .ai-shap-item[data-shap-dir="neg"] .ai-shap-pct { color: #f87171; } /* Stagger delays for SHAP bars */ .ai-shap-item:nth-child(1) .ai-shap-bar { transition-delay: 0.0s; } .ai-shap-item:nth-child(2) .ai-shap-bar { transition-delay: 0.1s; } .ai-shap-item:nth-child(3) .ai-shap-bar { transition-delay: 0.2s; } .ai-shap-item:nth-child(4) .ai-shap-bar { transition-delay: 0.3s; } /* Footer */ /* ── Footer: Tier 1 — stat hero ── */ .ai-practice-footer { padding-top: 2.5rem; padding-bottom: 1.5rem; margin-top: 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 2rem; } .ai-practice-footer-hero { display: flex; align-items: center; gap: 1.25rem; max-width: 520px; } .ai-practice-stat { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--blurple); flex-shrink: 0; } .ai-practice-stat-copy { display: flex; flex-direction: column; gap: 0.25rem; } .ai-practice-stat-headline { font-size: 0.95rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 80%, transparent); margin: 0; line-height: 1.3; } .ai-practice-stat-sub { font-size: 0.78rem; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); margin: 0; line-height: 1.5; } /* ── Footer: Tier 2 — pillars + CTA ── */ .ai-practice-footer-mid { display: flex; align-items: center; gap: 1.5rem; } .ai-practice-pillars-row { display: flex; align-items: center; gap: 0.5rem; } .ai-practice-pillar-tag { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.03em; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); } .ai-practice-pillar-sep { color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); font-size: 0.72rem; } /* ── Footer: Tier 3 — legal strip ── */ .ai-practice-footer-legal { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; max-width: 680px; } .ai-practice-legal-tech-line { font-size: 0.55rem; font-weight: 400; letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 15%, transparent); line-height: 1.6; } /* Responsive */ @media (max-width: 768px) { .ai-practice-kicker { margin-bottom: 0.6rem; font-size: 0.6rem; letter-spacing: 0.3em; } .ai-practice-toggle-wrap { margin-bottom: 1.25rem; } .ai-practice-toggle { padding: 3px; } .ai-practice-toggle-btn { font-size: 0.65rem; padding: 0.35rem 0.75rem; gap: 0.3rem; } .ai-practice-toggle-btn svg { width: 12px; height: 12px; } .ai-stage-ring { padding: 1.25rem 1rem; } .ai-ring-nodes { gap: 0.65rem; } .ai-stage-node-label { font-size: 0.55rem; } .ai-agent-panel-inner { grid-template-columns: 1fr; height: 360px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; } .ai-agent-panel-inner::-webkit-scrollbar { display: none; } .ai-agent-card { padding: 0.7rem 0.85rem; } .ai-cross-2col { grid-template-columns: 1fr; gap: 1.2rem; } .ai-cross-arrow { display: none; } .ai-shap-item { grid-template-columns: 80px 1fr auto; gap: 0.5rem; } .ai-practice-footer-hero { flex-direction: column; text-align: center; gap: 0.75rem; } .ai-practice-footer-mid { flex-direction: column; gap: 1rem; } .ai-practice-footer-legal { flex-direction: column; gap: 0.35rem; text-align: center; } .ai-cross-nav-labels { font-size: 0.65rem; } .ai-explorer-big-num { font-size: 2.5rem; } } @media (max-width: 480px) { .ai-practice-toggle-btn { font-size: 0.58rem; padding: 0.3rem 0.6rem; } .ai-stage-node-label { display: none; } .ai-stage-ring { padding: 1rem 0.75rem; border-radius: 16px; } .ai-ring-nodes { gap: 0.4rem; } .ai-stage-node-dot { width: 28px; height: 28px; } .ai-stage-node::before, .ai-stage-node::after { width: 28px; height: 28px; top: 14px; } .ai-stage-context-name { font-size: 0.95rem; } .ai-stage-context-desc { font-size: 0.58rem; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .ai-thread-line, .ai-ml-bar-fill, .ai-shap-bar { transition: none !important; } .ai-ring-orbit::after { animation: none !important; display: none; } .ai-viz-check-row { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-viz-bar-fill { transition: none !important; } .ai-viz-chat-msg { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-viz-ingest-chip, .ai-viz-ingest-processing, .ai-viz-capture-field, .ai-viz-doc-section, .ai-viz-review-card, .ai-viz-review-step1, .ai-viz-report-section, .ai-viz-assign-card, .ai-viz-assign-progress, .ai-viz-dash-section, .ai-viz-gantt-row, .ai-viz-gantt-today, .ai-viz-gantt-guidance-line { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-viz-gantt-fill { width: var(--gantt-progress, 0%) !important; transition: none !important; } .ai-thread-line { stroke-dashoffset: 0; } .ai-agent-card { transition: none !important; opacity: 1; transform: none; } .ai-stage-node.is-active .ai-stage-node-dot, .ai-stage-node.is-active::before, .ai-stage-node.is-active::after { animation: none; } .ai-stage-node::before, .ai-stage-node::after { display: none; } .ai-stage-node-ring-outer, .ai-stage-node-ring-inner { animation: none !important; display: none; } .ai-agent-panel-scanline { animation: none !important; display: none; } .ai-agent-card-shimmer-track { animation: none !important; display: none; } .ai-agent-panel-glow-primary, .ai-agent-panel-glow-secondary { animation: none !important; } .ai-agent-card { transform: none !important; } .ai-agent-status-ring { animation: none !important; display: none; } .ai-stage-node:not(.is-active):not(.is-past) .ai-stage-node-dot { animation: none; } .ai-agent-card-accent { opacity: 1; } .ai-agent-card-cursor { animation: none; opacity: 1; } .ai-agent-status-dot, .ai-typing-dot { animation: none; } .ai-explorer-cursor { animation: none; opacity: 1; } .ai-chat-sim-msg, .ai-predict-header, .ai-predict-trust, .ai-explorer-result, .ai-success-stat-card, .ai-cross-panel .ai-ticket-row, .ai-cross-panel .ai-hub-integrations, .ai-chat-sim-btn { opacity: 1 !important; transform: none !important; transition: none !important; } .ai-chat-sim-typing { display: none; } .ai-chat-bar, .ai-funnel-bar, .ai-success-trend-line { transition: none !important; } .ai-success-trend-line { stroke-dashoffset: 0; } .meets-crm-bridge::before { animation: none !important; } } /* ============================================================ END AI IN PRACTICE SECTION ============================================================ */ /* ════════════════════════════════════════════════════════════════════ V6 HERO MICRO-PASS Just two primitives, scoped to the hero only: 1. .grad-text — CN blurple→purple gradient on inline text 2. .v6-btn / .v6-btn-primary / .v6-btn-ghost — premium pill CTAs Used in the hero headline ("Executable Journeys") and the two hero CTAs ("Get Started" + "How It Works"). Nothing else. ════════════════════════════════════════════════════════════════════ */.hero .grad-text, .surface-beat--navigate .grad-text{ background: linear-gradient(135deg, var(--blurple) 0%, var(--purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; display: inline; } /* Premium hero CTAs — a filled indigo→purple gradient primary that reads as the crown-jewel action, paired with a refined outline ghost. Real pill shape, padding and weight, a soft indigo glow, and a lift + arrow-slide on hover. Matches the /pricing and /get-started CTAs so the whole funnel feels of a piece. (Previously a deliberately quiet text-link PLG treatment — elevated because the homepage hero is the flagship surface.) */.hero .v6-btn, .surface-beat--navigate .v6-btn{ display: inline-flex; align-items: center; gap: 0.5rem; /* Text-forward CTAs — no fill, no border, no chip. Horizontal padding is 0.7rem so it matches the row's -0.7rem pull and the label sits flush-left with the headline; the radius exists only for the focus-visible ring. */ padding: 0.4rem 0.7rem; border-radius: 8px; font-family: var(--font-main); font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transform-origin: center; background: transparent; transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), background 240ms ease, color 240ms ease, border-color 240ms ease !important; }.hero .v6-btn svg, .surface-beat--navigate .v6-btn svg{ width: 16px; height: 16px; flex-shrink: 0; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } /* Primary: text-forward and unmistakably PLG — an ink label with a single indigo forward-arrow. No fill, no border, no chip. It reads as an invitation into the journey, not a transactional button; on hover the label warms to indigo and the arrow glides forward. The whole affordance is type + motion, never a container. */.hero .v6-btn-primary, .surface-beat--navigate .v6-btn-primary{ background: transparent; color: var(--inv-bg-color) !important; border-color: transparent; box-shadow: none; }.hero .v6-btn-primary:hover, .hero .v6-btn-primary:focus-visible, .surface-beat--navigate .v6-btn-primary:hover, .surface-beat--navigate .v6-btn-primary:focus-visible{ background: transparent; border-color: transparent; color: var(--purple) !important; box-shadow: none; }.hero .v6-btn-primary:hover svg, .hero .v6-btn-primary:focus-visible svg, .surface-beat--navigate .v6-btn-primary:hover svg, .surface-beat--navigate .v6-btn-primary:focus-visible svg{ transform: translateX(3px); } /* Secondary: even quieter — a muted text label, no arrow, no fill, no border. Simply brightens to full ink on hover. Keeps the pair exploratory. */.hero .v6-btn-ghost, .surface-beat--navigate .v6-btn-ghost{ background: transparent; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent) !important; border-color: transparent; }.hero .v6-btn-ghost:hover, .hero .v6-btn-ghost:focus-visible, .surface-beat--navigate .v6-btn-ghost:hover, .surface-beat--navigate .v6-btn-ghost:focus-visible{ background: transparent; color: var(--inv-bg-color) !important; } /* ─────────── V6 mockup panel (contains navigator-ring + stage card) ─────────── Glass card surface with a subtle 3D tilt at rest. Reads as a real SaaS-app window angled in space. Backdrop-filter is intentionally small (8px) so it adds the frosted-glass feel without fogging out the content underneath. */.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ position: relative; padding: clamp(18px, 2.6vw, 32px); border-radius: clamp(20px, 2.2vw, 28px); background: color-mix(in srgb, var(--main-bg-color) 46%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); /* Make room for the macOS-style window chrome bar that sits across the top. */ padding-top: calc(clamp(18px, 2.6vw, 32px) + 24px); box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent) inset, 0 6px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 32px 72px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), 0 64px 140px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); /* Subtle 3D tilt — like a real product screen sitting in space. 3° is mild enough that the orbital ring inside still reads as a circle (the foreshortening is barely perceptible). */ transform: perspective(1600px) rotateY(-3deg) rotateX(2deg); transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); isolation: isolate; }.hero .v6-mockup-panel:hover, .surface-beat--navigate .v6-mockup-panel:hover{ transform: perspective(1600px) rotateY(-1.5deg) rotateX(1deg) translateY(-2px); }.hero .v6-mockup-glow, .surface-beat--navigate .v6-mockup-glow{ position: absolute; inset: -8%; background: radial-gradient(38% 42% at 70% 18%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 65%), radial-gradient(38% 42% at 30% 82%, color-mix(in srgb, var(--blurple) 12%, transparent), transparent 65%); filter: blur(36px); z-index: -1; pointer-events: none; opacity: 0.8; } /* ─── macOS-style window chrome ─── Strip across the top of the .v6-mockup-panel with three traffic-light dots (red/yellow/green) like a desktop browser/native window. Sells the "this is a real product surface" framing. */.hero .v6-mockup-panel .v6-window-chrome, .surface-beat--navigate .v6-mockup-panel .v6-window-chrome{ position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-top-left-radius: inherit; border-top-right-radius: inherit; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); z-index: 25; pointer-events: none; }.hero .v6-mockup-panel .v6-traffic-light, .surface-beat--navigate .v6-mockup-panel .v6-traffic-light{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }.hero .v6-mockup-panel .v6-traffic-red, .surface-beat--navigate .v6-mockup-panel .v6-traffic-red{ background: #FF5F57; }.hero .v6-mockup-panel .v6-traffic-yellow, .surface-beat--navigate .v6-mockup-panel .v6-traffic-yellow{ background: #FEBC2E; }.hero .v6-mockup-panel .v6-traffic-green, .surface-beat--navigate .v6-mockup-panel .v6-traffic-green{ background: #28C840; } /* ═══════════════════════════════════════════════════════════════════ .v6-chrome-persona-toggle — Seller / Customer switcher ────────────────────────────────────────────────────────────────── Sits at the right end of the window chrome (margin-left:auto). The panel's `data-persona` attribute is the source of truth; CSS slides the thumb left/right based on that single attribute. Auto-cycle beat 6 clicks the Customer segment via the stage fx cursor; users can also click directly (the chrome opts-back-in to pointer events on the toggle while keeping the rest of the chrome inert). ════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-chrome-persona-toggle, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-toggle{ position: relative; margin-left: auto; display: inline-flex; align-items: stretch; height: 20px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); pointer-events: auto; font-family: var(--brand-font); } /* Hairline divider between the two segments so they don't visually merge into one label. Sits centered, above the thumb, below the text. Slightly inset top/bottom so it reads as a soft seam, not a hard slash. */.hero .v6-mockup-panel .v6-chrome-persona-toggle::after, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-toggle::after{ content: ""; position: absolute; top: 5px; bottom: 5px; left: 50%; width: 1px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); transform: translateX(-50%); pointer-events: none; z-index: 2; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-chrome-persona-seg, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-seg{ position: relative; z-index: 3; /* Equal widths so the thumb (50%) covers exactly one segment, and text sits centered in its half — labels of unequal length ("Seller" vs "Customer") don't pull the visual center off. */ flex: 1 1 0; min-width: 56px; padding: 0 4px; border: none; background: none; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); font-size: 9px; font-weight: 600; letter-spacing: -0.005em; line-height: 16px; text-align: center; cursor: pointer; transition: color 220ms ease; }.hero .v6-mockup-panel .v6-chrome-persona-thumb, .surface-beat--navigate .v6-mockup-panel .v6-chrome-persona-thumb{ position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--main-bg-color); box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 12%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease; z-index: 1; } /* When persona=guest, slide thumb to the right segment. */.hero .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-thumb, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-thumb{ transform: translateX(100%); background: color-mix(in srgb, var(--purple) 10%, var(--main-bg-color)); } /* Active segment label gets full ink color; the other one stays muted. */.hero .v6-mockup-panel[data-persona="host"] .v6-chrome-persona-seg[data-persona-set="host"], .hero .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="host"] .v6-chrome-persona-seg[data-persona-set="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"]{ color: var(--v6-ink); }.hero .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-chrome-persona-seg[data-persona-set="guest"]{ color: var(--purple); } /* The old per-stage persona pill is replaced by the chrome toggle. Keep the element in the DOM (cycle script still queries it for the segment text) but hide it visually. */.hero .v6-mockup-panel .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel .v6-persona-pill{ display: none !important; } /* ════════════════════════════════════════════════════════════════════ CREATE PANEL — AI tool selector lives IN the window chrome as a 3-segment toggle, mirroring the hero/navigate persona toggle. Segments carry .ai-tool-card + data-ai-tool, so the existing switchTool() handler binds and drives the panel. Thumb slides via :has() on the active card. ════════════════════════════════════════════════════════════════════ */ .surface-beat--create .surface-beat-mockup-panel .v6-chrome-tool-toggle { position: relative; margin-left: auto; display: inline-flex; align-items: stretch; height: 22px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); pointer-events: auto; font-family: var(--brand-font); z-index: 30; } .surface-beat--create .surface-beat-mockup-panel .v6-chrome-tool-seg { position: relative; z-index: 3; flex: 1 1 0; min-width: 56px; padding: 0 8px; border: none; background: none; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); font-size: 9px; font-weight: 600; letter-spacing: -0.005em; line-height: 18px; text-align: center; white-space: nowrap; cursor: pointer; transition: color 220ms ease; } .surface-beat--create .surface-beat-mockup-panel .v6-chrome-tool-seg.is-active { color: var(--blurple); } .surface-beat--create .surface-beat-mockup-panel .v6-chrome-tool-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / 3); border-radius: 999px; background: var(--main-bg-color); box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 12%, transparent), 0 0 0 0.5px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 1; } /* Thumb tracks the active segment (one segment-width per step). */ .surface-beat--create .surface-beat-mockup-panel .v6-chrome-tool-toggle:has(.ai-tool-card[data-ai-tool="editor"].is-active) .v6-chrome-tool-thumb { transform: translateX(100%); } .surface-beat--create .surface-beat-mockup-panel .v6-chrome-tool-toggle:has(.ai-tool-card[data-ai-tool="coach"].is-active) .v6-chrome-tool-thumb { transform: translateX(200%); } /* Entrance: swing-in tilt that composes with the panel's at-rest tilt. */.hero .hero-reveal-grand, .surface-beat--navigate .surface-beat--navigate-reveal-grand{ transform: perspective(1600px) rotateY(-10deg) rotateX(5deg) translateY(40px) scale(0.92) !important; filter: none !important; }body.is-loaded .hero .hero-reveal-grand, body.is-loaded .surface-beat--navigate .surface-beat--navigate-reveal-grand{ animation: heroGrand 1400ms cubic-bezier(0.16, 1, 0.3, 1) 350ms forwards !important; } @keyframes heroGrand { to { opacity: 1; transform: perspective(1600px) rotateY(0) rotateX(0) translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ transform: none !important; transition: none !important; } } /* ════════════════════════════════════════════════════════════════════ V6 HERO WIDGET — full state machine Drives the .v6-mockup-panel through six phases via [data-v6-phase]: boot → invisible, waiting for visibility trigger chaos → tool windows scatter + drift, confused avatar dissolve → everything collapses to center cn → CN logo materializes, "One platform" click → cursor clicks the logo, ripple ring → navigator-ring fills the panel (overview state) stage → a .v6-stage-panel zooms in (data-active-stage) success → "Stage complete" overlay flashes, then back to ring Builds on the existing CN navigator-ring (kept untouched, still in DOM) but the stage-progress-card is hidden — we render purpose-built per- stage panels that match the real SPA's design vocabulary. ════════════════════════════════════════════════════════════════════ */ /* Hide the legacy stage-progress-card — its content is replaced by .v6-stage-panel */.hero .v6-mockup-panel .stage-progress-card, .surface-beat--navigate .v6-mockup-panel .stage-progress-card{ display: none !important; } /* Bridge tokens for the SPA design vocabulary */.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ --v6-paper: var(--main-bg-color); --v6-paper-2: var(--off-bg-color); --v6-ink: var(--inv-bg-color); --v6-ink-2: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); --v6-ink-3: color-mix(in srgb, var(--inv-bg-color) 52%, transparent); --v6-hair: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); --v6-hair-strong: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); --v6-glass: color-mix(in srgb, var(--main-bg-color) 82%, transparent); --v6-glass-strong: color-mix(in srgb, var(--main-bg-color) 92%, transparent); --v6-grad-cn: linear-gradient(135deg, var(--blurple) 0%, var(--purple) 100%); --v6-spring: cubic-bezier(0.16, 1, 0.3, 1); --v6-ease: cubic-bezier(0.22, 1, 0.36, 1); --v6-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; } /* Navigator-ring entrance/exit driven by [data-v6-phase]. --v6-tilt mirrors the panel's own perspective+rotation so the ring (and everything inside it — nodes, center, stroke) sits on the same tilted plane as the panel surface. Phase rules below compose --v6-tilt with their scale so the tilt is preserved across the cycle. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ --v6-tilt: perspective(1600px) rotateY(-3deg) rotateX(2deg); transform: var(--v6-tilt); transition: opacity 700ms var(--v6-ease), transform 900ms var(--v6-spring), filter 480ms ease, --completion-percent 700ms cubic-bezier(0.22, 1, 0.36, 1); } /* Stage → ring transition: ring slides in from the left when JS adds the `.v6-ring-slide-in` class (during the between-stages advance). The ring's natural size can exceed the mockup panel's width, so sliding it with translateX would overflow the pseudo-screen frame and break physics. The companion `.has-ring-sliding` class on the panel itself flips overflow:hidden for the duration of the slide so the ring is clipped to the panel's rounded rect. */.hero .v6-mockup-panel.has-ring-sliding, .surface-beat--navigate .v6-mockup-panel.has-ring-sliding{ overflow: hidden; }.hero .v6-mockup-panel .navigator-ring.v6-ring-slide-in, .surface-beat--navigate .v6-mockup-panel .navigator-ring.v6-ring-slide-in{ animation: v6RingSlideIn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6RingSlideIn { 0% { transform: var(--v6-tilt) translateX(-60%); opacity: 0; } 100% { transform: var(--v6-tilt) translateX(0); opacity: 1; } } /* === Phase visibility orchestration === */.hero .v6-mockup-panel[data-v6-phase="boot"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="chaos"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="dissolve"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="cn"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="click"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="csn"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="boot"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="chaos"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .navigator-ring{ opacity: 0; transform: var(--v6-tilt) scale(0.85); filter: blur(8px); pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring, .hero .v6-mockup-panel[data-v6-phase="success"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .navigator-ring{ opacity: 0.18; transform: var(--v6-tilt) scale(0.74); filter: blur(3px); pointer-events: none; } /* === INTRO container — sits over everything else during phases 0-3 === */.hero .v6-mockup-panel .v6-intro, .surface-beat--navigate .v6-mockup-panel .v6-intro{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; color: var(--v6-ink); }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-intro, .hero .v6-mockup-panel[data-v6-phase="ring"] .v6-intro, .hero .v6-mockup-panel[data-v6-phase="stage"] .v6-intro, .hero .v6-mockup-panel[data-v6-phase="success"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-intro{ opacity: 0; pointer-events: none; transition: opacity 600ms var(--v6-ease); } /* --- Chaos phase --- */.hero .v6-mockup-panel .v6-intro-chaos, .surface-beat--navigate .v6-mockup-panel .v6-intro-chaos{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 600ms var(--v6-ease), transform 800ms var(--v6-spring), filter 480ms ease; }.hero .v6-mockup-panel[data-v6-phase="chaos"] .v6-intro-chaos, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="chaos"] .v6-intro-chaos{ opacity: 1; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-chaos, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-chaos{ opacity: 0; transform: scale(0.6); filter: blur(14px); } /* Tools positioned in the 4 corners of the chaos area via simple top/right/bottom/left + transform-based rotation + jitter. */.hero .v6-mockup-panel .v6-tool, .surface-beat--navigate .v6-mockup-panel .v6-tool{ position: absolute; display: flex; align-items: center; gap: 7px; padding: 7px 10px 7px 7px; max-width: 140px; background: var(--v6-glass); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid var(--v6-hair-strong); border-radius: 10px; box-shadow: 0 6px 18px color-mix(in srgb, var(--v6-ink) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--v6-ink) 6%, transparent); will-change: transform; }.hero .v6-mockup-panel .v6-tool-tl, .surface-beat--navigate .v6-mockup-panel .v6-tool-tl{ top: 6%; left: 4%; animation: v6ToolJitterTL 4s ease-in-out infinite; }.hero .v6-mockup-panel .v6-tool-tr, .surface-beat--navigate .v6-mockup-panel .v6-tool-tr{ top: 10%; right: 4%; animation: v6ToolJitterTR 4.4s ease-in-out infinite; }.hero .v6-mockup-panel .v6-tool-bl, .surface-beat--navigate .v6-mockup-panel .v6-tool-bl{ bottom: 18%; left: 6%; animation: v6ToolJitterBL 4.8s ease-in-out infinite; }.hero .v6-mockup-panel .v6-tool-br, .surface-beat--navigate .v6-mockup-panel .v6-tool-br{ bottom: 14%; right: 4%; animation: v6ToolJitterBR 4.2s ease-in-out infinite; } @keyframes v6ToolJitterTL { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(-3deg) translate(4px, -3px); } } @keyframes v6ToolJitterTR { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(2deg) translate(-5px, -3px); } } @keyframes v6ToolJitterBL { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(1deg) translate(5px, 3px); } } @keyframes v6ToolJitterBR { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-2deg) translate(-4px, 3px); } }.hero .v6-mockup-panel .v6-tool-mark, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark{ width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 10px; font-weight: 700; color: #fff; letter-spacing: 0; flex-shrink: 0; }.hero .v6-mockup-panel .v6-tool-mark-sf, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-sf{ background: #00A1E0; }.hero .v6-mockup-panel .v6-tool-mark-sl, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-sl{ background: #4A154B; }.hero .v6-mockup-panel .v6-tool-mark-nt, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-nt{ background: #000; color: #fff; }.hero .v6-mockup-panel .v6-tool-mark-ds, .surface-beat--navigate .v6-mockup-panel .v6-tool-mark-ds{ background: #FFC700; color: #000; }.hero .v6-mockup-panel .v6-tool-body, .surface-beat--navigate .v6-mockup-panel .v6-tool-body{ display: flex; flex-direction: column; line-height: 1.2; }.hero .v6-mockup-panel .v6-tool-name, .surface-beat--navigate .v6-mockup-panel .v6-tool-name{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-tool-snippet, .surface-beat--navigate .v6-mockup-panel .v6-tool-snippet{ font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.02em; margin-top: 2px; }.hero .v6-mockup-panel .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel .v6-confused-avatar{ position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; border-radius: 50%; background: var(--v6-grad-cn); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 11px; font-weight: 700; transform: translate(-50%, -50%); box-shadow: 0 6px 20px rgba(120, 115, 245, 0.45); animation: v6AvatarBounce 2.6s ease-in-out infinite; z-index: 1; }.hero .v6-mockup-panel .v6-confused-q, .surface-beat--navigate .v6-mockup-panel .v6-confused-q{ position: absolute; top: -8px; right: -10px; width: 16px; height: 16px; border-radius: 50%; background: var(--v6-paper); color: var(--v6-ink); display: flex; align-items: center; justify-content: center; font-family: var(--brand-font); font-size: 11px; font-weight: 700; border: 1.5px solid var(--v6-ink); } @keyframes v6AvatarBounce { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 25% { transform: translate(-50%, -50%) translate(-22px, -12px); } 50% { transform: translate(-50%, -50%) translate(18px, 8px); } 75% { transform: translate(-50%, -50%) translate(-10px, 14px); } }.hero .v6-mockup-panel .v6-chaos-connectors, .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors{ position: absolute; inset: 12%; width: 76%; height: 76%; color: var(--v6-ink-3); opacity: 0.35; pointer-events: none; }.hero .v6-mockup-panel .v6-intro-label, .surface-beat--navigate .v6-mockup-panel .v6-intro-label{ position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-family: var(--v6-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v6-ink-3); white-space: nowrap; } /* --- CN materializes --- */.hero .v6-mockup-panel .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: scale(0.85); filter: blur(12px); transition: opacity 600ms var(--v6-ease), transform 800ms var(--v6-spring), filter 480ms ease; }.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn{ opacity: 1; transform: scale(1); filter: blur(0); }.hero .v6-mockup-panel .v6-intro-cn-burst, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-burst{ position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); background: radial-gradient(circle at center, rgba(120, 115, 245, 0.22) 0%, transparent 60%), radial-gradient(circle at center, rgba(86, 154, 241, 0.18) 0%, transparent 70%); filter: blur(20px); opacity: 0; }.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-burst, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-burst, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-burst, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-burst{ animation: v6Burst 1.2s var(--v6-ease) forwards; } @keyframes v6Burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.05); } }.hero .v6-mockup-panel .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-logo{ width: 64px; height: 64px; object-fit: contain; margin-bottom: 14px; z-index: 1; display: block; filter: drop-shadow(0 14px 36px rgba(120, 115, 245, 0.40)) drop-shadow(0 4px 10px rgba(120, 115, 245, 0.22)); }.hero .v6-mockup-panel .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-mark{ font-family: var(--brand-font); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--v6-ink); z-index: 1; }.hero .v6-mockup-panel .v6-intro-cn-tm, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-tm{ font-size: 0.6em; vertical-align: super; opacity: 0.5; margin-left: 2px; } /* --- Cursor + click ripple --- Cursor lands on the LOGO (which sits ~38px above center, since logo is 64px + 14px margin-bottom + wordmark below). We aim the cursor's tip into the logo, not the wordmark. */ /* ═══════════════════════════════════════════════════════════════════ .v6-fx — UNIFIED CURSOR + RIPPLE POSITIONING UTILITY ────────────────────────────────────────────────────────────────── One wrapper sits AT the click point (--fx-x, --fx-y, relative to the panel center). Children — the cursor SVG and the ripple — live inside this 0×0 wrapper, so: • The cursor's tip (its viewBox 0,0) is pinned to the wrapper origin: top:0; left:0; no per-site offset to remember. • The ripple is auto-centered on the wrapper origin via margin: calc(size / -2). No per-site "subtract half the ripple width" gotcha. Both consume ONE source of truth — the wrapper's own position. They cannot drift apart. Adjusting where a click lands means editing one (x, y) pair, full stop. USAGE

JS toggles `.is-clicking` on the wrapper to fire cursor-in + ripple in lockstep. OPTIONAL OVERRIDES (set on the wrapper) --fx-duration cursor-in animation length (default 900ms) --fx-delay delay before fire (default 0ms) --fx-ripple-size diameter of the ripple disc (default 90px) ════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-fx, .surface-beat--navigate .v6-mockup-panel .v6-fx{ position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(var(--fx-x, 0px), var(--fx-y, 0px)); pointer-events: none; z-index: 20; }.hero .v6-mockup-panel .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx__cursor{ position: absolute; top: 0; left: 0; width: 18px; height: 22px; /* The wrapper is 0×0 — and tidyTemplate.css's preflight clamps every svg to `max-width: 100%`, which would otherwise squash the cursor to zero width inside the zero-width wrapper. Opt out explicitly. */ max-width: none; max-height: none; color: var(--v6-ink); opacity: 0; transform-origin: 0 0; }.hero .v6-mockup-panel .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx__ripple{ --_size: var(--fx-ripple-size, 90px); position: absolute; top: 0; left: 0; width: var(--_size); height: var(--_size); margin-top: calc(var(--_size) / -2); margin-left: calc(var(--_size) / -2); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blurple) 55%, transparent) 0%, transparent 70%); opacity: 0; transform-origin: 50% 50%; } /* Single class fires cursor + ripple in lockstep. */.hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor{ animation: v6FxCursorIn var(--fx-duration, 900ms) cubic-bezier(0.22, 1, 0.36, 1) var(--fx-delay, 0ms) forwards; }.hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple{ /* Ripple fires at the press moment: delay + 65% × duration. */ animation: v6FxRipple 600ms ease-out calc(var(--fx-delay, 0ms) + var(--fx-duration, 900ms) * 0.65) forwards; } /* Unified rhythm (percentages of --fx-duration): * 0% invisible, off to the lower-right * 50% lands at origin, opacity 1 * 65% presses (scale 0.88, micro-shift) — the click moment * 80% releases, back at origin * 100% held at origin */ @keyframes v6FxCursorIn { 0% { opacity: 0; transform: translate(60px, 60px) scale(0.6); } 50% { opacity: 1; transform: translate(0, 0) scale(1); } 65% { transform: translate(-4px, -4px) scale(0.88); } 80% { transform: translate(0, 0) scale(1); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } @keyframes v6FxRipple { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.6); } } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor, .hero .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx.is-clicking .v6-fx__ripple{ animation: none !important; opacity: 0 !important; } } /* === STAGE-COMPLETE OVERLAY === Enter: overlay fades + blurs in, check settles with a soft overshoot under a radiating glow ring, label rises a beat after. Exit: overlay fades out smoothly with a slight blur build, no hard cut. */.hero .v6-mockup-panel .v6-stage-success, .surface-beat--navigate .v6-mockup-panel .v6-stage-success{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(60% 60% at 50% 45%, color-mix(in srgb, var(--blurple) 10%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--main-bg-color) 36%, transparent); backdrop-filter: blur(0px) saturate(1); -webkit-backdrop-filter: blur(0px) saturate(1); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 620ms cubic-bezier(0.22, 1, 0.36, 1), -webkit-backdrop-filter 620ms cubic-bezier(0.22, 1, 0.36, 1); z-index: 20; }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-stage-success, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-stage-success{ opacity: 1; backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); } /* Glow ring sweeps out from behind the check on enter */.hero .v6-mockup-panel .v6-ss-check, .surface-beat--navigate .v6-mockup-panel .v6-ss-check{ position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--v6-grad-cn); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 36px color-mix(in srgb, var(--blurple) 50%, transparent), 0 0 0 1px color-mix(in srgb, #fff 14%, transparent) inset; transform: scale(0.55); filter: blur(10px); opacity: 0; }.hero .v6-mockup-panel .v6-ss-check::before, .surface-beat--navigate .v6-mockup-panel .v6-ss-check::before{ content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--blurple) 55%, transparent); opacity: 0; pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check{ animation: v6SsCheckIn 860ms cubic-bezier(0.34, 1.4, 0.5, 1) 140ms forwards; }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check::before, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ss-check::before{ animation: v6SsCheckRing 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards; } @keyframes v6SsCheckIn { 0% { transform: scale(0.55); filter: blur(10px); opacity: 0; } 55% { transform: scale(1.06); filter: blur(0); opacity: 1; } 78% { transform: scale(0.98); } 100% { transform: scale(1); filter: blur(0); opacity: 1; } } @keyframes v6SsCheckRing { 0% { transform: scale(0.7); opacity: 0; } 35% { opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }.hero .v6-mockup-panel .v6-ss-label, .surface-beat--navigate .v6-mockup-panel .v6-ss-label{ font-family: var(--brand-font); font-size: 16px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.015em; opacity: 0; transform: translateY(10px); filter: blur(4px); }.hero .v6-mockup-panel[data-v6-phase="success"] .v6-ss-label, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ss-label{ animation: v6SsLabelIn 640ms cubic-bezier(0.22, 1, 0.36, 1) 360ms forwards; } @keyframes v6SsLabelIn { 0% { opacity: 0; transform: translateY(10px); filter: blur(4px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } } /* === STAGE PANELS === All 6 sit absolutely positioned in the same slot. Only the one with .is-active is visible. Container becomes visible during phase=stage. */.hero .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels{ position: absolute; inset: 8% 6%; z-index: 8; opacity: 0; transform: scale(0.92); filter: blur(4px); transition: opacity 600ms var(--v6-ease), transform 700ms var(--v6-spring), filter 460ms ease; pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels{ opacity: 1; transform: scale(1); filter: blur(0); } /* ════════════════════════════════════════════════════════════════════ V6 MOBILE VIEW — phone-shaped panel, no orbital ring. The ring is a desktop pattern. On mobile the journey reads as an actual phone screen: tall-rounded frame, a top status strip + dot stepper showing 1/6…6/6 progress, the current stage's content filling the middle, and a Create / Share / Navigate bottom tab bar (replacing the cursor-picker beat from desktop). ════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* Sidestep the parent's flex/grid layout entirely — size the panel directly from viewport units. parent was collapsing the panel to ~30px no matter what we did with width: 100%. Flex column with center alignment vertically centers the in-flow ring in the available area between the window-chrome bar and the tab bar. */.hero .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel{ display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; width: calc(100vw - 36px) !important; max-width: 360px !important; min-width: 0; /* Phone-shaped proportions without overshoot. Aspect-ratio 9:15 * is taller than square but stops short of a flagship phone's * 9:19.5 — keeps the panel readable on a phone-in-phone preview * without dominating the viewport. */ aspect-ratio: 9 / 15; min-height: 540px; margin: 0 auto; padding: 90px 14px 22px; /* room for top picker stack */ border-radius: 32px; transform: none; }.hero .v6-mockup-panel:hover, .surface-beat--navigate .v6-mockup-panel:hover{ transform: none; } /* Mobile control sizing — keep all chrome on a single row inside the narrow phone-width panel. Tighter gaps, smaller fixed widths so the counter + label both fit without wrapping. */.hero .v6-panel-controls, .surface-beat--navigate .v6-panel-controls{ gap: 6px; }.hero .v6-panel-controls .ring-nav-counter, .surface-beat--navigate .v6-panel-controls .ring-nav-counter{ width: 64px; padding: 0 8px; }.hero .v6-panel-controls .navigator-ring-micro-label, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label{ width: 140px; padding: 0 10px; } /* No window chrome / traffic lights on mobile — that's a desktop pattern */.hero .v6-mockup-panel .v6-window-chrome, .surface-beat--navigate .v6-mockup-panel .v6-window-chrome{ display: none; } /* Phone status strip — thin neutral bar at the top */.hero .v6-mockup-panel::before, .surface-beat--navigate .v6-mockup-panel::before{ content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 56px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); z-index: 30; } /* Keep the orbital ring visible on mobile — smaller, with breathing room to the panel edge, ABSOLUTELY centered in the panel so it sits in the true vertical middle (not biased by picker/padding above). The phase transforms compose var(--v6-tilt) with scale; we redefine --v6-tilt as the centering translate on mobile (no 3D tilt at phone scale) so the scale animations keep working. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ position: absolute; top: 50%; left: 50%; --v6-tilt: translate(-50%, -50%); --navigator-size: 200px; --node-radius: 90px; width: 200px; height: 200px; margin: 0; }.hero .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels{ inset: 8% 6%; z-index: 8; } /* Stage panel content fills the phone middle. Larger, mobile-readable */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ inset: 0; gap: 10px; }.hero .v6-mockup-panel .v6-panel-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-panel-eyebrow{ font-size: 9px; }.hero .v6-mockup-panel .v6-panel-title, .surface-beat--navigate .v6-mockup-panel .v6-panel-title{ font-size: 14px; } /* Picker floats to the TOP on mobile as a centered vertical stack (Create / Share / Navigate stacked one above the other). */.hero .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker{ position: absolute; inset: 22px 0 auto 0; /* anchored to top, below status strip */ flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; height: auto; padding: 0 14px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; border-radius: 0; z-index: 12; opacity: 1; transform: none; filter: none; pointer-events: auto; }.hero .v6-mockup-panel .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-csn-eyebrow{ display: none; } /* Columns stack vertically on mobile: Create on top, Share (+ Agent Mode) in the middle, Navigate at the bottom. Each tile = iOS-style icon box above its label, centered. */.hero .v6-mockup-panel .v6-csn-columns, .surface-beat--navigate .v6-mockup-panel .v6-csn-columns{ flex-direction: column; align-items: center; width: 100%; gap: 12px; }.hero .v6-mockup-panel .v6-csn-column, .surface-beat--navigate .v6-mockup-panel .v6-csn-column{ align-items: center; gap: 6px; min-width: 0; }.hero .v6-mockup-panel .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon{ width: 44px; height: 44px; border-radius: 12px; }.hero .v6-mockup-panel .v6-csn-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon svg{ width: 22px; height: 22px; }.hero .v6-mockup-panel .v6-csn-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-label{ font-size: 11px; } /* Mobile: unwrap the Share+Agent column-wrap via display:contents so * its children participate directly in .v6-csn-columns' flex layout. * Then `order: 99` on the Agent Mode pill pushes it past Navigate to * the bottom of the stack. Was reading as "Create → Share → Agent → * Navigate" which was weird. * !important needed because the desktop base rule at L19203 sets * display:flex on .v6-csn-column-wrap and lives LATER in source — * same specificity, source order wins. */.hero .v6-mockup-panel .v6-csn-column-wrap, .surface-beat--navigate .v6-mockup-panel .v6-csn-column-wrap{ display: contents !important; }.hero .v6-mockup-panel .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent{ margin-top: 6px; padding: 4px 10px 4px 4px; order: 99 !important; }.hero .v6-mockup-panel .v6-csn-agent-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-csn-agent-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-label{ font-size: 9px; } /* Cursor + ripple positioning is handled by the .v6-fx utility — JS writes --fx-x / --fx-y onto the wrapper at runtime. The same keyframes work for desktop and mobile — no per-breakpoint overrides needed. */ /* CN intro — fits the phone frame */.hero .v6-mockup-panel .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-logo{ width: 56px; height: 56px; margin-bottom: 10px; }.hero .v6-mockup-panel .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel .v6-intro-cn-mark{ font-size: 15px; } /* Success — sized for the phone middle, sits above the tab bar */.hero .v6-mockup-panel .v6-stage-success, .surface-beat--navigate .v6-mockup-panel .v6-stage-success{ inset: 56px 0 60px 0; /* clear status strip + tab bar */ border-radius: 0; }.hero .v6-mockup-panel .v6-ss-check, .surface-beat--navigate .v6-mockup-panel .v6-ss-check{ width: 52px; height: 52px; }.hero .v6-mockup-panel .v6-ss-label, .surface-beat--navigate .v6-mockup-panel .v6-ss-label{ font-size: 14px; } } /* Stage panels are ONLY layout containers — NO chrome of their own. The outer .v6-mockup-panel is the single "app window"; stage content renders directly inside it like the app's content area. */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ position: absolute; inset: 0; background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(8px); transition: opacity 360ms var(--v6-ease), transform 480ms var(--v6-spring); pointer-events: none; }.hero .v6-mockup-panel .v6-stage-panel.is-active, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; } /* Header sits as content inside the outer panel — no surrounding card. */.hero .v6-mockup-panel .v6-panel-header, .surface-beat--navigate .v6-mockup-panel .v6-panel-header{ display: flex; flex-direction: column; gap: 3px; }.hero .v6-mockup-panel .v6-panel-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-panel-eyebrow{ font-family: var(--v6-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-panel-title, .surface-beat--navigate .v6-mockup-panel .v6-panel-title{ font-family: var(--brand-font); font-size: 15px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.015em; } /* === DISCOVERY: collaborative table === */.hero .v6-mockup-panel .v6-table, .surface-beat--navigate .v6-mockup-panel .v6-table{ display: flex; flex-direction: column; gap: 6px; }.hero .v6-mockup-panel .v6-table-row, .surface-beat--navigate .v6-mockup-panel .v6-table-row{ position: relative; display: grid; grid-template-columns: 10px 1fr 1fr; align-items: center; gap: 10px; padding: 8px 10px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 8px; transition: background 280ms, border-color 280ms; } /* Inline AI-assist chip — pops on a Q&A row while Think & Sync drops its answer in. Sits on the right edge of the row, pulses, dissolves when the answer text materializes. */.hero .v6-mockup-panel .v6-row-assist, .surface-beat--navigate .v6-mockup-panel .v6-row-assist{ position: absolute; top: 50%; right: 8px; transform: translateY(-50%) scale(0.92); display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: linear-gradient(120deg, color-mix(in srgb, var(--blurple) 24%, var(--main-bg-color)), color-mix(in srgb, var(--blurple) 10%, var(--main-bg-color))); border: 0.5px solid color-mix(in srgb, var(--blurple) 45%, transparent); box-shadow: 0 2px 10px color-mix(in srgb, var(--blurple) 22%, transparent); color: var(--blurple); font-family: var(--brand-font); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 4; white-space: nowrap; }.hero .v6-mockup-panel .v6-row-assist svg, .surface-beat--navigate .v6-mockup-panel .v6-row-assist svg{ width: 11px; height: 11px; max-width: none; animation: v6RowAssistPulse 1.1s ease-in-out infinite; }.hero .v6-mockup-panel .v6-row-assist.is-on, .surface-beat--navigate .v6-mockup-panel .v6-row-assist.is-on{ opacity: 1; transform: translateY(-50%) scale(1); }.hero .v6-mockup-panel .v6-row-assist.is-off, .surface-beat--navigate .v6-mockup-panel .v6-row-assist.is-off{ opacity: 0; transform: translateY(calc(-50% - 2px)) scale(0.95); } @keyframes v6RowAssistPulse { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }.hero .v6-mockup-panel .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-row-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--v6-hair-strong); transition: background 280ms; }.hero .v6-mockup-panel .v6-table-row.is-typing .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-typing .v6-row-dot{ background: var(--purple); animation: v6DotPulse 1s ease-in-out infinite; }.hero .v6-mockup-panel .v6-table-row.is-done .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-done .v6-row-dot{ background: #2BB66D; } /* Celebrate beat — fires after Smart Conversation lands the last fill. All row dots pulse green in unison + table gets a soft green wash, marking "the customer + agent finished Discovery together." Brief so it reads as a beat, not a hold. */.hero .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-row-dot, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-row-dot{ animation: v6CelebrateDot 750ms cubic-bezier(0.22, 1, 0.36, 1) 2; }.hero .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-celebrating .v6-collab-inner{ animation: v6CelebrateGlow 1500ms ease-out forwards; } @keyframes v6CelebrateDot { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #2BB66D 60%, transparent); } 50% { transform: scale(1.5); box-shadow: 0 0 0 8px color-mix(in srgb, #2BB66D 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, #2BB66D 0%, transparent); } } @keyframes v6CelebrateGlow { 0% { background: transparent; } 35% { background: color-mix(in srgb, #2BB66D 8%, transparent); } 100% { background: transparent; } } @keyframes v6DotPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 115, 245, 0.55); } 50% { box-shadow: 0 0 0 6px rgba(120, 115, 245, 0); } }.hero .v6-mockup-panel .v6-row-q, .surface-beat--navigate .v6-mockup-panel .v6-row-q{ font-family: var(--brand-font); font-size: 11px; font-weight: 500; color: var(--v6-ink-2); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-row-a, .surface-beat--navigate .v6-mockup-panel .v6-row-a{ font-family: var(--v6-mono); font-size: 10px; color: var(--v6-ink-3); min-height: 1.2em; }.hero .v6-mockup-panel .v6-table-row.is-typing .v6-row-a, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-typing .v6-row-a{ color: var(--purple); }.hero .v6-mockup-panel .v6-table-row.is-done .v6-row-q, .surface-beat--navigate .v6-mockup-panel .v6-table-row.is-done .v6-row-q{ color: var(--v6-ink); } /* === EXPERIENCE: curated content cards for the buyer === */.hero .v6-mockup-panel .v6-content-grid, .surface-beat--navigate .v6-mockup-panel .v6-content-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.hero .v6-mockup-panel .v6-content-card, .surface-beat--navigate .v6-mockup-panel .v6-content-card{ display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 9px; opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 360ms var(--v6-ease), transform 480ms var(--v6-spring); }.hero .v6-mockup-panel .v6-content-card.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-content-card.is-shown{ opacity: 1; transform: translateY(0) scale(1); }.hero .v6-mockup-panel .v6-content-thumb, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb{ aspect-ratio: 16 / 10; border-radius: 6px; background: color-mix(in srgb, var(--v6-ink) 4%, transparent); display: flex; align-items: center; justify-content: center; color: var(--v6-ink-2); margin-bottom: 4px; }.hero .v6-mockup-panel .v6-content-thumb-video, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb-video{ background: var(--v6-grad-cn); color: #fff; }.hero .v6-mockup-panel .v6-content-thumb-doc, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb-doc{ flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 8px; }.hero .v6-mockup-panel .v6-doc-line, .surface-beat--navigate .v6-mockup-panel .v6-doc-line{ height: 2px; width: 100%; background: var(--v6-hair-strong); border-radius: 1px; }.hero .v6-mockup-panel .v6-doc-line.short, .surface-beat--navigate .v6-mockup-panel .v6-doc-line.short{ width: 60%; }.hero .v6-mockup-panel .v6-content-thumb-chart, .surface-beat--navigate .v6-mockup-panel .v6-content-thumb-chart{ align-items: flex-end; gap: 3px; padding: 6px; }.hero .v6-mockup-panel .v6-chart-bar, .surface-beat--navigate .v6-mockup-panel .v6-chart-bar{ flex: 1; background: var(--v6-grad-cn); border-radius: 1px; height: 30%; }.hero .v6-mockup-panel .v6-chart-bar:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-chart-bar:nth-child(2){ height: 55%; }.hero .v6-mockup-panel .v6-chart-bar:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-chart-bar:nth-child(3){ height: 40%; }.hero .v6-mockup-panel .v6-chart-bar.tall, .surface-beat--navigate .v6-mockup-panel .v6-chart-bar.tall{ height: 90%; }.hero .v6-mockup-panel .v6-content-title, .surface-beat--navigate .v6-mockup-panel .v6-content-title{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-content-meta, .surface-beat--navigate .v6-mockup-panel .v6-content-meta{ font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.02em; } /* === SCOPE: tabs + modules === */.hero .v6-mockup-panel .v6-tabs, .surface-beat--navigate .v6-mockup-panel .v6-tabs{ display: flex; gap: 4px; padding: 3px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 8px; width: fit-content; }.hero .v6-mockup-panel .v6-tab, .surface-beat--navigate .v6-mockup-panel .v6-tab{ padding: 4px 12px; border-radius: 6px; font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink-3); letter-spacing: -0.005em; transition: all 280ms var(--v6-ease); }.hero .v6-mockup-panel .v6-tab.is-active, .surface-beat--navigate .v6-mockup-panel .v6-tab.is-active{ background: var(--v6-ink); color: var(--v6-paper); }.hero .v6-mockup-panel .v6-modules, .surface-beat--navigate .v6-mockup-panel .v6-modules{ display: flex; flex-direction: column; gap: 6px; }.hero .v6-mockup-panel .v6-module-row, .surface-beat--navigate .v6-mockup-panel .v6-module-row{ position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 8px; opacity: 0; transform: translateX(-6px); transition: opacity 320ms var(--v6-ease), transform 420ms var(--v6-spring), background 280ms ease, border-color 280ms ease; }.hero .v6-mockup-panel .v6-module-row.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-shown{ opacity: 1; transform: translateX(0); } /* Proposed Scope's "in-scope" mark: subtle green left border + bg wash so Sarah can scan which modules the agent put inside the scope envelope. Without this the rows look identical to before the agent ran. */.hero .v6-mockup-panel .v6-module-row.is-in-scope, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-in-scope{ background: color-mix(in srgb, var(--green) 5%, var(--v6-paper)); border-left: 3px solid color-mix(in srgb, var(--green) 55%, transparent); padding-left: 10px; } /* Deferred / out-of-scope mark: muted, no accent border, name dimmed. Reads as "we considered this and chose to leave it out" — not "removed" — so the offering still looks intentionally curated. */.hero .v6-mockup-panel .v6-module-row.is-out-of-scope, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-out-of-scope{ background: color-mix(in srgb, var(--v6-ink) 2%, var(--v6-paper)); border-color: color-mix(in srgb, var(--v6-ink) 6%, transparent); opacity: 0.55; }.hero .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-name, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-name{ text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--v6-ink) 30%, transparent); } /* Status badge differs per scope state. In-scope ✓ is green, deferred − is muted, undecided em-dash is purple (the original look). */.hero .v6-mockup-panel .v6-module-row.is-in-scope .v6-module-badge, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-in-scope .v6-module-badge{ background: color-mix(in srgb, var(--green) 14%, transparent); border-color: color-mix(in srgb, var(--green) 36%, transparent); color: var(--green); }.hero .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-badge, .surface-beat--navigate .v6-mockup-panel .v6-module-row.is-out-of-scope .v6-module-badge{ background: color-mix(in srgb, var(--v6-ink) 4%, transparent); border-color: color-mix(in srgb, var(--v6-ink) 12%, transparent); color: color-mix(in srgb, var(--v6-ink) 50%, transparent); }.hero .v6-mockup-panel .v6-module-name, .surface-beat--navigate .v6-mockup-panel .v6-module-name{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-module-qty, .surface-beat--navigate .v6-mockup-panel .v6-module-qty{ font-family: var(--v6-mono); font-size: 10px; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-module-badge, .surface-beat--navigate .v6-mockup-panel .v6-module-badge{ width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--purple) 14%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 32%, transparent); color: var(--purple); font-family: var(--v6-mono); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* === COMMIT: sign card === */.hero .v6-mockup-panel .v6-sign-card, .surface-beat--navigate .v6-mockup-panel .v6-sign-card{ display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 10px; }.hero .v6-mockup-panel .v6-sign-field, .surface-beat--navigate .v6-mockup-panel .v6-sign-field{ display: flex; flex-direction: column; gap: 2px; }.hero .v6-mockup-panel .v6-sign-label, .surface-beat--navigate .v6-mockup-panel .v6-sign-label{ font-family: var(--v6-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-sign-value, .surface-beat--navigate .v6-mockup-panel .v6-sign-value{ font-family: var(--brand-font); font-size: 12px; font-weight: 500; color: var(--v6-ink); min-height: 1.4em; padding: 5px 8px; background: var(--v6-paper-2); border: 1px solid var(--v6-hair); border-radius: 6px; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-sign-value.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-sign-value.is-typing::after{ content: '▍'; margin-left: 2px; color: var(--purple); animation: v6CaretBlink 0.7s infinite; } @keyframes v6CaretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }.hero .v6-mockup-panel .v6-sign-check, .hero .v6-mockup-panel .v6-check-row, .surface-beat--navigate .v6-mockup-panel .v6-sign-check, .surface-beat--navigate .v6-mockup-panel .v6-check-row{ display: flex; align-items: center; gap: 8px; cursor: pointer; }.hero .v6-mockup-panel .v6-check-box, .surface-beat--navigate .v6-mockup-panel .v6-check-box{ width: 16px; height: 16px; border-radius: 4px; background: var(--v6-paper-2); border: 1.5px solid var(--v6-hair-strong); flex-shrink: 0; position: relative; transition: all 280ms var(--v6-ease); }.hero .v6-mockup-panel .v6-check-box.is-checked, .surface-beat--navigate .v6-mockup-panel .v6-check-box.is-checked{ background: var(--v6-grad-cn); border-color: transparent; }.hero .v6-mockup-panel .v6-check-box.is-checked::after, .surface-beat--navigate .v6-mockup-panel .v6-check-box.is-checked::after{ content: ''; position: absolute; top: 3px; left: 5px; width: 4px; height: 7px; border: solid #fff; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); }.hero .v6-mockup-panel .v6-check-label, .surface-beat--navigate .v6-mockup-panel .v6-check-label{ font-family: var(--brand-font); font-size: 11px; font-weight: 500; color: var(--v6-ink-2); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-sign-cta, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta{ margin-top: 4px; padding: 9px 14px; background: var(--v6-paper-2); border: 1px solid var(--v6-hair-strong); border-radius: 9999px; font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink-3); letter-spacing: -0.005em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; transition: all 360ms var(--v6-ease); }.hero .v6-mockup-panel .v6-sign-cta.is-armed, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta.is-armed{ background: var(--v6-grad-cn); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(120, 115, 245, 0.40); }.hero .v6-mockup-panel .v6-sign-cta-check, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta-check{ opacity: 0; transform: scale(0.5); transition: opacity 240ms, transform 320ms var(--v6-spring); }.hero .v6-mockup-panel .v6-sign-cta.is-signed .v6-sign-cta-check, .surface-beat--navigate .v6-mockup-panel .v6-sign-cta.is-signed .v6-sign-cta-check{ opacity: 1; transform: scale(1); } /* === DEPLOY: gantt === */.hero .v6-mockup-panel .v6-gantt, .surface-beat--navigate .v6-mockup-panel .v6-gantt{ display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 10px; }.hero .v6-mockup-panel .v6-gantt-axis, .surface-beat--navigate .v6-mockup-panel .v6-gantt-axis{ display: grid; grid-template-columns: 60px repeat(4, 1fr); font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.06em; padding-left: 70px; }.hero .v6-mockup-panel .v6-gantt-rows, .surface-beat--navigate .v6-mockup-panel .v6-gantt-rows{ position: relative; display: flex; flex-direction: column; gap: 6px; }.hero .v6-mockup-panel .v6-gantt-row, .surface-beat--navigate .v6-mockup-panel .v6-gantt-row{ display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; }.hero .v6-mockup-panel .v6-gantt-name, .hero .v6-mockup-panel .v6-gantt-label, .surface-beat--navigate .v6-mockup-panel .v6-gantt-name, .surface-beat--navigate .v6-mockup-panel .v6-gantt-label{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: var(--v6-ink); text-align: right; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-gantt-track, .surface-beat--navigate .v6-mockup-panel .v6-gantt-track{ position: relative; height: 14px; background: color-mix(in srgb, var(--v6-ink) 3%, transparent); border-radius: 3px; }.hero .v6-mockup-panel .v6-gantt-bar, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar{ position: absolute; top: 1px; bottom: 1px; /* HTML provides --start / --width as bare numbers (e.g. 5, 22). * Bare numbers aren't valid lengths — without calc(*1%) the browser * fell back to left:0 / width:auto and every bar collapsed to a * vertical sliver at the start of the track. */ left: calc(var(--start) * 1%); width: calc(var(--width) * 1%); background: rgba(120, 115, 245, 0.14); border: 1px solid rgba(120, 115, 245, 0.35); border-radius: 3px; overflow: hidden; transition: background 280ms, border-color 280ms; }.hero .v6-mockup-panel .v6-gantt-bar.is-running, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar.is-running{ background: rgba(120, 115, 245, 0.22); border-color: var(--purple); }.hero .v6-mockup-panel .v6-gantt-bar.is-done, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar.is-done{ background: color-mix(in srgb, var(--v6-ink) 90%, transparent); border-color: var(--v6-ink); }.hero .v6-mockup-panel .v6-gantt-fill, .surface-beat--navigate .v6-mockup-panel .v6-gantt-fill{ display: block; height: 100%; width: 0%; background: var(--v6-grad-cn); border-radius: 2px; transition: width 60ms linear; }.hero .v6-mockup-panel .v6-gantt-bar.is-done .v6-gantt-fill, .surface-beat--navigate .v6-mockup-panel .v6-gantt-bar.is-done .v6-gantt-fill{ background: var(--v6-ink); }.hero .v6-mockup-panel .v6-gantt-now, .surface-beat--navigate .v6-mockup-panel .v6-gantt-now{ position: absolute; top: 0; bottom: 0; left: 70px; width: 1.5px; background: var(--purple); box-shadow: 0 0 8px rgba(120, 115, 245, 0.55); transform: translateX(calc(var(--now, 0) * 1px)); opacity: 0; transition: opacity 220ms; pointer-events: none; }.hero .v6-mockup-panel .v6-gantt-now.is-active, .surface-beat--navigate .v6-mockup-panel .v6-gantt-now.is-active{ opacity: 0.9; } /* === SUCCESS: KPIs === */.hero .v6-mockup-panel .v6-kpis, .surface-beat--navigate .v6-mockup-panel .v6-kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.hero .v6-mockup-panel .v6-kpi, .surface-beat--navigate .v6-mockup-panel .v6-kpi{ display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--v6-paper); border: 1px solid var(--v6-hair); border-radius: 9px; }.hero .v6-mockup-panel .v6-kpi-label, .surface-beat--navigate .v6-mockup-panel .v6-kpi-label{ font-family: var(--v6-mono); font-size: 9px; color: var(--v6-ink-3); letter-spacing: 0.08em; text-transform: uppercase; }.hero .v6-mockup-panel .v6-kpi-value, .surface-beat--navigate .v6-mockup-panel .v6-kpi-value{ font-family: var(--brand-font); font-size: 19px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.025em; line-height: 1.05; }.hero .v6-mockup-panel .v6-kpi-trend, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend{ font-family: var(--v6-mono); font-size: 10px; font-weight: 600; }.hero .v6-mockup-panel .v6-kpi-trend.up, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend.up{ color: #2BB66D; } /* ─── SUCCESS · issue submission form (guest view) ───────────────── * Lives inside .v6-collab-inner next to the KPI grid. Hidden by default; * JS adds `.is-issue-mode` to the stage panel when persona swaps to * guest → KPIs fade out, form fades in. Cursor types the issue into * the input, presses Submit → Auto Solve agent panel slides in. */.hero .v6-mockup-panel .v6-issue-form, .surface-beat--navigate .v6-mockup-panel .v6-issue-form{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; padding: 18px 22px; opacity: 0; transform: scale(0.97); pointer-events: none; transition: opacity 360ms var(--v6-ease), transform 420ms var(--v6-spring); }.hero .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-issue-form, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-issue-form{ opacity: 1; transform: scale(1); pointer-events: auto; }.hero .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-kpi-grid, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-issue-mode .v6-kpi-grid{ opacity: 0; pointer-events: none; transition: opacity 280ms ease; }.hero .v6-mockup-panel .v6-issue-form-head, .surface-beat--navigate .v6-mockup-panel .v6-issue-form-head{ margin: 0; font-family: var(--brand-font); font-size: 13px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-issue-form-sub, .surface-beat--navigate .v6-mockup-panel .v6-issue-form-sub{ margin: 0; font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-issue-input, .surface-beat--navigate .v6-mockup-panel .v6-issue-input{ min-height: 64px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--main-bg-color) 80%, transparent); border: 1px solid color-mix(in srgb, var(--v6-ink) 12%, transparent); font-family: var(--brand-font); font-size: 11px; font-weight: 500; color: var(--v6-ink); letter-spacing: -0.005em; line-height: 1.4; margin-top: 6px; transition: border-color 220ms ease, box-shadow 220ms ease; }.hero .v6-mockup-panel .v6-issue-input.is-typing, .surface-beat--navigate .v6-mockup-panel .v6-issue-input.is-typing{ border-color: color-mix(in srgb, var(--blurple) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blurple) 14%, transparent); }.hero .v6-mockup-panel .v6-issue-input::after, .surface-beat--navigate .v6-mockup-panel .v6-issue-input::after{ content: ""; display: inline-block; width: 1.5px; height: 12px; background: var(--blurple); margin-left: 2px; vertical-align: text-bottom; opacity: 0; }.hero .v6-mockup-panel .v6-issue-input.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-issue-input.is-typing::after{ opacity: 1; animation: v6IssueCaret 720ms steps(2) infinite; } @keyframes v6IssueCaret { 50% { opacity: 0; } }.hero .v6-mockup-panel .v6-issue-actions, .surface-beat--navigate .v6-mockup-panel .v6-issue-actions{ display: flex; justify-content: flex-end; margin-top: 2px; }.hero .v6-mockup-panel .v6-issue-submit, .surface-beat--navigate .v6-mockup-panel .v6-issue-submit{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 16px; border-radius: 999px; border: none; background: var(--v6-grad-cn); color: #fff; font-family: var(--brand-font); font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--blurple) 28%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transition: transform 200ms ease, box-shadow 200ms ease; }.hero .v6-mockup-panel .v6-issue-submit.is-pressed, .surface-beat--navigate .v6-mockup-panel .v6-issue-submit.is-pressed{ transform: scale(0.96); }.hero .v6-mockup-panel .v6-issue-submit svg, .surface-beat--navigate .v6-mockup-panel .v6-issue-submit svg{ max-width: none; max-height: none; }.hero .v6-mockup-panel .v6-kpi-trend.down, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend.down{ color: #E55A5A; } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel .navigator-ring, .hero .v6-mockup-panel .v6-intro, .hero .v6-mockup-panel .v6-stage-panels, .hero .v6-mockup-panel .v6-stage-panel, .hero .v6-mockup-panel .v6-stage-success, .surface-beat--navigate .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .v6-intro, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-success{ transition: none !important; animation: none !important; }.hero .v6-mockup-panel .v6-tool, .hero .v6-mockup-panel .v6-confused-avatar, .hero .v6-mockup-panel .v6-typing span, .hero .v6-mockup-panel .v6-sign-value.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-tool, .surface-beat--navigate .v6-mockup-panel .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel .v6-typing span, .surface-beat--navigate .v6-mockup-panel .v6-sign-value.is-typing::after{ animation: none !important; } } /* ════════════════════════════════════════════════════════════════════ MOTION POLISH PASS — meticulously engineered transitions across every state. Choreographed for premium PLG feel. ════════════════════════════════════════════════════════════════════ */ /* ───── Chaos connectors — data flowing chaotically between tools ───── */.hero .v6-mockup-panel .v6-chaos-connectors path, .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path{ stroke-dasharray: 3 5; animation: v6ConnectorFlow 1.4s linear infinite; }.hero .v6-mockup-panel .v6-chaos-connectors path:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path:nth-child(2){ animation-delay: -0.35s; animation-duration: 1.8s; }.hero .v6-mockup-panel .v6-chaos-connectors path:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path:nth-child(3){ animation-delay: -0.7s; animation-duration: 1.6s; }.hero .v6-mockup-panel .v6-chaos-connectors path:nth-child(4), .surface-beat--navigate .v6-mockup-panel .v6-chaos-connectors path:nth-child(4){ animation-delay: -1.05s; animation-duration: 2.0s; } @keyframes v6ConnectorFlow { to { stroke-dashoffset: -16; } } /* ───── Polished tool dissolve — each tool flies toward center ───── */.hero .v6-mockup-panel .v6-tool, .surface-beat--navigate .v6-mockup-panel .v6-tool{ transition: transform 800ms cubic-bezier(0.55, 0, 0.55, 0.2), opacity 700ms ease, filter 600ms ease; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tl, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tl{ transform: translate(160px, 130px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tr, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-tr{ transform: translate(-180px, 150px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-bl, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-bl{ transform: translate(170px, -130px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-br, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-tool-br{ transform: translate(-170px, -110px) scale(0.3) !important; opacity: 0; filter: blur(10px); animation: none; } /* Connectors retract during dissolve */.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-chaos-connectors path, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-chaos-connectors path{ animation: v6ConnectorRetract 700ms cubic-bezier(0.55, 0, 0.55, 0.2) forwards; } @keyframes v6ConnectorRetract { to { stroke-dashoffset: -240; opacity: 0; } } /* Confused avatar implodes */.hero .v6-mockup-panel .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel .v6-confused-avatar{ transition: transform 700ms cubic-bezier(0.55, 0, 0.55, 0.2), opacity 600ms ease, filter 500ms ease; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-confused-avatar, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-confused-avatar{ transform: translate(-50%, -50%) scale(0); opacity: 0; filter: blur(6px); animation: none; } /* "Old way" label fades fast during dissolve */.hero .v6-mockup-panel .v6-intro-label-mess, .surface-beat--navigate .v6-mockup-panel .v6-intro-label-mess{ transition: opacity 360ms ease; }.hero .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-label-mess, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="dissolve"] .v6-intro-label-mess{ opacity: 0; } /* ───── CN logo spring overshoot ───── */.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-logo, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo{ animation: v6LogoSpring 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes v6LogoSpring { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 60% { transform: scale(1.18) rotate(3deg); opacity: 1; } 80% { transform: scale(0.96) rotate(-1deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }.hero .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-mark, .hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="cn"] .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark{ animation: v6WordmarkRise 600ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards; opacity: 0; } @keyframes v6WordmarkRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }.hero .v6-mockup-panel .v6-intro-label-one, .surface-beat--navigate .v6-mockup-panel .v6-intro-label-one{ display: none; } /* Fake-mouse hover feedback on the CN logo + wordmark — fires during the click phase, with a 540ms delay (matches when the cursor's tip lands on the logo per v6FxCursorIn at ~50% × 900ms). Logo lifts + glows; wordmark brightens and picks up a subtle underline. */.hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-logo{ animation: v6LogoSpring 1100ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards, v6IntroLogoHover 700ms cubic-bezier(0.22, 1, 0.36, 1) 540ms forwards; } @keyframes v6IntroLogoHover { 0% { transform: scale(1) translateY(0); filter: drop-shadow(0 14px 36px rgba(120, 115, 245, 0.40)) drop-shadow(0 4px 10px rgba(120, 115, 245, 0.22)); } 100% { transform: scale(1.08) translateY(-2px); filter: drop-shadow(0 18px 44px rgba(120, 115, 245, 0.58)) drop-shadow(0 6px 14px rgba(120, 115, 245, 0.32)); } }.hero .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="click"] .v6-intro-cn-mark{ animation: v6WordmarkRise 600ms cubic-bezier(0.22, 1, 0.36, 1) 700ms forwards, v6IntroMarkHover 480ms cubic-bezier(0.22, 1, 0.36, 1) 540ms forwards; } @keyframes v6IntroMarkHover { 0% { color: var(--v6-ink); text-shadow: none; } 100% { color: var(--blurple); text-shadow: 0 0 12px color-mix(in srgb, var(--blurple) 35%, transparent); } } /* ───── Logo bloom outward as picker/ring takes over ───── */.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="ring"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="stage"] .v6-intro-cn, .hero .v6-mockup-panel[data-v6-phase="success"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-intro-cn, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-intro-cn{ animation: v6LogoBloom 700ms cubic-bezier(0.4, 0, 0.6, 1) forwards; pointer-events: none; } @keyframes v6LogoBloom { 0% { opacity: 1; transform: scale(1); filter: blur(0); } 100% { opacity: 0; transform: scale(1.4); filter: blur(12px); } } /* Ring node entrance — animate ONLY opacity + scale (modern CSS scale property composes with `transform` instead of overriding it). The legacy --node-transform that places each node on the circle keeps applying. */.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node, .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node, .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node{ animation: v6NodeEmerge 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="0"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="0"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="0"]{ animation-delay: 200ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="1"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="1"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="1"]{ animation-delay: 280ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="2"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="2"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="2"]{ animation-delay: 360ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="3"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="3"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="3"]{ animation-delay: 440ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="4"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="4"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="4"]{ animation-delay: 520ms; }.hero .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="5"], .hero .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="5"], .hero .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .stage-node[data-stage-index="5"]{ animation-delay: 600ms; } @keyframes v6NodeEmerge { 0% { opacity: 0; scale: 0.4; filter: blur(4px); } 60% { opacity: 1; scale: 1.1; filter: blur(0); } 100% { opacity: 1; scale: 1; filter: blur(0); } } /* ───── Ring → Stage camera zoom (overrides earlier phase rules) ───── The ring scales AWAY from viewer, the stage panel scales TOWARD viewer. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease, --completion-percent 700ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels{ transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 1000ms cubic-bezier(0.16, 1, 0.3, 1), filter 600ms ease; }.hero .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .navigator-ring{ opacity: 0.08; transform: var(--v6-tilt) scale(0.62); filter: blur(4px); pointer-events: none; }.hero .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-stage-panels{ opacity: 1; transform: scale(1); filter: blur(0); } /* During success the stage panel collapses; ring partially re-emerges */.hero .v6-mockup-panel[data-v6-phase="success"] .v6-stage-panels, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-stage-panels{ opacity: 0; transform: scale(0.88); filter: blur(4px); }.hero .v6-mockup-panel[data-v6-phase="success"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .navigator-ring{ opacity: 0.22; transform: var(--v6-tilt) scale(0.78); filter: blur(2px); } /* ───── Stage panel inner entry — adds focal depth on top of zoom ───── */.hero .v6-mockup-panel .v6-stage-panel.is-active, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.is-active{ animation: v6StagePanelIn 900ms cubic-bezier(0.16, 1, 0.3, 1) backwards; } @keyframes v6StagePanelIn { 0% { opacity: 0; transform: translateY(20px) scale(0.94); filter: blur(6px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } /* ───── FPAI agent strip — pinned to the bottom of every stage panel ───── Live narration of what First-Party AI is doing in this stage. Persistent affordance so the AI presence is felt continuously, not just by accident. */.hero .v6-mockup-panel .v6-agent, .surface-beat--navigate .v6-mockup-panel .v6-agent{ margin-top: auto; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--purple) 6%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent); border-radius: 10px; }.hero .v6-mockup-panel .v6-agent-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-orb{ width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); box-shadow: 0 0 0 0 rgba(120, 115, 245, 0.6); animation: v6AgentPulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes v6AgentPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 115, 245, 0.55), 0 0 8px rgba(120, 115, 245, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(120, 115, 245, 0), 0 0 14px rgba(120, 115, 245, 0.8); } }.hero .v6-mockup-panel .v6-agent-text, .surface-beat--navigate .v6-mockup-panel .v6-agent-text{ font-family: var(--font-main); font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); letter-spacing: -0.005em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-agent-text.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-agent-text.is-changing{ opacity: 0; }.hero .v6-mockup-panel .v6-agent-progress, .surface-beat--navigate .v6-mockup-panel .v6-agent-progress{ position: relative; width: 28px; height: 3px; border-radius: 999px; background: color-mix(in srgb, var(--purple) 18%, transparent); overflow: hidden; flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-progress span, .surface-beat--navigate .v6-mockup-panel .v6-agent-progress span{ position: absolute; inset: 0; background: linear-gradient(90deg, var(--blurple), var(--purple)); transform-origin: left; animation: v6AgentProgress 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes v6AgentProgress { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } } /* ═══════════════════════════════════════════════════════════════ STAGE AGENTS — first-class section alongside collaboration spaces. Each stage has its own tailored agents (multi-role: Host / Guest) that live on the same surface as the collaboration content, not as a footer. Status line above shows the currently-narrating action. ═══════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-agents, .surface-beat--navigate .v6-mockup-panel .v6-agents{ margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: color-mix(in srgb, var(--blurple) 5%, transparent); border: 1px solid color-mix(in srgb, var(--blurple) 20%, transparent); border-radius: 10px; }.hero .v6-mockup-panel .v6-agents-header, .surface-beat--navigate .v6-mockup-panel .v6-agents-header{ display: flex; align-items: center; gap: 8px; }.hero .v6-mockup-panel .v6-agents-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-agents-eyebrow{ font-family: var(--v6-mono, var(--brand-font)); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blurple); flex-shrink: 0; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--blurple) 14%, transparent); }.hero .v6-mockup-panel .v6-agents-status, .surface-beat--navigate .v6-mockup-panel .v6-agents-status{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--inv-bg-color) 75%, transparent); letter-spacing: -0.005em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-agents-status.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-agents-status.is-changing{ opacity: 0; }.hero .v6-mockup-panel .v6-agents-row, .surface-beat--navigate .v6-mockup-panel .v6-agents-row{ display: flex; gap: 6px; flex-wrap: wrap; }.hero .v6-mockup-panel .v6-agent-chip, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip{ display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 6px; border-radius: 999px; background: color-mix(in srgb, var(--main-bg-color) 70%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); font-family: var(--brand-font); font-size: 10px; line-height: 1; }.hero .v6-mockup-panel .v6-agent-chip-icon, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-icon{ width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; flex-shrink: 0; box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 50%, transparent); }.hero .v6-mockup-panel .v6-agent-chip-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-icon svg{ width: 9px; height: 9px; }.hero .v6-mockup-panel .v6-agent-chip-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-name{ font-weight: 600; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-agent-chip-role, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip-role{ font-size: 8px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; line-height: 1; }.hero .v6-mockup-panel .v6-agent-chip[data-role="host"] .v6-agent-chip-role, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip[data-role="host"] .v6-agent-chip-role{ background: color-mix(in srgb, var(--blurple) 14%, transparent); color: var(--blurple); }.hero .v6-mockup-panel .v6-agent-chip[data-role="guest"] .v6-agent-chip-role, .surface-beat--navigate .v6-mockup-panel .v6-agent-chip[data-role="guest"] .v6-agent-chip-role{ background: color-mix(in srgb, var(--purple) 14%, transparent); color: var(--purple); } /* ───── Experience: recipient chips row ───── */.hero .v6-mockup-panel .v6-recipient, .surface-beat--navigate .v6-mockup-panel .v6-recipient{ display: flex; align-items: center; gap: 6px; padding: 8px 0; flex-wrap: wrap; }.hero .v6-mockup-panel .v6-recipient-label, .surface-beat--navigate .v6-mockup-panel .v6-recipient-label{ font-family: var(--v6-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v6-ink-3); margin-right: 4px; }.hero .v6-mockup-panel .v6-recipient-chip, .surface-beat--navigate .v6-mockup-panel .v6-recipient-chip{ display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 1px solid var(--v6-hair); font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: var(--v6-ink); }.hero .v6-mockup-panel .v6-recipient-av, .surface-beat--navigate .v6-mockup-panel .v6-recipient-av{ width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #569AF1, #7873F5); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 8px; font-weight: 700; }.hero .v6-mockup-panel .v6-recipient-av-jb, .surface-beat--navigate .v6-mockup-panel .v6-recipient-av-jb{ background: linear-gradient(135deg, #FFE8C5, #FFD188); color: var(--v6-ink); }.hero .v6-mockup-panel .v6-recipient-av-la, .surface-beat--navigate .v6-mockup-panel .v6-recipient-av-la{ background: linear-gradient(135deg, #C9F0E0, #8DDBC5); color: var(--v6-ink); } /* ───── Scope: contract total ───── */.hero .v6-mockup-panel .v6-scope-total, .surface-beat--navigate .v6-mockup-panel .v6-scope-total{ display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: color-mix(in srgb, var(--purple) 8%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 24%, transparent); border-radius: 9px; }.hero .v6-mockup-panel .v6-scope-total-label, .surface-beat--navigate .v6-mockup-panel .v6-scope-total-label{ font-family: var(--v6-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-scope-total-value, .surface-beat--navigate .v6-mockup-panel .v6-scope-total-value{ font-family: var(--brand-font); font-size: 15px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--blurple), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ───── Commit: contract metadata row ───── */.hero .v6-mockup-panel .v6-commit-meta, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 8px 0; }.hero .v6-mockup-panel .v6-commit-meta-item, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta-item{ display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid var(--v6-hair); border-radius: 8px; }.hero .v6-mockup-panel .v6-commit-meta-label, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta-label{ font-family: var(--v6-mono); font-size: 8px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--v6-ink-3); }.hero .v6-mockup-panel .v6-commit-meta-value, .surface-beat--navigate .v6-mockup-panel .v6-commit-meta-value{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: var(--v6-ink); } /* ───── Deploy: gantt owners column ───── */.hero .v6-mockup-panel .v6-gantt-row, .surface-beat--navigate .v6-mockup-panel .v6-gantt-row{ grid-template-columns: 60px 1fr 22px; }.hero .v6-mockup-panel .v6-gantt-owner, .surface-beat--navigate .v6-mockup-panel .v6-gantt-owner{ width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #569AF1, #7873F5); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--v6-mono); font-size: 8px; font-weight: 700; } /* ───── Success: insight strip ───── */.hero .v6-mockup-panel .v6-success-insight, .surface-beat--navigate .v6-mockup-panel .v6-success-insight{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: color-mix(in srgb, var(--blurple) 8%, transparent); border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent); border-radius: 9px; }.hero .v6-mockup-panel .v6-insight-dot, .surface-beat--navigate .v6-mockup-panel .v6-insight-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--blurple); flex-shrink: 0; animation: v6AgentPulse 2s ease-in-out infinite; }.hero .v6-mockup-panel .v6-insight-text, .surface-beat--navigate .v6-mockup-panel .v6-insight-text{ font-family: var(--brand-font); font-size: 11px; font-weight: 500; color: var(--v6-ink); letter-spacing: -0.005em; } /* ───── Stage panel layout: enable flex column so agent strip can mt-auto pin to bottom ───── */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ display: flex; flex-direction: column; } /* ───── Ring active-state fix — manual class for current stage ───── The legacy navigator-ring's own active-state logic doesn't always keep up with our cycle, so we explicitly mark the active and the completed stage-nodes via JS. White text everywhere inside the active node beats the legacy `.stage-node.is-active *` lightblue color rule that would otherwise give blue text on a blue gradient. Active ::before glow uses border-radius:16px (matches the node's 12px + 4px outset inset) so the glow follows the rounded-rectangle shape, not an oval. */.hero .v6-mockup-panel .stage-node.v6-is-active, .hero .v6-mockup-panel .stage-node.v6-is-active *, .hero .v6-mockup-panel .stage-node.v6-is-active svg, .hero .v6-mockup-panel .stage-node.v6-is-active svg *, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active *, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active svg, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active svg *{ color: #fff !important; stroke: #fff !important; } /* Stage-node background layer — always present so active → complete * transitions smoothly. Uses @property-registered CSS variables so the * gradient colors interpolate (raw `background: linear-gradient(...)` * swaps don't animate; per-color custom props do). Default state holds * the colors invisible (opacity 0); active fills with blurple/purple * + pulse; complete cross-interpolates to green + drops the pulse. */ @property --node-grad-a { syntax: ''; inherits: false; initial-value: rgba(120, 115, 245, 0); } @property --node-grad-b { syntax: ''; inherits: false; initial-value: rgba(167, 139, 250, 0); }.hero .v6-mockup-panel .stage-node::before, .surface-beat--navigate .v6-mockup-panel .stage-node::before{ content: ''; position: absolute; inset: -4px; border-radius: 16px; background: linear-gradient(135deg, var(--node-grad-a), var(--node-grad-b)); z-index: -1; opacity: 0; transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), --node-grad-a 620ms cubic-bezier(0.22, 1, 0.36, 1), --node-grad-b 620ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 620ms ease; }.hero .v6-mockup-panel .stage-node.v6-is-active::before, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active::before{ opacity: 1; --node-grad-a: var(--blurple); --node-grad-b: var(--purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent), 0 6px 18px rgba(120, 115, 245, 0.45); animation: v6ActiveNodePulse 2.2s ease-in-out infinite; } /* Active node sits on the blurple→purple gradient (the ::before above at * opacity 1). Its NAME label (::after) was blurple and its icon was tinted, * which read as low-contrast/unreadable on that gradient. Force the label + * icon WHITE whenever the gradient is showing (.v6-is-active). Scoped to * .v6-is-active ONLY — NOT .is-active, which is hero's light persistent * state where white would be invisible. Beats the blurple `!important` on * .stage-node.v6-is-active::after via higher specificity + later source. */ .hero .v6-mockup-panel .stage-node.v6-is-active::after, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active::after { color: #fff !important; } .hero .v6-mockup-panel .stage-node.v6-is-active .stage-node-face, .hero .v6-mockup-panel .stage-node.v6-is-active .stage-node-face *, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active .stage-node-face, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-active .stage-node-face * { color: #fff !important; } /* Completed nodes: gradient layer fades out smoothly (opacity 1 → 0 * over 620ms via the transition on ::before above). The node returns * to its default neutral background; the green check fades in * separately. No green-tinted background or glow — completed nodes * sit on the same main-bg as inactive ones with only the check * marking them done. */.hero .v6-mockup-panel .stage-node.v6-is-done::before, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-done::before{ opacity: 0; animation: none; } @keyframes v6ActiveNodePulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent), 0 0 0 0 rgba(120, 115, 245, 0.45), 0 6px 18px rgba(120, 115, 245, 0.45); } 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 18%, transparent), 0 0 0 8px rgba(120, 115, 245, 0), 0 6px 18px rgba(120, 115, 245, 0.45); } } /* No corner check badge on completed nodes — the center check from `.stage-node.is-complete .stage-node-face::after` is already there. Two checks looked like a duplicate. */.hero .v6-mockup-panel .stage-node.v6-is-done::after, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-done::after{ content: none !important; } /* Stage-complete burst — plays ONCE when a node first picks up .v6-is-done (i.e. the stage just finished). Green halo expands and fades out around the node, syncing with the ring re-emerging + progress segment advancing so the user reads "stage X complete → moving on" as one smooth beat. */.hero .v6-mockup-panel .stage-node.v6-is-done, .surface-beat--navigate .v6-mockup-panel .stage-node.v6-is-done{ animation: v6NodeCompleteBurst 1100ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes v6NodeCompleteBurst { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 75%, transparent), 0 0 0 0 color-mix(in srgb, var(--green) 30%, transparent); } 45% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 0%, transparent), 0 0 22px 4px color-mix(in srgb, var(--green) 32%, transparent); } 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--green) 0%, transparent), 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); } } /* ═══════════════════════════════════════════════════════════════ ROBUST RING LAYOUT — hardcoded node positions, no calc chain The legacy --node-transform uses a rotate→translate→rotate chain that depends on --node-distance which depends on --navigator-size which depends on 100vw. That chain produces timing/sizing bugs when the ring is inside a constrained, animating container. Solution: hardcode each node's final pixel offset around a circle of radius 120px. No dependencies. No fragility. ═══════════════════════════════════════════════════════════════ */ /* DO NOT touch the navigator-ring container's size — it sizes the panel and changing it shifts the whole content wrapper. Just hide the chevrons inside, then hardcode node positions below independently of ring size. */ /* Wrapper for panel + controls. The stack's natural height = the panel's height only — the controls are absolutely positioned BELOW the stack (out of layout flow) so the panel itself stays vertically centered by the parent flex/grid, while the controls feel like product chrome "attached" below it without affecting centering. */.hero .v6-panel-stack, .surface-beat--navigate .v6-panel-stack{ position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; } /* Panel controls — chevrons + counter + Live Journey View label. Floats below the panel via absolute positioning so the panel stays the centered element; the controls visually attach beneath it like detached product chrome. */.hero .v6-panel-controls, .surface-beat--navigate .v6-panel-controls{ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; opacity: 1; pointer-events: auto; z-index: 5; } /* Premium glass — lighter, more translucent. Shared by all three controls for a cohesive chrome row: same height (30px), same bg/border opacity, same backdrop blur. Counter + label are both pills (999px); chevrons stay rounded-square because they're icon buttons. */.hero .v6-panel-controls .ring-nav-chevron, .hero .v6-panel-controls .ring-nav-counter, .hero .v6-panel-controls .navigator-ring-micro-label, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron, .surface-beat--navigate .v6-panel-controls .ring-nav-counter, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label{ position: static; bottom: auto; top: auto; right: auto; left: auto; transform: none; height: 30px; box-sizing: border-box; /* Glass matches the .v6-mockup-panel exactly — same bg/border/blur so the controls read as the same material as the panel they sit below. (Panel: 46% main-bg, 16% inv-bg border, blur 18 saturate 1.35) */ background: color-mix(in srgb, var(--main-bg-color) 46%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--brand-font); color: var(--inv-bg-color); opacity: 1; border-radius: 8px; }.hero .v6-panel-controls .ring-nav-chevron, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron{ width: 30px; padding: 0; cursor: pointer; }.hero .v6-panel-controls .ring-nav-chevron svg, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron svg{ width: 14px; height: 14px; stroke: var(--inv-bg-color); stroke-width: 2.2; opacity: 0.78; }.hero .v6-panel-controls .ring-nav-counter, .surface-beat--navigate .v6-panel-controls .ring-nav-counter{ padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; width: 70px; /* fixed width — "9 of 9" doesn't wrap, doesn't shrink in flex */ white-space: nowrap; flex-shrink: 0; } /* Fixed width so swapping the step text doesn't jostle the chevrons. Text centered inside; long step names ellipsis. flex-shrink:0 keeps it from collapsing on narrow viewports. */.hero .v6-panel-controls .navigator-ring-micro-label, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label{ gap: 7px; padding: 0 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.005em; white-space: nowrap; width: 220px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--inv-bg-color) 82%, transparent); }.hero .v6-panel-controls .ring-nav-chevron, .surface-beat--navigate .v6-panel-controls .ring-nav-chevron{ flex-shrink: 0; }.hero .v6-panel-controls .navigator-ring-micro-label .micro-label-pulse, .surface-beat--navigate .v6-panel-controls .navigator-ring-micro-label .micro-label-pulse{ width: 6px; height: 6px; border-radius: 50%; background: var(--green, #2BB66D); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 60%, transparent); animation: v6MicroPulse 1.8s ease-in-out infinite; } @keyframes v6MicroPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.78); } } /* Controls are always visible — no phase gating. */ /* Node positions on a circle of radius --node-radius (= --navigator-size / 2). Six nodes at 60° intervals: sin(60°) ≈ 0.866, cos(60°) = 0.5. Driven by the navigator-ring's clamp() so the orbital scales with viewport. */.hero .v6-mockup-panel .stage-node[data-stage-index="0"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="0"]{ transform: translate(-50%, -50%) translate(0, calc(-1 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="1"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="1"]{ transform: translate(-50%, -50%) translate(calc(0.866 * var(--node-radius)), calc(-0.5 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="2"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="2"]{ transform: translate(-50%, -50%) translate(calc(0.866 * var(--node-radius)), calc(0.5 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="3"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="3"]{ transform: translate(-50%, -50%) translate(0, var(--node-radius)) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="4"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="4"]{ transform: translate(-50%, -50%) translate(calc(-0.866 * var(--node-radius)), calc(0.5 * var(--node-radius))) !important; }.hero .v6-mockup-panel .stage-node[data-stage-index="5"], .surface-beat--navigate .v6-mockup-panel .stage-node[data-stage-index="5"]{ transform: translate(-50%, -50%) translate(calc(-0.866 * var(--node-radius)), calc(-0.5 * var(--node-radius))) !important; } /* Shrink the navigator-ring container to 240px (matches the hardcoded node orbital). User explicitly approved size reduction. With the container at 240px, ::before, the completion arc, and the nodes all land on the same stroke without any pseudo-element offset trickery. The V6 dashed ::after is no longer needed — dropped to leave one ring. */.hero .v6-mockup-panel .navigator-ring, .surface-beat--navigate .v6-mockup-panel .navigator-ring{ --navigator-size: clamp(280px, 30vw, 400px); --node-radius: calc(var(--navigator-size) / 2); width: var(--navigator-size); height: var(--navigator-size); margin: 0 auto; }.hero .v6-mockup-panel .navigator-ring::after, .surface-beat--navigate .v6-mockup-panel .navigator-ring::after{ display: none; } /* ───── RING CENTER — fills the orbital ring's empty middle ───── Shows the current stage's icon, eyebrow ("Stage X of 6"), and title ("Discovery"/"Experience"/etc.). Anchored absolutely at center of the v6-mockup-panel. Only visible during ring/stage/success phases. */.hero .v6-mockup-panel .v6-ring-center, .surface-beat--navigate .v6-mockup-panel .v6-ring-center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; z-index: 6; text-align: center; opacity: 0; transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1), filter 480ms ease; filter: blur(4px); }.hero .v6-mockup-panel[data-v6-phase="ring"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-ring-center{ opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); animation: v6RingCenterIn 900ms cubic-bezier(0.16, 1, 0.3, 1) 700ms backwards; } @keyframes v6RingCenterIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); filter: blur(6px); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); } }.hero .v6-mockup-panel[data-v6-phase="stage"] .v6-ring-center, .hero .v6-mockup-panel[data-v6-phase="success"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="stage"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="success"] .v6-ring-center{ opacity: 0; transform: translate(-50%, -50%) scale(0.85); filter: blur(4px); }.hero .v6-mockup-panel .v6-ring-center-icon, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-icon{ width: 56px; height: 56px; border-radius: 16px; background: color-mix(in srgb, var(--main-bg-color) 80%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); display: flex; align-items: center; justify-content: center; color: var(--inv-bg-color); box-shadow: 0 8px 22px color-mix(in srgb, var(--inv-bg-color) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); transition: opacity 280ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1); }.hero .v6-mockup-panel .v6-ring-center-icon.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-icon.is-changing{ opacity: 0; transform: scale(0.85); }.hero .v6-mockup-panel .v6-ring-center-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-icon svg{ width: 26px; height: 26px; }.hero .v6-mockup-panel .v6-ring-center-label, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-label{ display: flex; flex-direction: column; align-items: center; gap: 2px; }.hero .v6-mockup-panel .v6-ring-center-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-eyebrow{ font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent); transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-ring-center-title, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-title{ font-family: var(--brand-font); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; background: linear-gradient(135deg, var(--blurple) 0%, var(--purple) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ring-center-title.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-ring-center-title.is-changing{ opacity: 0; transform: translateY(-4px); } /* ════════════════════════════════════════════════════════════════════ HERO TEXT + CTA ALIGNMENT FIX ════════════════════════════════════════════════════════════════════ */ /* "First-Party AI™" — NO gradient, NO underline, NO border. Just solid main contrast color + bold so it reads as darker/heavier than the muted surrounding body text. */.hero .hero-tag-gradient, .hero a.hero-tag-gradient, .surface-beat--navigate .surface-beat--navigate-tag-gradient, .surface-beat--navigate a.surface-beat--navigate-tag-gradient{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent) !important; font-weight: 550 !important; opacity: 1 !important; text-decoration: none !important; border-bottom: none !important; } /* CTA row alignment — buttons have 14px horizontal padding so their visible text starts 14px inside the row. Pull the row 14px to the left so the FIRST button's text aligns flush-left with the headline and the subtext. */ /* Buttons have 0.7rem horizontal padding for hover-bg breathing room. Pull the row left by the same amount so the first button's TEXT aligns flush with the headline/subtext left edge. */.hero .hero-cta-row, .surface-beat--navigate .surface-beat--navigate-cta-row{ margin-left: -0.7rem; } /* ════════════════════════════════════════════════════════════════════ PREMIUM SCROLL REVEALS — copied verbatim from michaelcantow.com (PersonalSite/mcantow.github.io/css/main.css L3409–3497). .reveal — fade up + blur clear (base) .reveal-card — 3D card entry (rotateX + scale + blur) .reveal-left/-right — side slide with blur .reveal-stagger > * — children get cascading delay via auto-assigned --i ════════════════════════════════════════════════════════════════════ */ :root { --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); } .reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 820ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 960ms var(--ease-reveal) var(--reveal-delay, 0ms), filter 720ms ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-card { opacity: 0; transform: translateY(40px) rotateX(6deg) scale(0.97); filter: blur(7px); transform-origin: 50% 100%; transition: opacity 880ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 1060ms var(--ease-spring) var(--reveal-delay, 0ms), filter 760ms ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal-card.is-visible { opacity: 1; transform: translateY(0) rotateX(0) scale(1); filter: blur(0); } .reveal-left, .reveal-right { opacity: 0; filter: blur(6px); transition: opacity 820ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 960ms var(--ease-reveal) var(--reveal-delay, 0ms), filter 700ms ease var(--reveal-delay, 0ms); will-change: opacity, transform, filter; } .reveal-left { transform: translateX(-36px); } .reveal-right { transform: translateX(36px); } .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: translateX(0); filter: blur(0); } .reveal-stagger > *.reveal, .reveal-stagger > *.reveal-card, .reveal-stagger > *.reveal-left, .reveal-stagger > *.reveal-right { --reveal-delay: calc(var(--i, 0) * 110ms); } /* Perspective for 3D card reveals — matches personal site selectors plus the V6 card grids that get .reveal-card on their children. */ .thesis-grid, .cluster-compare, .contact-links, .timeline, .axes, .cn-features, .proof-stats-grid, .meets-modes, .roi-multipliers { perspective: 1600px; perspective-origin: 50% 30%; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-card, .reveal-left, .reveal-right { opacity: 1; transform: none; filter: none; transition: none; } } /* ── "Experience your journey" gallery — grander reveal ────────────── Same motion vocabulary as every other .reveal (fade + rise + blur-clear) so it doesn't clash with the rest of the page — just dialed up: more travel, a subtle cinematic zoom-in, heavier blur clearing, and slower, springier timing so the section lands with weight. Scoped to the gallery only; higher specificity than base .reveal so it wins. */ #template-gallery .reveal { transform: translateY(60px) scale(0.965); filter: blur(14px); transition: opacity 1200ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 1500ms var(--ease-spring) var(--reveal-delay, 0ms), filter 1000ms ease var(--reveal-delay, 0ms); } #template-gallery .reveal.is-visible { transform: translateY(0) scale(1); filter: blur(0); } @media (prefers-reduced-motion: reduce) { #template-gallery .reveal { opacity: 1; transform: none; filter: none; transition: none; } } /* ── "Orchestrated by First-Party AI" — grander reveal ─────────────── Same grander treatment as the gallery (fade + rise + cinematic zoom + blur-clear, slower springy timing) so the header, the motion-graphic stage, and the footer all land with weight and cascade as one section. Scoped to #ai-in-practice; reduced-motion guard mandatory. */ #ai-in-practice .reveal { transform: translateY(60px) scale(0.965); filter: blur(14px); transition: opacity 1200ms var(--ease-reveal) var(--reveal-delay, 0ms), transform 1500ms var(--ease-spring) var(--reveal-delay, 0ms), filter 1000ms ease var(--reveal-delay, 0ms); } #ai-in-practice .reveal.is-visible { transform: translateY(0) scale(1); filter: blur(0); } /* EXCEPTION: the motion-graphic stage holds a live build (ring, agents, mascot). Wrapping it in the grander rise+zoom+blur would HIDE and distort that build for ~1.5s — which is exactly why the "agent" looked like it never arrived. Give the stage a quick, clean opacity fade only; its own internal animation is the entrance. (Higher specificity wins over the grander rule above.) */ #ai-in-practice .ai-practice-stage.reveal { transform: none; filter: none; transition: opacity 600ms var(--ease-reveal) var(--reveal-delay, 0ms); } #ai-in-practice .ai-practice-stage.reveal.is-visible { transform: none; filter: none; } /* The center AI mascot ("agent") on the index reads as broken when it waits the full standalone-page delay before fading in. Snap it in promptly here so a fast scroll still catches it arriving. */ #ai-in-practice .fpai-journey-mascot { transition: opacity 0.5s ease 0.35s; } @media (prefers-reduced-motion: reduce) { #ai-in-practice .reveal { opacity: 1; transform: none; filter: none; transition: none; } } /* ════════════════════════════════════════════════════════════════════ FIRST-PARTY AI SECTION — "wow" polish. Home-only (scoped to #ai-in-practice, which exists nowhere else), CSS-only, so the SHARED journey carousel and the standalone First-Party AI page are untouched. Three living touches: 1. an ambient aura that slowly breathes behind the ring (the ring reads as the section's light source), 2. a living-gradient section title with a soft brand glow, 3. a slow shimmer sweeping the ML tech line so the terms feel alive. Every animation is disabled under prefers-reduced-motion. ════════════════════════════════════════════════════════════════════ */ /* Base panel gradient — a deep indigo lifting from the upper focal area down to near-black, so the flat #06060e band gains dimension. The aura ::before glows and the content both layer over this. */ #ai-in-practice { /* Deep base; the drifting aurora (::before) supplies the moving colour. */ background: radial-gradient(120% 85% at 50% 30%, #10122a 0%, transparent 60%), linear-gradient(178deg, #0a0b1c 0%, #070711 52%, #050509 100%); background-color: #050509; } /* Footer-inspired signature (mirrors footer.footer-v2::before): a luminous purple→blue→pink hairline glowing across the section's top edge. */ /* The premium border effect — same purple→blue→pink gradient as the footer and the CustomerNode card, framing this section top AND bottom. drop-shadow glows both edges; overflow:hidden on the section clips the outward glow. */ #ai-in-practice::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(120, 115, 245, 0.62) 22%, rgba(96, 165, 250, 0.7) 50%, rgba(212, 144, 255, 0.6) 78%, transparent 100%) top / 100% 2px no-repeat, linear-gradient(90deg, transparent 0%, rgba(120, 115, 245, 0.62) 22%, rgba(96, 165, 250, 0.7) 50%, rgba(212, 144, 255, 0.6) 78%, transparent 100%) bottom / 100% 2px no-repeat; filter: drop-shadow(0 0 9px rgba(120, 115, 245, 0.42)) drop-shadow(0 0 9px rgba(96, 165, 250, 0.25)); } /* Lift the visible content wrapper onto its own layer so the aura sits BEHIND the ring rather than washing over it. Scoped to the content div (not `> *`) so the visually-hidden .screen-reader sibling keeps its own hiding position. */ #ai-in-practice > .max-w-5xl { position: relative; z-index: 1; } /* Ambient aura — corner washes plus a central bloom centred on the ring that slowly breathes in scale + brightness. Overrides the base ::before background (higher specificity via the id) and drops it to z-index 0, behind content. */ /* Aurora field: five soft colour blobs (blurple / purple / blue / pink) blurred into one organic cloud that slowly drifts, rotates and breathes behind the ring — a living background instead of a static gradient. inset:-10% + scale keeps the edges covered as it moves; overflow:hidden on the section clips the surplus. */ #ai-in-practice::before { z-index: 0; inset: -10%; background: radial-gradient(34% 40% at 50% 56%, color-mix(in srgb, var(--blurple) 22%, transparent) 0%, transparent 58%), radial-gradient(30% 36% at 20% 24%, color-mix(in srgb, var(--purple) 20%, transparent) 0%, transparent 60%), radial-gradient(28% 34% at 82% 26%, color-mix(in srgb, #60a5fa 17%, transparent) 0%, transparent 60%), radial-gradient(34% 38% at 76% 78%, color-mix(in srgb, #d490ff 16%, transparent) 0%, transparent 60%), radial-gradient(32% 36% at 22% 80%, color-mix(in srgb, var(--blurple) 14%, transparent) 0%, transparent 60%); filter: blur(28px); animation: aiPracticeAurora 28s ease-in-out infinite alternate; will-change: transform; } @keyframes aiPracticeAurora { 0% { transform: translate3d(-1.5%, -1%, 0) scale(1.06) rotate(-3deg); } 50% { transform: translate3d(1.8%, 1.2%, 0) scale(1.16) rotate(4deg); } 100% { transform: translate3d(-0.8%, 1.6%, 0) scale(1.1) rotate(-2deg); } } /* Living-gradient title. Inherits -webkit-background-clip:text from the base rule; here we widen the gradient, add a soft brand glow, and drift it. */ #ai-in-practice .ai-practice-title { background-image: linear-gradient(100deg, #4f46e5 0%, #6366f1 25%, #8b5cf6 50%, #6366f1 75%, #4f46e5 100%); background-size: 200% auto; filter: drop-shadow(0 3px 26px color-mix(in srgb, var(--blurple) 30%, transparent)); animation: aiPracticeSheen 7s linear infinite; } @keyframes aiPracticeSheen { from { background-position: 0 center; } to { background-position: 200% center; } } /* Kicker as a First-Party-AI-style glass pill (matches .fpai-pill on the FPAI page). The plain caps read flat next to the crafted FPAI section headers; the pill + purple glow gives the home section the same premium framing. */ #ai-in-practice .ai-practice-kicker { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 1.05rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.34em; color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 30%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--purple) 20%, transparent), inset 0 0 12px color-mix(in srgb, var(--purple) 7%, transparent); margin-bottom: 1.35rem; } /* A slow bright band sweeps across the (otherwise very faint) ML tech line. */ #ai-in-practice .ai-practice-legal-tech-line { background-image: linear-gradient(100deg, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 0%, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 42%, color-mix(in srgb, var(--inv-bg-color) 80%, transparent) 50%, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 58%, color-mix(in srgb, var(--inv-bg-color) 15%, transparent) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: aiPracticeTechSweep 8s linear infinite; } @keyframes aiPracticeTechSweep { from { background-position: 130% center; } to { background-position: -30% center; } } @media (prefers-reduced-motion: reduce) { #ai-in-practice::before, #ai-in-practice .ai-practice-title, #ai-in-practice .ai-practice-legal-tech-line { animation: none; } #ai-in-practice .ai-practice-legal-tech-line { background-image: none; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); } } /* ════════════════════════════════════════════════════════════════════ CREATE / SHARE / NAVIGATE PICKER — first beat of the journey demo. After the CN logo lands, the panel pivots to a three-up of the app's top-level actions (Create, Share, Navigate). The cursor moves to Navigate and clicks it, which kicks off the ring intro. ════════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; transform: scale(0.92); filter: blur(4px); pointer-events: none; z-index: 4; /* Same enter/exit rhythm as the ring → stage transition (the reference "perfect" transition). Was scale(0.94) blur(8) with 480/600/420ms timings — too much zoom + blur + faster timing gave the exit a "shrinks away" feel instead of a calm zoom-in. */ transition: opacity 600ms var(--v6-ease), transform 700ms var(--v6-spring), filter 460ms ease; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-picker{ opacity: 1; transform: scale(1); filter: blur(0); }.hero .v6-mockup-panel .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-csn-eyebrow{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--v6-ink) 70%, transparent); opacity: 0; transform: translateY(6px); transition: opacity 360ms var(--v6-ease) 80ms, transform 420ms var(--v6-ease) 80ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-eyebrow{ opacity: 1; transform: translateY(0); } /* iOS-tile layout matching the React app's DashboardLandingV2: 3 columns, primary tile per column = 60×60 icon box (14px radius) with accent-tinted background/border, label centered below. */.hero .v6-mockup-panel .v6-csn-columns, .surface-beat--navigate .v6-mockup-panel .v6-csn-columns{ display: flex; gap: 16px; align-items: flex-start; justify-content: center; } /* Share column wrapper — mirrors SPA's `.wrap` (CommandColumn.module.css): stacks the glass column + the Agent Mode footer pill vertically so the pill sits OUTSIDE the card, not clipped by its overflow: hidden. */.hero .v6-mockup-panel .v6-csn-column-wrap, .surface-beat--navigate .v6-mockup-panel .v6-csn-column-wrap{ display: flex; flex-direction: column; align-items: center; gap: 8px; } /* Premium polish — mirrors SPA's CommandColumn + bare-header treatment (DashboardLandingV2). Each column is a glass card with a 2px gradient accent strip at top. The icon sits bare (no containing box) as a section emblem — same hierarchy inversion the SPA uses to put visual weight on actionable surfaces rather than identity chrome. */.hero .v6-mockup-panel .v6-csn-column, .surface-beat--navigate .v6-mockup-panel .v6-csn-column{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 96px; padding: 16px 14px 14px; border-radius: 14px; background: color-mix(in srgb, var(--v6-paper) 78%, transparent); border: 1px solid color-mix(in srgb, var(--v6-ink) 9%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--v6-ink) 5%, transparent); overflow: hidden; --csn-accent: var(--blurple); } /* 2px gradient accent strip at top — verbatim from CommandColumn::before */.hero .v6-mockup-panel .v6-csn-column::before, .surface-beat--navigate .v6-mockup-panel .v6-csn-column::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--csn-accent) 70%, transparent), color-mix(in srgb, var(--csn-accent) 30%, transparent)); opacity: 0.85; z-index: 1; }.hero .v6-mockup-panel .v6-csn-column[data-accent="blurpleblue"], .surface-beat--navigate .v6-mockup-panel .v6-csn-column[data-accent="blurpleblue"]{ --csn-accent: #5689F5; }.hero .v6-mockup-panel .v6-csn-column[data-accent="blurple"], .surface-beat--navigate .v6-mockup-panel .v6-csn-column[data-accent="blurple"]{ --csn-accent: var(--blurple, #7873F5); }.hero .v6-mockup-panel .v6-csn-column[data-accent="purple"], .surface-beat--navigate .v6-mockup-panel .v6-csn-column[data-accent="purple"]{ --csn-accent: var(--purple, #A78BFA); }.hero .v6-mockup-panel .v6-csn-tile, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile{ display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 480ms var(--v6-ease), transform 520ms var(--v6-spring); will-change: transform, opacity; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile{ opacity: 1; transform: translateY(0) scale(1); }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="create"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="create"]{ transition-delay: 160ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="share"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="share"]{ transition-delay: 240ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="navigate"], .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-tile[data-csn="navigate"]{ transition-delay: 320ms; } /* Bare-emblem icon — no containing box, accent-tinted. Matches the SPA's `headerStyle="bare"` treatment used by DashboardLandingV2. */.hero .v6-mockup-panel .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon{ width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--csn-accent); transition: transform 280ms var(--v6-spring); }.hero .v6-mockup-panel .v6-csn-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon svg{ width: 32px; height: 32px; }.hero .v6-mockup-panel .v6-csn-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-label{ font-family: var(--brand-font); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.1; color: var(--csn-accent); } /* Agent Mode footer pill — sits below Share column, gradient gearhead */.hero .v6-mockup-panel .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 14px; /* Glass card chrome — matches .v6-csn-column so the pill reads as part of the same Create/Share/Navigate panel system. */ background: color-mix(in srgb, var(--v6-paper) 78%, transparent); border: 1px solid color-mix(in srgb, var(--v6-ink) 9%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--v6-ink) 5%, transparent); opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--v6-ease) 400ms, transform 480ms var(--v6-spring) 400ms; }.hero .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="csn"] .v6-csn-agent{ opacity: 1; transform: translateY(0); }.hero .v6-mockup-panel .v6-csn-agent-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon{ width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }.hero .v6-mockup-panel .v6-csn-agent-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon svg{ width: 100%; height: 100%; }.hero .v6-mockup-panel .v6-csn-agent-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-label{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; letter-spacing: 0.01em; color: color-mix(in srgb, var(--blurple) 92%, var(--v6-ink)); } /* Navigate's column lifts + glows when the cursor lands on it. JS adds `.csn-hover-navigate` to the mockup panel at the cursor-lands moment (not on phase entry) so the picker reads as un-hovered until the user's "cursor" actually arrives. */.hero .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]), .surface-beat--navigate .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]){ animation: v6CsnTileHover 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }.hero .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]) .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel.csn-hover-navigate .v6-csn-column:has(.v6-csn-tile[data-csn="navigate"]) .v6-csn-tile-icon{ animation: v6CsnIconLift 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6CsnTileHover { 0% { border-color: color-mix(in srgb, var(--v6-ink) 9%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 8px 24px color-mix(in srgb, var(--v6-ink) 5%, transparent); transform: translateY(0); } 100% { border-color: color-mix(in srgb, var(--csn-accent) 28%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 4%, transparent), 0 12px 36px color-mix(in srgb, var(--csn-accent) 18%, transparent); transform: translateY(-4px); } } @keyframes v6CsnIconLift { 0% { transform: scale(1); } 100% { transform: scale(1.06); } } /* Cursor + ripple for the intro pickers (CSN + SPD) live in .v6-fx wrappers — see the .v6-fx utility block. JS writes --fx-x/--fx-y onto the wrapper and toggles `.is-clicking` to fire. These intro cursors use a custom keyframe (v6FxCursorIntro, below) that lands at 35% and presses at 75% — versus the default 50/65 — so 40% of the duration is real hover time. Reads as a deliberate human "decide then click" instead of a slap. */.hero .v6-mockup-panel .v6-fx[data-v6-fx="csn"], .hero .v6-mockup-panel .v6-fx[data-v6-fx="spd"], .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="csn"], .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="spd"]{ --fx-duration: 1400ms; }.hero .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__cursor, .hero .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__cursor, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__cursor{ animation-name: v6FxCursorIntro; } /* Ripple fires at the press moment — 75% for the intro variant (default global rule uses 65%). */.hero .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__ripple, .hero .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="csn"].is-clicking .v6-fx__ripple, .surface-beat--navigate .v6-mockup-panel .v6-fx[data-v6-fx="spd"].is-clicking .v6-fx__ripple{ animation-delay: calc(var(--fx-delay, 0ms) + var(--fx-duration) * 0.75); } @keyframes v6FxCursorIntro { 0% { opacity: 0; transform: translate(60px, 60px) scale(0.6); } 35% { opacity: 1; transform: translate(0, 0) scale(1); } 75% { transform: translate(-4px, -4px) scale(0.88); } 85% { transform: translate(0, 0) scale(1); } 100% { opacity: 1; transform: translate(0, 0) scale(1); } } @media (prefers-reduced-motion: reduce) {.hero .v6-mockup-panel .v6-csn-picker, .hero .v6-mockup-panel .v6-csn-bubble, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-bubble{ transition: none !important; animation: none !important; } } /* ════════════════════════════════════════════════════════════════════ START / PLAN / DRIVE — single framing beat after the picker. Matches JourneyDetailV2.tsx: Goals pill (Start) + Journey Map pill (Plan, with small clickable CnCircleFlow chart) + Directions pill (Drive). Cursor clicks the Journey Map pill mid-beat, which is what "expands" into the full navigator-ring on the next phase. ════════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-spd, .surface-beat--navigate .v6-mockup-panel .v6-spd{ position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; grid-template-areas: "map map" "goals directions"; gap: clamp(8px, 1.6cqi, 14px); /* Top padding clears the 30px window-chrome strip + 14px breathing room * so the Journey Map pill doesn't kiss the chrome's bottom border. */ padding: 46px clamp(16px, 4cqi, 28px) clamp(16px, 4cqi, 28px); z-index: 7; opacity: 0; transform: scale(0.92); filter: blur(4px); pointer-events: none; /* Same enter/exit rhythm as the ring → stage transition. */ transition: opacity 600ms var(--v6-ease), transform 700ms var(--v6-spring), filter 460ms ease; } /* Place the pills by area; Map gets the dominant top row, Goals and Directions are equal supporting pills below. */.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ grid-area: map; flex: none; }.hero .v6-mockup-panel .v6-spd-goals, .surface-beat--navigate .v6-mockup-panel .v6-spd-goals{ grid-area: goals; flex: none; }.hero .v6-mockup-panel .v6-spd-directions, .surface-beat--navigate .v6-mockup-panel .v6-spd-directions{ grid-area: directions; flex: none; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd{ opacity: 1; transform: scale(1); filter: blur(0); /* Tightened delay — 200ms is enough to let CSN clear before SPD starts rising. Bigger overlap reads as a continuous handoff. */ transition: opacity 600ms var(--v6-ease) 200ms, transform 700ms var(--v6-spring) 200ms, filter 460ms ease 200ms; }.hero .v6-mockup-panel .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel .v6-spd-pill{ --spd-accent: var(--blurple, #7873F5); min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(6px, 1cqi, 9px); padding: clamp(10px, 1.8cqi, 16px); border-radius: clamp(12px, 1.8cqi, 16px); background: color-mix(in srgb, var(--main-bg-color) 42%, transparent); border: 1px solid color-mix(in srgb, var(--spd-accent) 16%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); position: relative; opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--v6-ease), transform 580ms var(--v6-spring); overflow: hidden; container-type: inline-size; container-name: v6spdpill; }.hero .v6-mockup-panel .v6-spd-pill[data-accent="blurpleblue"], .surface-beat--navigate .v6-mockup-panel .v6-spd-pill[data-accent="blurpleblue"]{ --spd-accent: #5689F5; }.hero .v6-mockup-panel .v6-spd-pill[data-accent="blurple"], .surface-beat--navigate .v6-mockup-panel .v6-spd-pill[data-accent="blurple"]{ --spd-accent: var(--blurple, #7873F5); }.hero .v6-mockup-panel .v6-spd-pill[data-accent="purple"], .surface-beat--navigate .v6-mockup-panel .v6-spd-pill[data-accent="purple"]{ --spd-accent: var(--purple, #A78BFA); } /* Map pill is the visual hero — gets extra padding, center-aligned chart */.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ align-items: stretch; /* Bottom padding gives Commit pill (chart center + 100, extending ~11px below chart bounds) real clearance from the pill border. Top padding is tight since the header sits just below it. */ padding: 12px 20px 24px; min-height: 256px; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-pill{ opacity: 1; transform: translateY(0); }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-goals, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-goals{ transition-delay: 60ms; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-map, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-map{ transition-delay: 160ms; }.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-directions, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-spd-directions{ transition-delay: 260ms; } /* During the SPD → ring exit, pin pills at full opacity so only the container fades. Otherwise the pills' 520ms opacity transition finishes before the container's 600ms, leaving a brief empty shell mid-exit that reads as a "flash." Letting the container own the fade gives one clean unified motion. */.hero .v6-mockup-panel[data-v6-phase="ring"] .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .v6-spd-pill{ opacity: 1; transform: translateY(0); transition: none; }.hero .v6-mockup-panel .v6-spd-header, .surface-beat--navigate .v6-mockup-panel .v6-spd-header{ display: flex; align-items: center; gap: clamp(4px, 0.8cqi, 6px); min-width: 0; }.hero .v6-mockup-panel .v6-spd-header-icon, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-icon{ width: clamp(11px, 1.4cqi, 14px); height: clamp(11px, 1.4cqi, 14px); display: inline-flex; align-items: center; justify-content: center; color: var(--spd-accent); flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-header-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-icon svg{ width: 100%; height: 100%; }.hero .v6-mockup-panel .v6-spd-header-title, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-title{ font-family: var(--brand-font); font-size: clamp(9px, 1.2cqi, 11px); font-weight: 700; letter-spacing: 0.01em; color: var(--v6-ink); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }.hero .v6-mockup-panel .v6-spd-count, .hero .v6-mockup-panel .v6-spd-days, .surface-beat--navigate .v6-mockup-panel .v6-spd-count, .surface-beat--navigate .v6-mockup-panel .v6-spd-days{ margin-left: auto; padding: 2px clamp(5px, 0.8cqi, 7px); font-size: clamp(8px, 1cqi, 9px); font-weight: 600; border-radius: 999px; background: color-mix(in srgb, var(--spd-accent) 14%, transparent); color: var(--spd-accent); letter-spacing: 0.02em; flex-shrink: 0; line-height: 1.2; }.hero .v6-mockup-panel .v6-spd-days, .surface-beat--navigate .v6-mockup-panel .v6-spd-days{ background: color-mix(in srgb, #FF9A3C 18%, transparent); color: #C56A12; } /* Eyebrow used inside Directions pill to show the current stage + days */.hero .v6-mockup-panel .v6-spd-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-spd-eyebrow{ margin-left: auto; padding: 2px 7px; font-size: 9px; font-weight: 600; border-radius: 999px; background: color-mix(in srgb, var(--spd-accent) 12%, transparent); color: var(--spd-accent); letter-spacing: 0.02em; flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-list, .surface-beat--navigate .v6-mockup-panel .v6-spd-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(3px, 0.6cqi, 5px); min-width: 0; }.hero .v6-mockup-panel .v6-spd-list li, .surface-beat--navigate .v6-mockup-panel .v6-spd-list li{ display: flex; align-items: center; gap: clamp(5px, 0.8cqi, 7px); font-family: var(--brand-font); font-size: clamp(9px, 1.1cqi, 10px); font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 72%, transparent); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }.hero .v6-mockup-panel .v6-spd-dot, .surface-beat--navigate .v6-mockup-panel .v6-spd-dot{ width: clamp(5px, 0.7cqi, 6px); height: clamp(5px, 0.7cqi, 6px); border-radius: 50%; background: color-mix(in srgb, var(--spd-accent) 80%, transparent); flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-goal-lead, .surface-beat--navigate .v6-mockup-panel .v6-spd-goal-lead{ color: var(--v6-ink); font-weight: 600; }.hero .v6-mockup-panel .v6-spd-goal-lead .v6-spd-dot, .surface-beat--navigate .v6-mockup-panel .v6-spd-goal-lead .v6-spd-dot{ background: var(--spd-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--spd-accent) 60%, transparent); }.hero .v6-mockup-panel .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-footer{ margin-top: 2px; font-size: 9px; color: color-mix(in srgb, var(--v6-ink) 45%, transparent); } /* Directions step markers + opacity cascade for next-priority items */.hero .v6-mockup-panel .v6-spd-step, .surface-beat--navigate .v6-mockup-panel .v6-spd-step{ font-size: 8px; color: var(--spd-accent); line-height: 1; width: 8px; text-align: center; flex-shrink: 0; }.hero .v6-mockup-panel .v6-spd-dir-curr, .surface-beat--navigate .v6-mockup-panel .v6-spd-dir-curr{ color: var(--v6-ink); font-weight: 600; }.hero .v6-mockup-panel .v6-spd-dir-np1, .surface-beat--navigate .v6-mockup-panel .v6-spd-dir-np1{ opacity: 0.72; }.hero .v6-mockup-panel .v6-spd-dir-np2, .surface-beat--navigate .v6-mockup-panel .v6-spd-dir-np2{ opacity: 0.5; } /* Mini Journey Map chart — scales with its pill via aspect-ratio + percentage node positions. No fixed-px sizes so it fits cleanly whether the panel is 400px or 600px wide. Six stage labels positioned at 60° intervals on the ring stroke; node radius = 45% of the chart so labels sit on the orbital. */ /* Mini Journey Map chart — scaled-down navigator-ring. Hairline track, conic-gradient progress arc, and 6 circular nodes positioned at 60° intervals around a radius INSIDE the chart bounds so nodes don't touch the surrounding pill edges. Chart container size is fixed to avoid cqi sizing surprises in narrow pills. */.hero .v6-mockup-panel .v6-spd-mini-chart, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart{ position: relative; width: 200px; /* Sized so the whole SPD (map + goals/dirs row) fits inside the 488px panel without clipping the bottom-row pills. Pills sit ON the ring stroke at radius 100. */ height: 200px; margin: 0 auto 4px; flex: 0 0 auto; align-self: center; border-radius: 50%; overflow: visible; /* pills can protrude slightly outside the ring */ } /* Track ring — soft 2px gray stroke at the outer edge */.hero .v6-mockup-panel .v6-spd-mini-chart::before, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart::before{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--v6-ink) 14%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); z-index: 1; } /* Progress arc — green for done (0-120° = 2 of 6 done) sitting on top of the track at the same stroke width. Conic-gradient defaults to 0° = 12 o'clock = Discovery node's position, so the arc covers Discovery + Experience (the two completed stages). NO `from -90deg`: that was rotating the start to 9 o'clock and misaligning everything. */.hero .v6-mockup-panel .v6-spd-mini-chart::after, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( var(--green, #2BB66D) 0deg, color-mix(in srgb, var(--green) 70%, var(--blurple)) 120deg, transparent 120deg 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 1px), transparent 100%); z-index: 2; } /* Mini stage-node — labeled rounded-rect PILLS, matching the real CnCircleFlow preview. Each pill contains the stage NAME (not an icon + separate label). Pills sit ON the ring stroke at 60° apart — pill CENTERS are on the ring (chart radius - 2px). */.hero .v6-mockup-panel .v6-spd-mini-node, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node{ position: absolute; top: 50%; left: 50%; width: 70px; height: 22px; margin-left: -35px; margin-top: -11px; transform: translate(var(--mx, 0), var(--my, 0)); display: flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--main-bg-color); border: 1.5px solid color-mix(in srgb, var(--v6-ink) 20%, transparent); box-shadow: 0 2px 6px color-mix(in srgb, var(--v6-ink) 10%, transparent); color: color-mix(in srgb, var(--v6-ink) 78%, transparent); font-family: var(--brand-font); font-size: 10px; font-weight: 600; letter-spacing: -0.005em; line-height: 1; z-index: 4; transition: background 220ms ease, border-color 220ms ease, color 220ms ease, box-shadow 280ms ease; } /* SVG icons inside the original markup are not needed — hide them */.hero .v6-mockup-panel .v6-spd-mini-node svg, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node svg{ display: none; } /* Inline label span shows the stage name */.hero .v6-mockup-panel .v6-spd-mini-label, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-label{ display: inline; line-height: 1; } /* Pills sit ON the ring stroke — pill CENTERS land on the ring's circle. Chart is 200px (radius 100). Ring stroke mask is at `calc(100% - 3px)` → stroke center at radius 100-3 ≈ 97. We snap pill centers to radius 100 so they straddle the stroke. Pills are 70×22; bottom pill extends to 100+11 = 111 from chart center, which protrudes 11px below the chart bounds — absorbed by the map pill's 22px bottom padding. Polar coordinates at 60° intervals, r=100: 0° Discovery → (0, -100) 60° Experience → (100·sin60°, -100·cos60°) = (87, -50) 120° Scope → (87, 50) 180° Commit → (0, 100) 240° Deploy → (-87, 50) 300° Success → (-87, -50) */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(1), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(1){ --mx: 0; --my: -100px; } /* Discovery — top */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(2){ --mx: 87px; --my: -50px; } /* Experience — upper-right */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(3){ --mx: 87px; --my: 50px; } /* Scope — lower-right */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(4), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(4){ --mx: 0; --my: 100px; } /* Commit — bottom */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(5), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(5){ --mx: -87px; --my: 50px; } /* Deploy — lower-left */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(6), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(6){ --mx: -87px; --my: -50px; } /* Success — upper-left */ /* Done — green border + green icon, like the main ring's completed nodes. */.hero .v6-mockup-panel .v6-spd-mini-done, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-done{ border-color: color-mix(in srgb, var(--green) 55%, transparent); color: var(--green, #2BB66D); background: color-mix(in srgb, var(--green) 6%, var(--main-bg-color) 88%); } /* Active — blurple gradient like the main ring's .v6-is-active::before, white icon, soft pulse glow. */.hero .v6-mockup-panel .v6-spd-mini-active, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-active{ background: linear-gradient(135deg, var(--blurple, #7873F5), var(--purple, #A78BFA)); border-color: color-mix(in srgb, var(--blurple) 60%, transparent); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blurple) 18%, transparent), 0 6px 14px color-mix(in srgb, var(--blurple) 35%, transparent); }.hero .v6-mockup-panel .v6-spd-mini-active svg, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-active svg{ stroke: #fff; } /* Per-pill container queries — when a pill is narrower than ~110px (tight 3-column desktop layout), drop the 3rd list item + "+ more" footer so the pill doesn't overflow. On mobile the pills are wide (full panel width), so the queries don't trigger and all items stay visible. */ @container v6spdpill (max-width: 110px) {.hero .v6-mockup-panel .v6-spd-list li:nth-child(n+3), .surface-beat--navigate .v6-mockup-panel .v6-spd-list li:nth-child(n+3){ display: none; }.hero .v6-mockup-panel .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-footer{ display: none; } } /* Very tight pill — drop the count/days tag so the header title fits. */ @container v6spdpill (max-width: 90px) {.hero .v6-mockup-panel .v6-spd-days, .hero .v6-mockup-panel .v6-spd-count, .surface-beat--navigate .v6-mockup-panel .v6-spd-days, .surface-beat--navigate .v6-mockup-panel .v6-spd-count{ display: none; } } /* Cursor + ripple for the SPD map pill live in a .v6-fx wrapper — see the .v6-fx utility block. JS writes --fx-x/--fx-y on the wrapper and toggles `.is-clicking` to fire. */ /* Three states for the SPD map pill, all transition-based (no keyframe animations — those were snapping back to neutral mid-exit and causing the jumpy click). The cursor adds these classes in lockstep: .spd-hover-map — cursor land. Smooth transition to lifted/accented. .spd-click-map — cursor press. Stacks on hover: lifts further + scales down + brighter glow. STAYS ON through the SPD exit so the map looks "still pressed" as the panel fades — no abrupt return to neutral. */.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease; }.hero .v6-mockup-panel.spd-hover-map .v6-spd-map, .surface-beat--navigate .v6-mockup-panel.spd-hover-map .v6-spd-map{ transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--blurple) 22%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 38%, transparent) inset; border-color: color-mix(in srgb, var(--blurple) 55%, transparent); }.hero .v6-mockup-panel.spd-click-map .v6-spd-map, .surface-beat--navigate .v6-mockup-panel.spd-click-map .v6-spd-map{ transform: translateY(-3px) scale(0.985); box-shadow: 0 16px 42px color-mix(in srgb, var(--blurple) 36%, transparent), 0 0 0 1px color-mix(in srgb, var(--blurple) 62%, transparent) inset; border-color: color-mix(in srgb, var(--blurple) 70%, transparent); transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 160ms ease, border-color 160ms ease; } /* No independent chart pulse — when the pill presses, the chart (a * child of the pill) moves with it. A separate scale-up on the chart * was fighting the pill's press squeeze and reading as a desync. */ @keyframes v6SpdChartPulse { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.06); filter: brightness(1.15); } 100% { transform: scale(1); filter: brightness(1); } } /* SPD shouldn't show in other phases — hide picker/ring during spd too */.hero .v6-mockup-panel[data-v6-phase="spd"] .v6-csn-picker, .hero .v6-mockup-panel[data-v6-phase="spd"] .v6-ring-center, .hero .v6-mockup-panel[data-v6-phase="spd"] .v6-intro, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-ring-center, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .v6-intro{ opacity: 0; pointer-events: none; } /* The ring during SPD: same calm-zoom hidden state as other transitions (scale 0.92, blur 4) so its enter uses real motion + defocus instead of an opacity-only flash. */.hero .v6-mockup-panel[data-v6-phase="spd"] .navigator-ring, .surface-beat--navigate .v6-mockup-panel[data-v6-phase="spd"] .navigator-ring{ opacity: 0; transform: var(--v6-tilt) scale(0.92); filter: blur(4px); pointer-events: none; } /* When the ring phase activates (after SPD exits), delay the ring's reveal by ~350ms so SPD has time to clear out before the ring fades in — allowing a brief crossfade overlap. The between-stages cycle uses .v6-ring-slide-in (keyframe animation) which overrides transition, so the "perfect" ring → stage rhythm is untouched. */.hero .v6-mockup-panel[data-v6-phase="ring"] .navigator-ring:not(.v6-ring-slide-in), .surface-beat--navigate .v6-mockup-panel[data-v6-phase="ring"] .navigator-ring:not(.v6-ring-slide-in){ transition: opacity 600ms var(--v6-ease) 350ms, transform 700ms var(--v6-spring) 350ms, filter 460ms ease 350ms, --completion-percent 700ms cubic-bezier(0.22, 1, 0.36, 1); } /* Mobile — pills stack vertically (single column, map on top). */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-spd, .surface-beat--navigate .v6-mockup-panel .v6-spd{ display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 56px 16px 32px; }.hero .v6-mockup-panel .v6-spd-pill, .surface-beat--navigate .v6-mockup-panel .v6-spd-pill{ flex: 0 0 auto; } } /* ════════════════════════════════════════════════════════════════════ STAGE HOME — pixel-faithful to StageLanding.module.css. Source-of-truth tokens transcribed from react/src/shared/theme/variables.css and react/src/surfaces/stages/StageLanding/StageLanding.module.css. Sized down proportionally to fit the hero mockup panel (~440px wide vs the real 880px max-width card), preserving every visual ratio. ════════════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-stage-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel{ display: flex; flex-direction: column; /* mirrors real .header padding 28px 40px 0 → halved for our panel */ padding: 0; } /* ─── ROLE PILL (centricity indicator, top-right of card) ─── */.hero .v6-mockup-panel .v6-stage-role-pill, .surface-beat--navigate .v6-mockup-panel .v6-stage-role-pill{ position: absolute; top: 10px; right: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-family: var(--brand-font); font-size: 9px; font-weight: 600; letter-spacing: 0.02em; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); z-index: 12; }.hero .v6-mockup-panel .v6-stage-role-pill::before, .surface-beat--navigate .v6-mockup-panel .v6-stage-role-pill::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blurple); box-shadow: 0 0 6px color-mix(in srgb, var(--blurple) 60%, transparent); } /* ─── HEADER (real: padding 28px 40px 0; badge 9px / 0.16em; title 24px bold -0.025em; desc 12.5px medium 50% opacity) ─── */.hero .v6-mockup-panel .v6-stage-header, .surface-beat--navigate .v6-mockup-panel .v6-stage-header{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 14px 0; flex-shrink: 0; }.hero .v6-mockup-panel .v6-stage-badge, .surface-beat--navigate .v6-mockup-panel .v6-stage-badge{ /* Clickable affordance — beat 7d's cursor lands here to navigate back * to the journey overview (ring). A leading "‹" hints at the back * action; cursor:pointer + subtle hover lift sells it as a button. */ display: inline-flex; align-items: center; gap: 5px; padding: 2px 12px 2px 8px; border-radius: 999px; font-family: var(--brand-font); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 4px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 12%, transparent), color-mix(in srgb, var(--purple) 8%, transparent)); color: var(--blurple); border: 1px solid color-mix(in srgb, var(--blurple) 14%, transparent); cursor: pointer; transition: transform 220ms var(--v6-spring), box-shadow 220ms var(--v6-ease); } /* Leading icon removed — the chevron pseudo-element was rendering badly on the small-font tracked pill. Click affordance is carried by the cursor:pointer + hover lift alone. */.hero .v6-mockup-panel .v6-stage-badge:hover, .surface-beat--navigate .v6-mockup-panel .v6-stage-badge:hover{ transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--blurple) 22%, transparent); }.hero .v6-mockup-panel .v6-stage-title, .surface-beat--navigate .v6-mockup-panel .v6-stage-title{ margin: 0; font-family: var(--brand-font); font-size: clamp(16px, 2.4cqi, 20px); font-weight: 700; letter-spacing: -0.025em; color: var(--v6-ink); line-height: 1.15; }.hero .v6-mockup-panel .v6-stage-desc, .surface-beat--navigate .v6-mockup-panel .v6-stage-desc{ margin: 2px 0 0; font-family: var(--brand-font); font-size: clamp(10.5px, 1.3cqi, 11.5px); font-weight: 500; opacity: 0.5; color: var(--v6-ink); letter-spacing: 0.01em; line-height: 1.35; max-width: 320px; } /* ─── META PANEL — flex with hairline left-border separators ─── */.hero .v6-mockup-panel .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel .v6-stage-meta{ display: flex; align-items: stretch; justify-content: space-evenly; margin: 0 14px; border-radius: 10px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); overflow: hidden; flex-shrink: 0; }.hero .v6-mockup-panel .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 6px; text-align: center; box-sizing: border-box; }.hero .v6-mockup-panel .v6-meta-cell + .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell + .v6-meta-cell{ border-left: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); }.hero .v6-mockup-panel .v6-meta-label, .surface-beat--navigate .v6-mockup-panel .v6-meta-label{ font-family: var(--brand-font); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in srgb, var(--v6-ink) 35%, transparent); line-height: 1; white-space: nowrap; }.hero .v6-mockup-panel .v6-meta-value, .surface-beat--navigate .v6-mockup-panel .v6-meta-value{ font-family: var(--brand-font); font-size: 11px; font-weight: 550; color: color-mix(in srgb, var(--v6-ink) 88%, transparent); letter-spacing: -0.005em; line-height: 1; white-space: nowrap; }.hero .v6-mockup-panel .v6-meta-empty, .surface-beat--navigate .v6-mockup-panel .v6-meta-empty{ color: color-mix(in srgb, var(--v6-ink) 30%, transparent); }.hero .v6-mockup-panel .v6-status-active, .hero .v6-mockup-panel .v6-status-planned, .hero .v6-mockup-panel .v6-status-done, .surface-beat--navigate .v6-mockup-panel .v6-status-active, .surface-beat--navigate .v6-mockup-panel .v6-status-planned, .surface-beat--navigate .v6-mockup-panel .v6-status-done{ padding: 3px 9px; border-radius: 999px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; }.hero .v6-mockup-panel .v6-status-active, .surface-beat--navigate .v6-mockup-panel .v6-status-active{ background: color-mix(in srgb, var(--blurple) 16%, transparent); color: var(--blurple); }.hero .v6-mockup-panel .v6-status-planned, .surface-beat--navigate .v6-mockup-panel .v6-status-planned{ background: color-mix(in srgb, var(--v6-ink) 7%, transparent); color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-status-done, .surface-beat--navigate .v6-mockup-panel .v6-status-done{ background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }.hero .v6-mockup-panel .v6-completion-pill, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill{ display: inline-flex; align-items: center; gap: 5px; font-family: var(--brand-font); font-weight: 600; font-size: 11px; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); font-variant-numeric: tabular-nums; }.hero .v6-mockup-panel .v6-completion-pill::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill::before{ content: ""; width: 28px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--green) 0%, var(--green) var(--p, 0%), color-mix(in srgb, var(--v6-ink) 9%, transparent) var(--p, 0%)); }.hero .v6-mockup-panel .v6-completion-pill[data-p="0"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="0"]::before{ --p: 0%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="15"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="15"]::before{ --p: 15%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="40"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="40"]::before{ --p: 40%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="62"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="62"]::before{ --p: 62%; }.hero .v6-mockup-panel .v6-completion-pill[data-p="100"]::before, .surface-beat--navigate .v6-mockup-panel .v6-completion-pill[data-p="100"]::before{ --p: 100%; }.hero .v6-mockup-panel .v6-owner-avs, .surface-beat--navigate .v6-mockup-panel .v6-owner-avs{ display: inline-flex; align-items: center; }.hero .v6-mockup-panel .v6-av, .surface-beat--navigate .v6-mockup-panel .v6-av{ width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; border: 1.5px solid color-mix(in srgb, var(--main-bg-color) 92%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--v6-ink) 10%, transparent); }.hero .v6-mockup-panel .v6-av + .v6-av, .surface-beat--navigate .v6-mockup-panel .v6-av + .v6-av{ margin-left: -7px; }.hero .v6-mockup-panel .v6-av-2, .surface-beat--navigate .v6-mockup-panel .v6-av-2{ background: linear-gradient(135deg, #56A8F5, var(--blurple)); }.hero .v6-mockup-panel .v6-av-3, .surface-beat--navigate .v6-mockup-panel .v6-av-3{ background: linear-gradient(135deg, var(--purple), #D490FF); } /* ─── BODY: two sections, both glass with absolute section label ─── */.hero .v6-mockup-panel .v6-stage-body, .surface-beat--navigate .v6-mockup-panel .v6-stage-body{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 8px 14px 12px; gap: 8px; }.hero .v6-mockup-panel .v6-stage-section, .surface-beat--navigate .v6-mockup-panel .v6-stage-section{ position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: center; flex: 1 1 0; min-height: 0; padding: 18px 14px 8px; border-radius: 12px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); transition: background 220ms var(--v6-ease), border-color 220ms var(--v6-ease); overflow: hidden; }.hero .v6-mockup-panel .v6-section-collab, .surface-beat--navigate .v6-mockup-panel .v6-section-collab{ border-left: 2px solid color-mix(in srgb, var(--blurple) 45%, transparent); }.hero .v6-mockup-panel .v6-section-agents, .surface-beat--navigate .v6-mockup-panel .v6-section-agents{ border-left: 2px solid color-mix(in srgb, var(--purple) 45%, transparent); } /* Section label sits absolute in top-left, low opacity (real: 25% / 45% on accented) */.hero .v6-mockup-panel .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-section-label{ position: absolute; top: 7px; left: 12px; margin: 0; font-family: var(--brand-font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; pointer-events: none; }.hero .v6-mockup-panel .v6-section-collab .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-section-collab .v6-section-label{ color: var(--blurple); opacity: 0.55; }.hero .v6-mockup-panel .v6-section-agents .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-section-label{ color: var(--purple); opacity: 0.55; } /* Agents narration sits absolute top-right next to label */.hero .v6-mockup-panel .v6-section-agents .v6-agents-status, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-agents-status{ position: absolute; top: 7px; right: 12px; left: 90px; font-family: var(--brand-font); font-size: 9px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); letter-spacing: -0.005em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; transition: opacity 220ms ease; }.hero .v6-mockup-panel .v6-agents-status.is-changing, .surface-beat--navigate .v6-mockup-panel .v6-agents-status.is-changing{ opacity: 0; } /* ─── APP GRID + TILES — real AppIcon scaled to fit the panel ─── */.hero .v6-mockup-panel .v6-app-grid, .surface-beat--navigate .v6-mockup-panel .v6-app-grid{ display: flex; align-items: flex-start; justify-content: space-evenly; gap: 18px; width: 100%; flex-wrap: nowrap; }.hero .v6-mockup-panel .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-app-tile{ --tint: var(--blurple); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; color: inherit; transition: transform 280ms var(--v6-spring); }.hero .v6-mockup-panel .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon{ width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--tint) 10%, color-mix(in srgb, var(--inv-bg-color) 3%, transparent)); border: 0.5px solid color-mix(in srgb, var(--tint) 14%, transparent); box-shadow: 0 2px 12px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5); color: var(--tint); transition: transform 320ms var(--v6-spring), box-shadow 320ms var(--v6-ease); }.hero .v6-mockup-panel .v6-app-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon svg{ width: 20px; height: 20px; color: var(--tint); }.hero .v6-mockup-panel .v6-app-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-label{ font-family: var(--brand-font); font-size: 10px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 88%, transparent); letter-spacing: -0.01em; line-height: 1.2; }.hero .v6-mockup-panel .v6-app-tile-role, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-role{ display: none; } /* Per-section tints (collab=blurple, agents=purple) */.hero .v6-mockup-panel .v6-section-collab .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-section-collab .v6-app-tile{ --tint: var(--blurple); }.hero .v6-mockup-panel .v6-section-agents .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-app-tile{ --tint: var(--purple); } /* Top Pick — featured badge in top-right + boosted glow */.hero .v6-mockup-panel .v6-app-tile-top .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-top .v6-app-tile-icon{ background: color-mix(in srgb, var(--tint) 16%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); border-color: color-mix(in srgb, var(--tint) 28%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--tint) 22%, transparent), 0 8px 32px color-mix(in srgb, var(--tint) 16%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent); }.hero .v6-mockup-panel .v6-app-tile-badge, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-badge{ position: absolute; top: -4px; right: -10px; padding: 1px 6px; border-radius: 999px; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tint); background: color-mix(in srgb, var(--tint) 18%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); border: 0.5px solid color-mix(in srgb, var(--tint) 28%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--tint) 18%, transparent); white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; } /* Explore tile — neutral grey */.hero .v6-mockup-panel .v6-app-tile-explore, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-explore{ --tint: color-mix(in srgb, var(--v6-ink) 40%, transparent); }.hero .v6-mockup-panel .v6-app-tile-explore .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-explore .v6-app-tile-icon{ background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-color: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } /* ─── EXPLORE OVERLAY — full-panel iOS-Spotlight-style takeover ─── * Sits as a direct child of the .v6-stage-panel (NOT inside any section) * so it can overlay the entire stage panel content. Opaque-glass * background (readable, not super-transparent) lets the stage register * as "still there" underneath without competing for legibility. * Header + 2x2 grid of iOS-style app tiles. */.hero .v6-mockup-panel .v6-explore-menu, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px 18px 18px; background: color-mix(in srgb, var(--main-bg-color) 88%, transparent); backdrop-filter: blur(28px) saturate(1.4); -webkit-backdrop-filter: blur(28px) saturate(1.4); border-radius: inherit; opacity: 0; transform: scale(0.96); pointer-events: none; z-index: 30; transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.16, 1, 0.3, 1); }.hero .v6-mockup-panel .v6-stage-panel.explore-menu-open .v6-explore-menu, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel.explore-menu-open .v6-explore-menu{ opacity: 1; transform: scale(1); pointer-events: auto; }.hero .v6-mockup-panel .v6-explore-menu-inner, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-inner{ display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }.hero .v6-mockup-panel .v6-explore-menu-title, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-title{ margin: 0; font-family: var(--brand-font); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: color-mix(in srgb, var(--v6-ink) 95%, transparent); }.hero .v6-mockup-panel .v6-explore-menu-sub, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-sub{ margin: -10px 0 0; font-family: var(--brand-font); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--v6-ink) 45%, transparent); }.hero .v6-mockup-panel .v6-explore-menu-grid, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu-grid{ display: grid; grid-template-columns: repeat(2, auto); gap: 18px 28px; margin-top: 4px; } /* Tiles inside the overlay tint purple like the agents section, and * scale up slightly on hover. */.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile{ --tint: var(--purple); }.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover{ transform: translateY(-1px); }.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile:hover .v6-app-tile-icon{ box-shadow: 0 0 22px color-mix(in srgb, var(--purple) 30%, transparent), 0 10px 28px color-mix(in srgb, var(--purple) 18%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); } /* Highlight the Proposed Scope tile as the cursor lands on it, * so it reads as "selected" before the menu dismisses. */.hero .v6-mockup-panel .v6-explore-menu .v6-app-tile.is-hot .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-explore-menu .v6-app-tile.is-hot .v6-app-tile-icon{ background: color-mix(in srgb, var(--purple) 26%, color-mix(in srgb, var(--inv-bg-color) 5%, transparent)); border-color: color-mix(in srgb, var(--purple) 50%, transparent); box-shadow: 0 0 28px color-mix(in srgb, var(--purple) 38%, transparent), 0 12px 34px color-mix(in srgb, var(--purple) 22%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); transform: scale(1.06); } /* When workspace is open, overlay must be gone. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-explore-menu, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-explore-menu{ opacity: 0; pointer-events: none; } /* ─── STAGE SUB-STATES — home → workspace open ─── Default state ("home") = the stage landing: header + meta + tiles + agent panel. When the cursor clicks a workspace tile, we flip the panel to data-substate="workspace": the home layers fade and shrink, the collab-inner content (table / cards / gantt / sign card / KPIs) zooms in to fill the panel, and the per-stage micro-animation plays inside. */.hero .v6-mockup-panel .v6-stage-panel > *, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel > *{ transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), filter 280ms ease; }.hero .v6-mockup-panel .v6-stage-panel .v6-section-collab > *:not(.v6-collab-inner), .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-section-collab > *:not(.v6-collab-inner){ transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.22, 1, 0.36, 1); } /* Collab-inner — hidden absolutely by default, full panel when workspace open. * IMPORTANT: inset is calculated from the .v6-stage-panel root (not the * .v6-section-collab parent) so the panel doesn't have to reposition the * section to make collab-inner full-bleed. The section in workspace mode * gets `position: static` (see below) which makes inset:14px fall through * to the absolutely-positioned stage-panel. Keeping the section's flex * layout intact means the workspace tile + label fade in place without * a jarring "jump to center" when workspace state activates. */.hero .v6-mockup-panel .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel .v6-collab-inner{ display: flex; flex-direction: column; justify-content: center; gap: 8px; position: absolute; inset: 14px; opacity: 0; transform: scale(0.94); filter: blur(6px); pointer-events: none; z-index: 10; transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms, transform 500ms cubic-bezier(0.16, 1, 0.3, 1) 80ms, filter 360ms ease 80ms; } /* Workspace-open state — collab-inner takes over, home layers fade away */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-collab-inner{ opacity: 1; transform: scale(1); filter: blur(0); pointer-events: auto; } /* Fade the meta + agents-section as units. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-meta, .hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-agents, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-agents{ opacity: 0; transform: scale(0.96) translateY(-6px); filter: blur(2px); pointer-events: none; } /* For the header, fade individual children — NOT the wrapper — so the * persona pill (a direct child) can stay opacity:1. If we faded the * wrapper, compound opacity (parent 0 × child 1 = 0) would invisibly * hide the pill, leaving the persona swap with no clickable trigger. * Keep the wrapper at opacity 1; fade everything inside it except * the pill, which we float as persistent chrome. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header > *:not(.v6-persona-pill), .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header > *:not(.v6-persona-pill){ opacity: 0; transform: scale(0.96) translateY(-6px); filter: blur(2px); pointer-events: none; }.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill{ opacity: 1; transform: none; filter: none; pointer-events: auto; position: absolute; top: 10px; left: 14px; margin-top: 0; z-index: 22; /* Smooth transition for the swap visibility */ transition: opacity 320ms var(--v6-ease), background 300ms ease; } /* In workspace state, the agent panel covers the right 62% of the * mockup. Hide the INACTIVE persona segment so only the active one * shows on the visible left edge — otherwise the active segment ends * up behind the agent panel and the swap reads as unclear. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill > span, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill > span, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-stage-header .v6-persona-pill > span, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-stage-panel .v6-stage-header .v6-persona-pill > span{ transition: max-width 320ms var(--v6-ease), padding 320ms var(--v6-ease), opacity 220ms ease; overflow: hidden; }.hero .v6-mockup-panel[data-persona="host"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .hero .v6-mockup-panel:not([data-persona="guest"]) .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .hero .v6-mockup-panel[data-persona="guest"] [data-stage-substate="workspace-guest"] .v6-persona-pill [data-seg="host"], .hero .v6-mockup-panel[data-persona="guest"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="host"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .surface-beat--navigate .v6-mockup-panel:not([data-persona="guest"]) .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] [data-stage-substate="workspace-guest"] .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-stage-panel[data-substate="workspace"] .v6-persona-pill [data-seg="host"]{ max-width: 0; padding-left: 0; padding-right: 0; opacity: 0; }.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-section-label, .hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-app-grid, .hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-workspace-state, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-app-grid, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab .v6-workspace-state{ opacity: 0; transform: scale(0.96); pointer-events: none; /* Disappear instantly when workspace opens — the section drops * position:relative for the inset-from-panel collab-inner trick, * which means the absolutely-positioned label would otherwise * visually "jump" to the panel's top-left during a 280ms fade. * Going opacity 1 → 0 in one frame hides that jump entirely. */ transition: opacity 0ms, transform 0ms; }.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-section-collab{ border: none; background: transparent; padding: 0; overflow: visible; /* Drop position: relative so .v6-collab-inner's inset:14px is now * calculated from the .v6-stage-panel (which is position: absolute). * The section itself doesn't reposition — its flex slot stays in * place — but collab-inner overlays the full panel. The label/grid/ * state chip inside the section fade out in place (no tile-jumping * to center mid-transition). */ position: static; } /* Cursor + ripple for per-stage clicks live in a .v6-fx wrapper — see the .v6-fx utility block. JS writes --fx-x/--fx-y on the wrapper and toggles `.is-clicking` to fire. */ /* ═══════════════════════════════════════════════════════════════ AGENT PANEL — shared sibling of .v6-stage-panels. Slides in from the right when the cursor clicks the Top Pick agent tile (substate="agent"). Houses the agent header (orb / name / sub / live state), a body with sequentially-revealed output lines, and a foot CTA that becomes the next cursor target ("Send to Workspace"). ═══════════════════════════════════════════════════════════════ */ /* ─── STAGE-COMPLETE CTA ────────────────────────────────────────── * Fades in over the (dimmed) workspace at the end of each stage cycle. * Single instance lives inside .v6-stage-panels; JS populates the * title + button label per stage. Visibility gated by * data-stage-substate="completed" on the mockup panel. */.hero .v6-mockup-panel .v6-stage-complete, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete{ position: absolute; inset: 0; z-index: 28; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; opacity: 0; transform: scale(0.94) translateY(8px); pointer-events: none; transition: opacity 460ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1); }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete{ opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } /* Fade the workspace content behind the CTA so the CTA owns focus * (workspace stays slightly visible — sells "you just did this"). */.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-collab-inner{ opacity: 0.18; filter: blur(3px); transform: scale(0.97); }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-meta, .hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-section-agents, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-section-agents{ opacity: 0; filter: blur(2px); pointer-events: none; }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-header > *:not(.v6-persona-pill), .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-panel .v6-stage-header > *:not(.v6-persona-pill){ opacity: 0.25; }.hero .v6-mockup-panel .v6-stage-complete-check, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-check{ width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--success) 22%, color-mix(in srgb, var(--inv-bg-color) 4%, transparent)); color: var(--success); display: flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--success) 38%, transparent); box-shadow: 0 0 32px color-mix(in srgb, var(--success) 34%, transparent), 0 10px 28px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent); }.hero .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete-check, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="completed"] .v6-stage-complete-check{ animation: v6CompleteCheckIn 580ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-stage-complete-check svg, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-check svg{ width: 22px; height: 22px; max-width: none; max-height: none; }.hero .v6-mockup-panel .v6-stage-complete-title, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-title{ font-family: var(--brand-font); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--v6-ink); margin-top: 4px; }.hero .v6-mockup-panel .v6-stage-complete-sub, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-sub{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); }.hero .v6-mockup-panel .v6-stage-complete-cta, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-cta{ margin-top: 10px; padding: 9px 14px 9px 18px; border: none; border-radius: 999px; background: var(--v6-grad-cn); color: #fff; font-family: var(--brand-font); font-size: 12px; font-weight: 700; letter-spacing: -0.005em; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 12px 30px color-mix(in srgb, var(--blurple) 32%, transparent), 0 4px 12px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease; }.hero .v6-mockup-panel .v6-stage-complete-cta:hover, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-cta:hover{ transform: translateY(-1px); box-shadow: 0 16px 38px color-mix(in srgb, var(--blurple) 38%, transparent), 0 4px 14px color-mix(in srgb, var(--inv-bg-color) 16%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent); }.hero .v6-mockup-panel .v6-stage-complete-cta svg, .surface-beat--navigate .v6-mockup-panel .v6-stage-complete-cta svg{ max-width: none; max-height: none; } @keyframes v6CompleteCheckIn { 0% { opacity: 0; transform: scale(0.5); } 60% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }.hero .v6-mockup-panel .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel{ position: absolute; top: 12px; right: 12px; bottom: 12px; width: 62%; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--blurple) 12%, var(--main-bg-color)) 0%, color-mix(in srgb, var(--main-bg-color) 88%, transparent) 60%); border: 1px solid color-mix(in srgb, var(--blurple) 30%, transparent); border-radius: 16px; backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3); box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 24px 64px color-mix(in srgb, var(--blurple) 20%, transparent), 0 8px 24px color-mix(in srgb, var(--inv-bg-color) 12%, transparent); opacity: 0; transform: translateX(110%) scale(0.96); pointer-events: none; z-index: 25; /* Position properties transition for the full ↔ docked morph used * by stage 4 (Deploy). Without these, switching data-stage-substate * from "agent" to "agent-docked" would snap the panel instantly. */ transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1), top 420ms cubic-bezier(0.22, 1, 0.36, 1), right 420ms cubic-bezier(0.22, 1, 0.36, 1), left 420ms cubic-bezier(0.22, 1, 0.36, 1), bottom 420ms cubic-bezier(0.22, 1, 0.36, 1), width 420ms cubic-bezier(0.22, 1, 0.36, 1), padding 420ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 420ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease; } /* Visible during agent, workspace-guest, and agent-docked sub-states */.hero .v6-mockup-panel .v6-stage-panel[data-substate="agent"] ~ .v6-agent-panel, .hero .v6-mockup-panel .v6-stage-panels:has(.v6-stage-panel.is-active[data-substate="agent"]) ~ .v6-agent-panel, .hero .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-panel, .hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="agent"] ~ .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-stage-panels:has(.v6-stage-panel.is-active[data-substate="agent"]) ~ .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel{ opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } /* Chat-layout panels also need translateX(0) when visible — they share the workspace-guest visibility rule above, but the hidden state lives at translateX(-110%) (left side) not 110% (right side) and the specificity match requires reasserting transform here. */.hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel[data-layout="chat"], .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-panel[data-layout="chat"]{ transform: translateX(0) scale(1); } /* Hidden state for chat panels — off-screen LEFT (matches the left:12px docking position). Applies whenever the panel is NOT in a visible substate. */.hero .v6-mockup-panel:not([data-stage-substate="workspace-guest"]):not([data-stage-substate="agent"]):not([data-stage-substate="agent-docked"]) .v6-agent-panel[data-layout="chat"], .surface-beat--navigate .v6-mockup-panel:not([data-stage-substate="workspace-guest"]):not([data-stage-substate="agent"]):not([data-stage-substate="agent-docked"]) .v6-agent-panel[data-layout="chat"]{ transform: translateX(-110%) scale(0.96); } /* ─── DOCKED AGENT STATE ─── * For stages where the agent's job is to GUIDE the workspace (e.g. Deploy's * AI Navigator walking through each gantt track), the agent doesn't slide * fully out when workspace opens — it shrinks to a small docked bar at the * top, leaving the workspace fully visible below while the agent narrates * each step. Cursor + agent text update as each track is highlighted. */.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel{ /* Top strip — sits above the workspace, narrow */ top: 8px; right: 12px; left: 12px; bottom: auto; width: auto; height: auto; padding: 8px 12px; flex-direction: row; align-items: center; gap: 10px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 14%, var(--main-bg-color)), color-mix(in srgb, var(--purple) 6%, var(--main-bg-color))); border: 1px solid color-mix(in srgb, var(--blurple) 35%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 12%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--blurple) 18%, transparent); } /* Hide most agent body content in docked mode — show only the orb + name * + a single status line that updates per step. */.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-head, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-head{ flex: 1; padding-bottom: 0; border-bottom: none; gap: 8px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb{ width: 18px; height: 18px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb svg, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-orb svg{ width: 9px; height: 9px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-name, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-name{ font-size: 11px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-sub, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-sub{ font-size: 9px; color: color-mix(in srgb, var(--v6-ink) 65%, transparent); }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-state, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-state{ font-size: 7px; padding: 2px 6px; }.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-attribution, .hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-body, .hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-attribution, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-body, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-agent-panel-foot{ display: none; } /* The workspace lives BELOW the docked bar — needs top padding so the * collab-inner doesn't disappear under the agent strip. */.hero .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-collab-inner, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent-docked"] .v6-collab-inner{ inset: 50px 14px 14px 14px; } /* Workspace dims when agent is over it */.hero .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-section, .hero .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-section, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-stage-meta{ opacity: 0.5; filter: blur(1px); transition: opacity 320ms ease, filter 320ms ease; } /* Close × — sits at the right edge of the panel header. * The old "Agent Mode" / "Powered by First-Party AI™" chrome strip * was removed because it duplicated the agent name. Now the agent's * OWN name (Think & Sync, SOW Generator, etc.) IS the title, and * attribution lives as a small chip below the header. */.hero .v6-mockup-panel .v6-agent-panel-close, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-close{ font-size: 16px; line-height: 1; color: color-mix(in srgb, var(--v6-ink) 45%, transparent); width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; flex-shrink: 0; align-self: center; } /* Subtle attribution chip — placed below the agent header. Quiet so * it doesn't compete with the agent name, but present so users know * what's powering the agent. */.hero .v6-mockup-panel .v6-agent-panel-attribution, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-attribution{ font-family: var(--brand-font); font-size: 8px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: color-mix(in srgb, var(--v6-ink) 40%, transparent); padding: 4px 0 0; align-self: flex-start; }.hero .v6-mockup-panel .v6-agent-panel-preview, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-preview{ font-family: var(--brand-font); font-size: 9px; font-weight: 600; color: var(--purple); text-transform: uppercase; letter-spacing: 0.08em; margin-right: auto; opacity: 0; transition: opacity 320ms ease; }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-preview, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-preview{ opacity: 1; } /* Header inside the agent panel */.hero .v6-mockup-panel .v6-agent-panel-head, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-head{ display: flex; align-items: flex-start; gap: 9px; padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, var(--blurple) 16%, transparent); }.hero .v6-mockup-panel .v6-agent-panel-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-orb{ width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blurple) 18%, transparent), 0 0 14px color-mix(in srgb, var(--blurple) 60%, transparent); animation: v6AgentOrbPulse 1.8s ease-in-out infinite; }.hero .v6-mockup-panel .v6-agent-panel-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-orb svg{ width: 12px; height: 12px; }.hero .v6-mockup-panel .v6-agent-panel-title, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-title{ display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }.hero .v6-mockup-panel .v6-agent-panel-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-name{ font-family: var(--brand-font); /* This IS the panel title now — sized to fit the longest agent name * ("Execution Readiness", "Smart Conversation") without ellipsis at * the ~280px panel width minus orb / state / close. */ font-size: 13px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.015em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hero .v6-mockup-panel .v6-agent-panel-sub, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-sub{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); letter-spacing: 0; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.hero .v6-mockup-panel .v6-agent-panel-state, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-state{ padding: 2px 7px; border-radius: 999px; font-family: var(--brand-font); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: color-mix(in srgb, var(--blurple) 16%, transparent); color: var(--blurple); flex-shrink: 0; align-self: center; }.hero .v6-mockup-panel .v6-agent-panel-state[data-done="true"], .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-state[data-done="true"]{ background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); } /* Body — sequentially-revealed output lines */.hero .v6-mockup-panel .v6-agent-panel-body, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-body{ flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }.hero .v6-mockup-panel .v6-ap-line, .surface-beat--navigate .v6-mockup-panel .v6-ap-line{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 82%, transparent); line-height: 1.4; letter-spacing: -0.005em; padding: 5px 9px; background: color-mix(in srgb, var(--main-bg-color) 56%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border-radius: 8px; opacity: 0; transform: translateY(8px); transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ap-line.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-ap-line.is-shown{ opacity: 1; transform: translateY(0); }.hero .v6-mockup-panel .v6-ap-line strong, .surface-beat--navigate .v6-mockup-panel .v6-ap-line strong{ color: var(--v6-ink); font-weight: 700; }.hero .v6-mockup-panel .v6-ap-line[data-tone="heading"], .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="heading"]{ background: none; border: none; padding: 0 2px; font-family: var(--brand-font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-ap-line[data-tone="cta"], .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="cta"]{ background: color-mix(in srgb, var(--blurple) 10%, transparent); border-color: color-mix(in srgb, var(--blurple) 28%, transparent); color: var(--v6-ink); font-weight: 600; }.hero .v6-mockup-panel .v6-ap-line[data-tone="check"]::before, .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="check"]::before{ content: "✓"; margin-right: 6px; color: var(--green); font-weight: 700; } /* Document-shape line — used by Statement of Work for the doc preview header */.hero .v6-mockup-panel .v6-ap-line[data-tone="doc"], .surface-beat--navigate .v6-mockup-panel .v6-ap-line[data-tone="doc"]{ display: flex; flex-direction: column; gap: 3px; background: linear-gradient(180deg, color-mix(in srgb, #fff 88%, transparent), color-mix(in srgb, #fff 96%, transparent)); color: #202F39; border: 1px solid color-mix(in srgb, var(--blurple) 24%, transparent); padding: 10px 12px; box-shadow: 0 1px 0 color-mix(in srgb, #fff 100%, transparent) inset, 0 4px 14px color-mix(in srgb, var(--blurple) 14%, transparent); }.hero .v6-mockup-panel .v6-ap-doc-title, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-title{ font-family: var(--brand-font); font-size: 12px; font-weight: 700; color: #202F39; letter-spacing: -0.01em; }.hero .v6-mockup-panel .v6-ap-doc-meta, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-meta{ font-family: var(--brand-font); font-size: 9px; font-weight: 500; color: color-mix(in srgb, #202F39 55%, transparent); letter-spacing: 0; } /* ════════════════════════════════════════════════════════════════════ * AGENT BODY LAYOUTS — distinct visual structure per agent so each one * reads like its real React component, not a generic list. Layouts: * form-think — Think & Sync (tabs + sources + aggressiveness) * form-sow — SOW Generator (doc tabs + section toggles) * chat — Tailored Script / Execution Readiness / AI Navigator / * Why Commit / Smart Conversation / Auto Solve * report — Cheat Sheet (Regenerate/Copy chrome + sections) * list — Solution Fit / Assign Owners (state-marked rows) * ════════════════════════════════════════════════════════════════════ */ /* Shared reveal animation — replaces .v6-ap-line is-shown */.hero .v6-mockup-panel .v6-ap-reveal, .surface-beat--navigate .v6-mockup-panel .v6-ap-reveal{ opacity: 0; transform: translateY(6px); transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 360ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ap-reveal.is-shown, .surface-beat--navigate .v6-mockup-panel .v6-ap-reveal.is-shown{ opacity: 1; transform: translateY(0); } /* ─── form-think — Think & Sync — seed picker + aggressiveness ─── */ /* Think-form wrapper — explicit vertical gap so the file-type tabs, * dropzone (selected files), aggressiveness picker, and Run button each * have breathing room instead of stacking flush. */.hero .v6-mockup-panel .v6-ap-think-form, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-form{ display: flex; flex-direction: column; gap: 10px; }.hero .v6-mockup-panel .v6-ap-tabs, .surface-beat--navigate .v6-mockup-panel .v6-ap-tabs{ display: inline-flex; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); align-self: flex-start; }.hero .v6-mockup-panel .v6-ap-tab, .surface-beat--navigate .v6-mockup-panel .v6-ap-tab{ padding: 3px 10px; border-radius: 6px; font-family: var(--brand-font); font-size: 9px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); letter-spacing: 0.02em; }.hero .v6-mockup-panel .v6-ap-tab.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-tab.is-active{ background: var(--v6-ink); color: var(--v6-paper); }.hero .v6-mockup-panel .v6-ap-source-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-source-list{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-source-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-source-row{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px dashed color-mix(in srgb, var(--blurple) 22%, transparent); font-family: var(--v6-mono); font-size: 9px; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); }.hero .v6-mockup-panel .v6-ap-source-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-source-icon{ font-size: 10px; } /* File-tab dropzone wrapper — matches the React FileInput visual. */.hero .v6-mockup-panel .v6-ap-file-dropzone, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone{ display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 8px; border: 1px dashed color-mix(in srgb, var(--blurple) 28%, transparent); background: color-mix(in srgb, var(--blurple) 3%, transparent); }.hero .v6-mockup-panel .v6-ap-file-dropzone-hint, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone-hint{ display: inline-flex; align-items: center; gap: 5px; font-family: var(--brand-font); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--blurple) 80%, transparent); transition: color 220ms ease; }.hero .v6-mockup-panel .v6-ap-file-dropzone-hint.is-done, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone-hint.is-done{ color: var(--green); } /* Spinner — small ring that spins while sources are being read. */.hero .v6-mockup-panel .v6-ap-dropzone-spinner, .surface-beat--navigate .v6-mockup-panel .v6-ap-dropzone-spinner{ width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--blurple) 22%, transparent); border-top-color: var(--blurple); animation: v6ApSpin 720ms linear infinite; } @keyframes v6ApSpin { to { transform: rotate(360deg); } } /* Check glyph that replaces the spinner when reading completes. */.hero .v6-mockup-panel .v6-ap-dropzone-check, .surface-beat--navigate .v6-mockup-panel .v6-ap-dropzone-check{ display: inline-flex; align-items: center; justify-content: center; width: 9px; height: 9px; border-radius: 50%; background: var(--green); color: var(--main-bg-color); font-size: 7px; line-height: 1; font-weight: 700; } /* Muted "+N more" row inside the proposed-answers list. */.hero .v6-mockup-panel .v6-ap-result-more, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-more{ opacity: 0.6; font-style: italic; font-size: 9px; }.hero .v6-mockup-panel .v6-ap-file-dropzone .v6-ap-source-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-dropzone .v6-ap-source-row{ border-style: solid; border-color: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } /* Aggressiveness picker (Cautious / Balanced / Strike). Chips lay out in a single horizontal row — icon to the LEFT of the label inside each chip. The wrapper preflight (`svg { display: block }`) would otherwise stack icon-above-label inside an inline span; explicit inline-flex on the chip + the icon enforces horizontal flow. */.hero .v6-mockup-panel .v6-ap-modes, .surface-beat--navigate .v6-mockup-panel .v6-ap-modes{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-modes-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-modes-label{ font-family: var(--brand-font); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-ap-mode-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-row{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; }.hero .v6-mockup-panel .v6-ap-mode-chip, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-chip{ display: inline-flex; flex-direction: row; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-family: var(--brand-font); font-size: 9px; font-weight: 600; line-height: 1; white-space: nowrap; background: color-mix(in srgb, var(--main-bg-color) 56%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-ap-mode-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-icon{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 12px; height: 12px; line-height: 1; }.hero .v6-mockup-panel .v6-ap-mode-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-icon svg{ width: 12px; height: 12px; max-width: none; max-height: none; display: block; }.hero .v6-mockup-panel .v6-ap-mode-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-label{ line-height: 1; }.hero .v6-mockup-panel .v6-ap-mode-chip.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-mode-chip.is-active{ background: color-mix(in srgb, var(--blurple) 14%, transparent); border-color: color-mix(in srgb, var(--blurple) 38%, transparent); color: var(--blurple); }.hero .v6-mockup-panel .v6-ap-result, .surface-beat--navigate .v6-mockup-panel .v6-ap-result{ padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--green) 5%, transparent); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); }.hero .v6-mockup-panel .v6-ap-result-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-head{ display: block; font-family: var(--brand-font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); margin-bottom: 4px; }.hero .v6-mockup-panel .v6-ap-result-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }.hero .v6-mockup-panel .v6-ap-result-list li, .surface-beat--navigate .v6-mockup-panel .v6-ap-result-list li{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 82%, transparent); line-height: 1.35; transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease; } /* ─── Think button — step 1 trigger in the two-step Think & Sync flow. The user (or the auto-cycle's cursor) clicks Think to actually run the agent. Hidden initially via opacity (revealed by the stagger), then visually presses on click. */.hero .v6-mockup-panel .v6-ap-think-btn, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn{ align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-family: var(--brand-font); font-size: 10px; font-weight: 700; letter-spacing: 0.005em; border: none; cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--blurple) 30%, transparent); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease, opacity 280ms ease; }.hero .v6-mockup-panel .v6-ap-think-btn:hover, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--blurple) 40%, transparent); }.hero .v6-mockup-panel .v6-ap-think-btn.is-clicked, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn.is-clicked{ transform: scale(0.96); box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 30%, transparent); }.hero .v6-mockup-panel .v6-ap-think-btn-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-think-btn-icon{ width: 11px; height: 11px; max-width: none; display: block; } /* ─── Proposed Scope (form-analyze) — no upload UI ─────────────── Auto-reads Discovery + module catalog (no file dropzone). Each context card pulses a scanning indicator that flips to a checkmark once "read." Then a Run button replaces the Think button. Shares the orb-thinking + diff phases with form-think above. */.hero .v6-mockup-panel .v6-ap-analyze-form, .surface-beat--navigate .v6-mockup-panel .v6-ap-analyze-form{ display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }.hero .v6-mockup-panel .v6-ap-analyze-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-analyze-head{ font-family: var(--brand-font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); padding: 0 2px; }.hero .v6-mockup-panel .v6-ap-context-cards, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-cards{ display: flex; flex-direction: column; gap: 8px; }.hero .v6-mockup-panel .v6-ap-context-card, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card{ display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); transition: background 220ms ease, border-color 220ms ease; }.hero .v6-mockup-panel .v6-ap-context-icon, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-icon{ width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--blurple) 14%, transparent); color: var(--blurple); flex: 0 0 auto; }.hero .v6-mockup-panel .v6-ap-context-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-icon svg{ width: 16px; height: 16px; max-width: none; max-height: none; }.hero .v6-mockup-panel .v6-ap-context-text, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-text{ display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }.hero .v6-mockup-panel .v6-ap-context-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-label{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 90%, transparent); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.hero .v6-mockup-panel .v6-ap-context-meta, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-meta{ font-family: var(--brand-font); font-size: 9px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); letter-spacing: 0.005em; } /* Status dot: scanning ring → check when card flips .is-ready. */.hero .v6-mockup-panel .v6-ap-context-status, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-status{ width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid color-mix(in srgb, var(--blurple) 60%, transparent); border-top-color: transparent; animation: v6ContextSpin 900ms linear infinite; } /* While the card is scanning (default state once .is-shown), a soft * blurple aura pulses behind it — visualizes the agent "reading." * Disappears the moment the card flips to .is-ready. */.hero .v6-mockup-panel .v6-ap-context-card.is-shown:not(.is-ready), .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-shown:not(.is-ready){ background: color-mix(in srgb, var(--blurple) 5%, color-mix(in srgb, var(--inv-bg-color) 3%, transparent)); border-color: color-mix(in srgb, var(--blurple) 26%, transparent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 35%, transparent); animation: v6CtxScan 1400ms cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes v6CtxScan { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 0%, transparent); } 50% { box-shadow: 0 0 18px 2px color-mix(in srgb, var(--blurple) 28%, transparent); } }.hero .v6-mockup-panel .v6-ap-context-card.is-ready, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-ready{ border-color: color-mix(in srgb, var(--success) 30%, transparent); background: color-mix(in srgb, var(--success) 5%, color-mix(in srgb, var(--inv-bg-color) 2%, transparent)); animation: v6CtxReady 520ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes v6CtxReady { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } 35% { box-shadow: 0 0 22px 4px color-mix(in srgb, var(--success) 38%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } }.hero .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status{ border: none; background: var(--success); animation: none; position: relative; }.hero .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-context-card.is-ready .v6-ap-context-status::after{ content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 10px 10px; } @keyframes v6ContextSpin { to { transform: rotate(360deg); } } /* ─── Think & Sync — three-stage panel UX ───────────────────────── STATE 1 (default): .v6-ap-think-form visible (tabs/sources/aggressiveness/Think btn) STATE 2 (.is-thinking): form hidden, AI assist orb + "Thinking…" centered STATE 3 (.is-proposing): orb hidden, diff visible, Accept footer fades in Class transitions happen in renderAgentPanel; CSS owns visibility. */.hero .v6-mockup-panel .v6-ap-thinking-stage, .hero .v6-mockup-panel .v6-ap-diff, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-stage, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff{ display: none; }.hero .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-think-form, .hero .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-analyze-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-think-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-analyze-form{ display: none; }.hero .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-thinking-stage, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-thinking .v6-ap-thinking-stage{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: 1 1 auto; padding: 24px 16px; animation: v6ThinkStageIn 320ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-think-form, .hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-analyze-form, .hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-thinking-stage, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-think-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-analyze-form, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-thinking-stage{ display: none; }.hero .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-diff, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel.is-proposing .v6-ap-diff{ display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; animation: v6DiffIn 340ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes v6ThinkStageIn { 0% { opacity: 0; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } } @keyframes v6DiffIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } /* Accumulating findings list under the orb. Each finding lands with * a scanning spinner ("is-current"), then locks ✓ ("is-done") when * the next finding appears. Builds visible work — the viewer SEES * the agent's chain of reasoning instead of a single swapping label. */.hero .v6-mockup-panel .v6-ap-thinking-findings, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-findings{ list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; width: max-content; max-width: 90%; }.hero .v6-mockup-panel .v6-ap-thinking-finding, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding{ display: flex; align-items: center; gap: 8px; font-family: var(--brand-font); font-size: 10px; font-weight: 500; letter-spacing: 0.005em; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); opacity: 0; transform: translateY(6px); animation: v6FindingIn 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6FindingIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-current, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-current{ color: color-mix(in srgb, var(--blurple) 70%, var(--v6-ink)); font-weight: 600; }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-done, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-done{ color: color-mix(in srgb, var(--v6-ink) 78%, transparent); } /* Spinner / check dot */.hero .v6-mockup-panel .v6-ap-thinking-finding-dot, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding-dot{ width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; position: relative; }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-current .v6-ap-thinking-finding-dot, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-current .v6-ap-thinking-finding-dot{ border: 1.5px solid color-mix(in srgb, var(--blurple) 60%, transparent); border-top-color: transparent; animation: v6FindingSpin 900ms linear infinite; }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot{ background: var(--success); border: none; animation: v6FindingLock 420ms cubic-bezier(0.22, 1, 0.36, 1); }.hero .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-finding.is-done .v6-ap-thinking-finding-dot::after{ content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; } @keyframes v6FindingSpin { to { transform: rotate(360deg); } } @keyframes v6FindingLock { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } 40% { box-shadow: 0 0 14px 3px color-mix(in srgb, var(--success) 38%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); } } /* AI assist orb — friendly AI icon with a soft pulsing aura while the agent is reasoning. */.hero .v6-mockup-panel .v6-ap-thinking-orb, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-orb{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; color: var(--blurple); background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 18%, var(--main-bg-color)), color-mix(in srgb, var(--purple) 14%, var(--main-bg-color))); border: 1px solid color-mix(in srgb, var(--blurple) 28%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--blurple) 20%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent); }.hero .v6-mockup-panel .v6-ap-thinking-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-orb svg{ width: 30px; height: 30px; max-width: none; animation: v6OrbBob 1.6s ease-in-out infinite; }.hero .v6-mockup-panel .v6-ap-thinking-orb::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-orb::after{ content: ""; position: absolute; inset: -6px; border-radius: 50%; background: color-mix(in srgb, var(--blurple) 35%, transparent); animation: v6OrbPulseRing 1.8s ease-in-out infinite; z-index: -1; } @keyframes v6OrbBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } } @keyframes v6OrbPulseRing { 0%, 100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 0; transform: scale(1.35); } }.hero .v6-mockup-panel .v6-ap-thinking-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-thinking-label{ font-family: var(--brand-font); font-size: 11px; font-weight: 600; letter-spacing: -0.005em; color: color-mix(in srgb, var(--blurple) 80%, transparent); } /* Diff view — change-proposal style. + marker, field name, value. Reads like a git diff so the user understands "these are the changes being proposed before I accept." */.hero .v6-mockup-panel .v6-ap-diff-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-head{ font-family: var(--brand-font); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); margin-bottom: 2px; }.hero .v6-mockup-panel .v6-ap-diff-rows, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-rows{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-diff-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row{ display: grid; grid-template-columns: 14px auto 1fr; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--green) 6%, transparent); border-left: 2px solid color-mix(in srgb, var(--green) 55%, transparent); font-family: var(--brand-font); font-size: 10px; line-height: 1.3; } /* Out-of-scope diff rows read as "considered + intentionally left out" — muted background, no accent border, dimmed text. */.hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"], .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"]{ background: color-mix(in srgb, var(--v6-ink) 3%, transparent); border-left-color: color-mix(in srgb, var(--v6-ink) 14%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-field, .hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-value, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-field, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-value{ color: color-mix(in srgb, var(--v6-ink) 55%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-marker{ font-weight: 800; color: color-mix(in srgb, var(--green) 80%, transparent); font-size: 12px; line-height: 1; text-align: center; }.hero .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row[data-scope="out"] .v6-ap-diff-marker{ color: color-mix(in srgb, var(--v6-ink) 38%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-field, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-field{ font-weight: 700; color: color-mix(in srgb, var(--v6-ink) 88%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-value, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-value{ color: color-mix(in srgb, var(--v6-ink) 72%, transparent); font-family: var(--brand-mono, var(--brand-font)); } /* Accept (Send-to-Workspace) footer — hidden until is-proposing, then fades in. */.hero .v6-mockup-panel .v6-agent-panel[data-layout="form-think"]:not(.is-proposing) .v6-agent-panel-foot, .hero .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"]:not(.is-proposing) .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-think"]:not(.is-proposing) .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"]:not(.is-proposing) .v6-agent-panel-foot{ display: none; }.hero .v6-mockup-panel .v6-agent-panel[data-layout="form-think"].is-proposing .v6-agent-panel-foot, .hero .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"].is-proposing .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-think"].is-proposing .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel[data-layout="form-analyze"].is-proposing .v6-agent-panel-foot{ animation: v6FootIn 320ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes v6FootIn { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } } /* As Accept fires, each diff row "transfers" to the workspace — fades, slides slightly left, strike-throughs as its matching sheet row resolves. Reads as "the proposed change just landed." */.hero .v6-mockup-panel .v6-ap-diff-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row{ transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease, border-color 320ms ease; }.hero .v6-mockup-panel .v6-ap-diff-row.is-transferring, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferring{ opacity: 0.45; transform: translateX(-6px); }.hero .v6-mockup-panel .v6-ap-diff-row.is-transferred, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferred{ opacity: 0.32; transform: translateX(0); background: color-mix(in srgb, var(--green) 4%, transparent); }.hero .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-field, .hero .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-value, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-field, .surface-beat--navigate .v6-mockup-panel .v6-ap-diff-row.is-transferred .v6-ap-diff-value{ text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--green) 60%, transparent); } /* ─── form-sow — SOW Generator — doc tabs + section toggles ─── */.hero .v6-mockup-panel .v6-ap-doc-tabs, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-tabs{ display: inline-flex; border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); gap: 0; align-self: flex-start; }.hero .v6-mockup-panel .v6-ap-doc-tab, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-tab{ padding: 4px 12px 6px; font-family: var(--brand-font); font-size: 10px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); border-bottom: 2px solid transparent; margin-bottom: -1px; }.hero .v6-mockup-panel .v6-ap-doc-tab.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-doc-tab.is-active{ color: var(--v6-ink); border-bottom-color: var(--blurple); }.hero .v6-mockup-panel .v6-ap-form-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-form-row{ display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }.hero .v6-mockup-panel .v6-ap-form-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-form-label{ font-family: var(--brand-font); font-size: 9px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-ap-file-chips, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-chips{ display: inline-flex; gap: 4px; }.hero .v6-mockup-panel .v6-ap-file-chip, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-chip{ padding: 3px 9px; border-radius: 6px; font-family: var(--brand-font); font-size: 9px; font-weight: 600; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-ap-file-chip.is-active, .surface-beat--navigate .v6-mockup-panel .v6-ap-file-chip.is-active{ background: var(--v6-ink); color: var(--v6-paper); border-color: transparent; }.hero .v6-mockup-panel .v6-ap-section-head, .surface-beat--navigate .v6-mockup-panel .v6-ap-section-head{ font-family: var(--brand-font); font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--v6-ink) 55%, transparent); margin-top: 2px; }.hero .v6-mockup-panel .v6-ap-toggle-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-list{ display: flex; flex-direction: column; gap: 4px; }.hero .v6-mockup-panel .v6-ap-toggle, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle{ display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--main-bg-color) 56%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); } /* Accordion chevron prefix for SOW section toggles — reads as a real * collapsible section row like in StatementOfWorkAgent. */.hero .v6-mockup-panel .v6-ap-toggle-chevron, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-chevron{ font-size: 9px; color: color-mix(in srgb, var(--blurple) 55%, transparent); line-height: 1; flex-shrink: 0; }.hero .v6-mockup-panel .v6-ap-toggle-label, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-label{ flex: 1; min-width: 0; } /* Sticky Generate button at the bottom of the SOW form. */.hero .v6-mockup-panel .v6-ap-sow-sticky, .surface-beat--navigate .v6-mockup-panel .v6-ap-sow-sticky{ margin-top: 6px; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--blurple) 14%, transparent); display: flex; justify-content: flex-end; }.hero .v6-mockup-panel .v6-ap-sow-generate, .surface-beat--navigate .v6-mockup-panel .v6-ap-sow-generate{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; border: none; cursor: pointer; font-family: var(--brand-font); font-size: 10px; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 4px 14px color-mix(in srgb, var(--blurple) 30%, transparent); }.hero .v6-mockup-panel .v6-ap-sow-generate svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-sow-generate svg{ width: 11px; height: 11px; }.hero .v6-mockup-panel .v6-ap-toggle-box, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle-box{ width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--main-bg-color) 80%, transparent); border: 1.5px solid color-mix(in srgb, var(--v6-ink) 20%, transparent); flex-shrink: 0; position: relative; }.hero .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box{ background: linear-gradient(135deg, var(--blurple), var(--purple)); border-color: transparent; }.hero .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-toggle.is-on .v6-ap-toggle-box::after{ content: ''; position: absolute; top: 2px; left: 4px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } /* ─── chat — alternating AI / user bubbles + input row + disclaimer ─── */.hero .v6-mockup-panel .v6-ap-chat-stream, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream{ display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }.hero .v6-mockup-panel .v6-ap-chat-stream::-webkit-scrollbar, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream::-webkit-scrollbar{ display: none; } /* Bubbles + typing dots must NOT shrink. The default flex-shrink:1 was * compressing each bubble vertically when the conversation total exceeded * the stream height — text overlapped or collapsed entirely, leaving the * panel looking empty. Locking shrink to 0 forces them to keep their * natural content height, and overflow-y:auto handles the rest. */.hero .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-bubble, .hero .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-chat-typing, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-bubble, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-stream > .v6-ap-chat-typing{ flex-shrink: 0; } /* Conversation fills from the top normally. When it outgrows the * stream, the JS revealInto helper scrolls the container so the bottom * of the content aligns with the bottom of the viewport. No CSS spacer * tricks — JS handles the overflow case explicitly. */.hero .v6-mockup-panel .v6-ap-chat-input, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-input{ margin-top: 6px; display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; background: color-mix(in srgb, var(--main-bg-color) 78%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 999px; }.hero .v6-mockup-panel .v6-ap-chat-textarea, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-textarea{ flex: 1; font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 38%, transparent); letter-spacing: -0.005em; line-height: 1.3; padding: 4px 0; }.hero .v6-mockup-panel .v6-ap-chat-send, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-send{ width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; flex-shrink: 0; box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 35%, transparent); }.hero .v6-mockup-panel .v6-ap-chat-send svg, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-send svg{ width: 12px; height: 12px; }.hero .v6-mockup-panel .v6-ap-chat-disclaimer, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-disclaimer{ display: block; margin-top: 4px; text-align: center; font-family: var(--brand-font); font-size: 8px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 35%, transparent); letter-spacing: 0; line-height: 1.3; }.hero .v6-mockup-panel .v6-ap-bubble, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble{ display: flex; max-width: 86%; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="ai"], .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="ai"]{ align-self: flex-start; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="user"], .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="user"]{ align-self: flex-end; }.hero .v6-mockup-panel .v6-ap-bubble-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble-body{ padding: 6px 10px; border-radius: 12px; font-family: var(--brand-font); font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="ai"] .v6-ap-bubble-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="ai"] .v6-ap-bubble-body{ background: color-mix(in srgb, var(--main-bg-color) 70%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); color: color-mix(in srgb, var(--v6-ink) 88%, transparent); border-bottom-left-radius: 4px; }.hero .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body{ background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 12px color-mix(in srgb, var(--blurple) 25%, transparent); }.hero .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body strong, .surface-beat--navigate .v6-mockup-panel .v6-ap-bubble[data-from="user"] .v6-ap-bubble-body strong{ color: #fff; } /* ─── report — Cheat Sheet — collapsible-style sections with chevrons ─── */.hero .v6-mockup-panel .v6-ap-report-chevron, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-chevron{ display: inline-block; margin-right: 5px; font-size: 9px; color: color-mix(in srgb, var(--blurple) 60%, transparent); line-height: 1; transform: translateY(-1px); }.hero .v6-mockup-panel .v6-ap-report-sections, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-sections{ display: flex; flex-direction: column; gap: 8px; }.hero .v6-mockup-panel .v6-ap-report-section, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-section{ border-left: 2px solid color-mix(in srgb, var(--blurple) 40%, transparent); padding-left: 8px; }.hero .v6-mockup-panel .v6-ap-report-h, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-h{ display: block; font-family: var(--brand-font); font-size: 10px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.005em; margin-bottom: 3px; }.hero .v6-mockup-panel .v6-ap-report-body, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-body{ font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); line-height: 1.45; }.hero .v6-mockup-panel .v6-ap-report-body ul, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-body ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }.hero .v6-mockup-panel .v6-ap-report-body p, .surface-beat--navigate .v6-mockup-panel .v6-ap-report-body p{ margin: 0; } /* ─── list — Solution Fit / Assign Owners — state-marked rows ─── */.hero .v6-mockup-panel .v6-ap-list, .surface-beat--navigate .v6-mockup-panel .v6-ap-list{ display: flex; flex-direction: column; gap: 5px; }.hero .v6-mockup-panel .v6-ap-list-row, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row{ display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 82%, transparent); }.hero .v6-mockup-panel .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-marker{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }.hero .v6-mockup-panel .v6-ap-list-row[data-state="pass"] .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="pass"] .v6-ap-list-marker{ background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent); }.hero .v6-mockup-panel .v6-ap-list-row[data-state="warn"] .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="warn"] .v6-ap-list-marker{ background: #E5A24A; box-shadow: 0 0 6px color-mix(in srgb, #E5A24A 50%, transparent); }.hero .v6-mockup-panel .v6-ap-list-row[data-state="open"] .v6-ap-list-marker, .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="open"] .v6-ap-list-marker{ background: transparent; border: 1.5px solid color-mix(in srgb, var(--v6-ink) 30%, transparent); }.hero .v6-mockup-panel .v6-ap-list-row[data-state="open"], .surface-beat--navigate .v6-mockup-panel .v6-ap-list-row[data-state="open"]{ opacity: 0.7; } /* Footer + CTA */.hero .v6-mockup-panel .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-foot{ display: flex; justify-content: flex-end; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--blurple) 14%, transparent); } /* GUEST-side chat panels (Smart Conversation, Diligent Attendee, etc.): the chat IS what drives the workspace, so no "Send to Workspace" CTA, the panel docks LEFT with a see-through background so the sheet on the right stays visible. Scoped to [data-persona="guest"] so host-side chat agents (Tailored Script, Execution Readiness, AI Navigator) keep their opaque right-side default. */.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-foot, .hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-attribution, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-foot, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"] .v6-agent-panel-attribution{ display: none; }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel[data-layout="chat"]{ left: 12px !important; right: auto !important; width: 58% !important; background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 8%, color-mix(in srgb, var(--main-bg-color) 30%, transparent)) 0%, color-mix(in srgb, var(--main-bg-color) 40%, transparent) 60%); backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5); border-color: color-mix(in srgb, var(--purple) 28%, transparent); } /* Inline typing-dots indicator that pops in the chat stream just before an AI bubble lands. Sells the "agent is composing" beat. */.hero .v6-mockup-panel .v6-ap-chat-typing, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing{ align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; margin: 4px 0; border-radius: 14px; background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); animation: v6ChatTypingIn 220ms ease-out; }.hero .v6-mockup-panel .v6-ap-chat-typing > span, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing > span{ width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--v6-ink) 45%, transparent); animation: v6ChatTypingDot 1.1s ease-in-out infinite; }.hero .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(2){ animation-delay: 0.14s; }.hero .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-typing > span:nth-child(3){ animation-delay: 0.28s; } @keyframes v6ChatTypingIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes v6ChatTypingDot { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* Customer-typing state — when the user is "typing" their message, the chat input box shows the text as it gets entered and looks active (caret blink, accent border). */.hero .v6-mockup-panel .v6-ap-chat-textarea.is-typing, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-textarea.is-typing{ color: var(--v6-ink); }.hero .v6-mockup-panel .v6-ap-chat-input:has(.v6-ap-chat-textarea.is-typing), .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-input:has(.v6-ap-chat-textarea.is-typing){ border-color: color-mix(in srgb, var(--purple) 45%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--purple) 12%, transparent); }.hero .v6-mockup-panel .v6-ap-chat-textarea.is-typing::after, .surface-beat--navigate .v6-mockup-panel .v6-ap-chat-textarea.is-typing::after{ content: "▍"; display: inline-block; margin-left: 1px; color: color-mix(in srgb, var(--purple) 70%, transparent); animation: v6StreamCaret 0.7s steps(2) infinite; }.hero .v6-mockup-panel .v6-agent-panel-cta, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel-cta{ padding: 6px 14px; border-radius: 999px; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; font-family: var(--brand-font); font-size: 10px; font-weight: 600; letter-spacing: 0.01em; border: none; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--blurple) 35%, transparent); } /* ─── PERSONA PILL — segmented Host / Guest indicator in stage header ─── */.hero .v6-mockup-panel .v6-persona-pill, .surface-beat--navigate .v6-mockup-panel .v6-persona-pill{ display: inline-flex; align-items: center; padding: 2px; margin-top: 6px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--brand-font); font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }.hero .v6-mockup-panel .v6-persona-pill > span, .surface-beat--navigate .v6-mockup-panel .v6-persona-pill > span{ padding: 2px 9px; border-radius: 999px; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); transition: background 300ms ease, color 300ms ease, box-shadow 300ms ease; }.hero .v6-mockup-panel[data-persona="host"] .v6-persona-pill [data-seg="host"], .hero .v6-mockup-panel:not([data-persona="guest"]) .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel[data-persona="host"] .v6-persona-pill [data-seg="host"], .surface-beat--navigate .v6-mockup-panel:not([data-persona="guest"]) .v6-persona-pill [data-seg="host"]{ background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--blurple) 40%, transparent); }.hero .v6-mockup-panel[data-persona="guest"] .v6-persona-pill [data-seg="guest"], .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-persona-pill [data-seg="guest"]{ background: linear-gradient(135deg, var(--purple), #D490FF); color: #fff; box-shadow: 0 1px 4px color-mix(in srgb, var(--purple) 40%, transparent); } /* Guest persona — re-tint the agent panel border + orb so the user reads the perspective shift */.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel{ background: linear-gradient(160deg, color-mix(in srgb, var(--purple) 12%, var(--main-bg-color)) 0%, color-mix(in srgb, var(--main-bg-color) 88%, transparent) 60%); border-color: color-mix(in srgb, var(--purple) 32%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 24px 64px color-mix(in srgb, var(--purple) 20%, transparent), 0 8px 24px color-mix(in srgb, var(--inv-bg-color) 12%, transparent); }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-orb, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-orb{ background: linear-gradient(135deg, var(--purple), #D490FF); box-shadow: 0 0 0 4px color-mix(in srgb, var(--purple) 18%, transparent), 0 0 14px color-mix(in srgb, var(--purple) 60%, transparent); }.hero .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-state, .surface-beat--navigate .v6-mockup-panel[data-persona="guest"] .v6-agent-panel-state{ background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); } /* Mobile — agent panel takes full panel below the chrome */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-agent-panel, .surface-beat--navigate .v6-mockup-panel .v6-agent-panel{ top: 60px; right: 10px; bottom: 10px; left: 10px; width: auto; padding: 12px; } } /* ═══════════════════════════════════════════════════════════════ * AGENT TRIGGER PILL — replaces the old .v6-section-agents block. * Per product feedback: "no agent selector inside the collaboration * space — you have to click back to get the agent if you want." So * agents are surfaced via a single compact pill that sits OUTSIDE * the collab section (at the foot of the stage panel), reading as a * suggestion bar rather than another sub-surface inside the workspace. * ═══════════════════════════════════════════════════════════════ */.hero .v6-mockup-panel .v6-stage-panel .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-agent-trigger{ display: flex; align-items: center; gap: 8px; margin: 0 14px 12px; padding: 7px 10px 7px 8px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 7%, var(--main-bg-color)), color-mix(in srgb, var(--purple) 4%, var(--main-bg-color))); border: 1px solid color-mix(in srgb, var(--blurple) 22%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 4px 12px color-mix(in srgb, var(--blurple) 10%, transparent); cursor: pointer; flex-shrink: 0; font-family: var(--brand-font); transition: transform 220ms var(--v6-spring), box-shadow 220ms var(--v6-ease), background 220ms ease; }.hero .v6-mockup-panel .v6-agent-trigger:hover, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger:hover{ transform: translateY(-1px); box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 8px 20px color-mix(in srgb, var(--blurple) 18%, transparent); }.hero .v6-mockup-panel .v6-agent-trigger-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb{ width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 10px color-mix(in srgb, var(--blurple) 45%, transparent); }.hero .v6-mockup-panel .v6-agent-trigger-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb svg{ width: 10px; height: 10px; }.hero .v6-mockup-panel .v6-agent-trigger-badge, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-badge{ padding: 1px 6px; border-radius: 999px; font-size: 7px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blurple); background: color-mix(in srgb, var(--blurple) 16%, transparent); border: 0.5px solid color-mix(in srgb, var(--blurple) 28%, transparent); flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-trigger-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-name{ font-size: 11px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.01em; line-height: 1; white-space: nowrap; flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-trigger-status, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-status{ font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 60%, transparent); letter-spacing: -0.005em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }.hero .v6-mockup-panel .v6-agent-trigger-caret, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-caret{ font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 40%, transparent); flex-shrink: 0; line-height: 1; } /* Hide the trigger during workspace + workspace-guest substates — * the collab space is doing its thing; the agent trigger reads as * noise. It re-emerges automatically when we return to home. */.hero .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-agent-trigger, .hero .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-trigger, .hero .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel[data-substate="workspace"] .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="agent"] .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel[data-stage-substate="workspace-guest"] .v6-agent-trigger{ opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 240ms var(--v6-ease), transform 280ms var(--v6-ease); }.hero .v6-mockup-panel .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger{ transition: opacity 280ms var(--v6-ease), transform 280ms var(--v6-spring), box-shadow 220ms var(--v6-ease), background 220ms ease; } /* Mobile — tighten the trigger pill */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-agent-trigger, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger{ margin: 0 12px 10px; padding: 6px 9px 6px 7px; gap: 6px; }.hero .v6-mockup-panel .v6-agent-trigger-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-agent-trigger-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-orb svg{ width: 9px; height: 9px; }.hero .v6-mockup-panel .v6-agent-trigger-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-name{ font-size: 10px; }.hero .v6-mockup-panel .v6-agent-trigger-status, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-status{ font-size: 9px; }.hero .v6-mockup-panel .v6-agent-trigger-badge, .surface-beat--navigate .v6-mockup-panel .v6-agent-trigger-badge{ font-size: 7px; padding: 1px 5px; } } /* Workspace state strip — hidden in stage home (it competed for the tight section height and bled into the agents row below). The same "live state" intent is already carried by .v6-agents-status. The strip still appears inside the workspace substate (.v6-collab-inner). */.hero .v6-mockup-panel .v6-stage-panel .v6-workspace-state, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-workspace-state{ display: none; }.hero .v6-mockup-panel .v6-collab-inner .v6-workspace-state, .surface-beat--navigate .v6-mockup-panel .v6-collab-inner .v6-workspace-state{ margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); flex-wrap: wrap; }.hero .v6-mockup-panel .v6-state-chip, .surface-beat--navigate .v6-mockup-panel .v6-state-chip{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); font-family: var(--brand-font); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }.hero .v6-mockup-panel .v6-state-chip::before, .surface-beat--navigate .v6-mockup-panel .v6-state-chip::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 4px color-mix(in srgb, var(--green) 60%, transparent); }.hero .v6-mockup-panel .v6-state-chip[data-state="planned"], .surface-beat--navigate .v6-mockup-panel .v6-state-chip[data-state="planned"]{ background: color-mix(in srgb, var(--v6-ink) 6%, transparent); color: color-mix(in srgb, var(--v6-ink) 60%, transparent); }.hero .v6-mockup-panel .v6-state-chip[data-state="planned"]::before, .surface-beat--navigate .v6-mockup-panel .v6-state-chip[data-state="planned"]::before{ background: color-mix(in srgb, var(--v6-ink) 45%, transparent); box-shadow: none; }.hero .v6-mockup-panel .v6-state-meta, .surface-beat--navigate .v6-mockup-panel .v6-state-meta{ font-family: var(--brand-font); font-size: 9px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 50%, transparent); letter-spacing: -0.005em; } /* Inline .v6-agent-action panels (one per stage panel, baked into HTML) are redundant now that the shared sliding aside (.v6-agent-panel) handles agent open state. Hide them to declutter the stage home. */.hero .v6-mockup-panel .v6-stage-panel .v6-agent-action, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-agent-action{ display: none; } /* ─── Agent-in-action — the live work the top agent is doing right now. Sits below the agent tiles. Reads as a real assistant panel: gradient orb, agent name, live state, and a chat-bubble preview of the current action with animated typing dots. */.hero .v6-mockup-panel .v6-agent-action, .surface-beat--navigate .v6-mockup-panel .v6-agent-action{ margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 7%, transparent), color-mix(in srgb, var(--purple) 5%, transparent)); border: 1px solid color-mix(in srgb, var(--blurple) 20%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--blurple) 10%, transparent); }.hero .v6-mockup-panel .v6-agent-action-header, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-header{ display: flex; align-items: center; gap: 7px; }.hero .v6-mockup-panel .v6-agent-action-orb, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-orb{ width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--blurple), var(--purple)); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 55%, transparent), 0 0 12px color-mix(in srgb, var(--blurple) 60%, transparent); animation: v6AgentOrbPulse 1.8s ease-in-out infinite; flex-shrink: 0; }.hero .v6-mockup-panel .v6-agent-action-orb svg, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-orb svg{ width: 10px; height: 10px; } @keyframes v6AgentOrbPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blurple) 55%, transparent), 0 0 10px color-mix(in srgb, var(--blurple) 50%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--blurple) 0%, transparent), 0 0 16px color-mix(in srgb, var(--blurple) 80%, transparent); } }.hero .v6-mockup-panel .v6-agent-action-name, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-name{ font-family: var(--brand-font); font-size: 11px; font-weight: 700; color: var(--v6-ink); letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-agent-action-state, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-state{ margin-left: auto; font-family: var(--brand-font); font-size: 9px; font-weight: 600; color: color-mix(in srgb, var(--blurple) 75%, var(--v6-ink)); letter-spacing: 0.02em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--blurple) 12%, transparent); }.hero .v6-mockup-panel .v6-agent-action-bubble, .surface-beat--navigate .v6-mockup-panel .v6-agent-action-bubble{ margin-top: 8px; display: flex; align-items: flex-start; gap: 7px; padding: 8px 10px; background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); font-family: var(--brand-font); font-size: 10px; font-weight: 500; color: color-mix(in srgb, var(--v6-ink) 78%, transparent); line-height: 1.4; letter-spacing: -0.005em; }.hero .v6-mockup-panel .v6-typing, .surface-beat--navigate .v6-mockup-panel .v6-typing{ display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; flex-shrink: 0; }.hero .v6-mockup-panel .v6-typing-dot, .surface-beat--navigate .v6-mockup-panel .v6-typing-dot{ width: 4px; height: 4px; border-radius: 50%; background: var(--blurple); animation: v6TypingDot 1.2s ease-in-out infinite; }.hero .v6-mockup-panel .v6-typing-dot:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-typing-dot:nth-child(2){ animation-delay: 0.15s; }.hero .v6-mockup-panel .v6-typing-dot:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-typing-dot:nth-child(3){ animation-delay: 0.3s; } @keyframes v6TypingDot { 0%, 60%, 100% { opacity: 0.25; transform: scale(0.9); } 30% { opacity: 1; transform: scale(1.2); } } /* Role-viewing line was redundant with the persona-pill segments immediately below it (both convey "viewing as Host · Sarah K." vs the pill's "For Sarah · Host"). Hide to reclaim ~26px of header. */.hero .v6-mockup-panel .v6-stage-role, .surface-beat--navigate .v6-mockup-panel .v6-stage-role{ display: none; }.hero .v6-mockup-panel .v6-stage-role-legacy, .surface-beat--navigate .v6-mockup-panel .v6-stage-role-legacy{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); font-family: var(--brand-font); font-size: 9px; font-weight: 600; color: color-mix(in srgb, var(--v6-ink) 70%, transparent); letter-spacing: 0.01em; margin-top: 6px; }.hero .v6-mockup-panel .v6-stage-role::before, .surface-beat--navigate .v6-mockup-panel .v6-stage-role::before{ content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blurple); box-shadow: 0 0 4px color-mix(in srgb, var(--blurple) 60%, transparent); } /* Mobile — proportional shrink, single column not needed (tiles stay in row) */ @media (max-width: 720px) {.hero .v6-mockup-panel .v6-stage-header, .surface-beat--navigate .v6-mockup-panel .v6-stage-header{ padding: 8px 12px 0; }.hero .v6-mockup-panel .v6-stage-title, .surface-beat--navigate .v6-mockup-panel .v6-stage-title{ font-size: 16px; }.hero .v6-mockup-panel .v6-stage-desc, .surface-beat--navigate .v6-mockup-panel .v6-stage-desc{ font-size: 10px; }.hero .v6-mockup-panel .v6-stage-meta, .surface-beat--navigate .v6-mockup-panel .v6-stage-meta{ flex-wrap: wrap; margin: 0 12px; padding: 2px; }.hero .v6-mockup-panel .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell{ flex-basis: 33.33%; padding: 5px 4px; }.hero .v6-mockup-panel .v6-meta-cell + .v6-meta-cell, .surface-beat--navigate .v6-mockup-panel .v6-meta-cell + .v6-meta-cell{ border-left: none; }.hero .v6-mockup-panel .v6-stage-body, .surface-beat--navigate .v6-mockup-panel .v6-stage-body{ padding: 6px 12px 10px; gap: 6px; }.hero .v6-mockup-panel .v6-stage-section, .surface-beat--navigate .v6-mockup-panel .v6-stage-section{ padding: 16px 10px 6px; }.hero .v6-mockup-panel .v6-app-grid, .surface-beat--navigate .v6-mockup-panel .v6-app-grid{ gap: 12px; }.hero .v6-mockup-panel .v6-app-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon{ width: 36px; height: 36px; border-radius: 10px; }.hero .v6-mockup-panel .v6-app-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-icon svg{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-app-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-app-tile-label{ font-size: 9px; }.hero .v6-mockup-panel .v6-section-agents .v6-agents-status, .surface-beat--navigate .v6-mockup-panel .v6-section-agents .v6-agents-status{ display: none; } } /* ════════════════════════════════════════════════════════════════════ MOBILE PHASE OVERRIDES — must live at end of file so they win source order over the unconditional desktop CSN/SPD rules earlier in the stylesheet (equal-specificity rules lose to whichever comes last). ════════════════════════════════════════════════════════════════════ */ @media (max-width: 720px) { /* CSN picker — center the 3-tile picker as a clean vertical stack */.hero .v6-mockup-panel .v6-csn-picker, .surface-beat--navigate .v6-mockup-panel .v6-csn-picker{ inset: 12% 0 auto 0; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: 0 14px; }.hero .v6-mockup-panel .v6-csn-eyebrow, .surface-beat--navigate .v6-mockup-panel .v6-csn-eyebrow{ display: block; font-size: 9px; margin-bottom: 4px; }.hero .v6-mockup-panel .v6-csn-columns, .surface-beat--navigate .v6-mockup-panel .v6-csn-columns{ flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; gap: 14px; }.hero .v6-mockup-panel .v6-csn-column, .surface-beat--navigate .v6-mockup-panel .v6-csn-column{ align-items: center; gap: 6px; min-width: 0; width: auto; }.hero .v6-mockup-panel .v6-csn-tile-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon{ width: 48px; height: 48px; border-radius: 12px; }.hero .v6-mockup-panel .v6-csn-tile-icon svg, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-icon svg{ width: 24px; height: 24px; }.hero .v6-mockup-panel .v6-csn-tile-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-tile-label{ font-size: 11px; }.hero .v6-mockup-panel .v6-csn-agent, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent{ margin-top: 4px; padding: 4px 10px 4px 4px; }.hero .v6-mockup-panel .v6-csn-agent-icon, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-icon{ width: 18px; height: 18px; }.hero .v6-mockup-panel .v6-csn-agent-label, .surface-beat--navigate .v6-mockup-panel .v6-csn-agent-label{ font-size: 9px; } /* SPD — shrink the journey map so all 3 pills fit the 420px panel. Map pill goes 280px → 160px (chart 200→128, less padding). Top padding clears the 30px window-chrome + breathing room. */.hero .v6-mockup-panel .v6-spd, .surface-beat--navigate .v6-mockup-panel .v6-spd{ padding: 42px 12px 12px; gap: 6px; }.hero .v6-mockup-panel .v6-spd-map, .surface-beat--navigate .v6-mockup-panel .v6-spd-map{ padding: 10px 12px 12px; min-height: 0; }.hero .v6-mockup-panel .v6-spd-mini-chart, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-chart{ width: 150px; height: 150px; margin: 4px auto 0; overflow: visible; } /* Mobile pills on the ring stroke — chart is 150px (radius 75), ring stroke at ~73. Pill centers at r=73. 60° polar: x=±63, y=±37. */.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(1), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(1){ --mx: 0; --my: -73px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(2), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(2){ --mx: 63px; --my: -37px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(3), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(3){ --mx: 63px; --my: 37px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(4), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(4){ --mx: 0; --my: 73px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(5), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(5){ --mx: -63px; --my: 37px; }.hero .v6-mockup-panel .v6-spd-mini-node:nth-child(6), .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node:nth-child(6){ --mx: -63px; --my: -37px; }.hero .v6-mockup-panel .v6-spd-mini-node, .surface-beat--navigate .v6-mockup-panel .v6-spd-mini-node{ width: 50px; height: 16px; margin-left: -25px; margin-top: -8px; font-size: 8px; border-width: 1px; }.hero .v6-mockup-panel .v6-spd-goals, .hero .v6-mockup-panel .v6-spd-directions, .surface-beat--navigate .v6-mockup-panel .v6-spd-goals, .surface-beat--navigate .v6-mockup-panel .v6-spd-directions{ padding: 8px 12px 10px; }.hero .v6-mockup-panel .v6-spd-list, .surface-beat--navigate .v6-mockup-panel .v6-spd-list{ gap: 2px; }.hero .v6-mockup-panel .v6-spd-list li, .surface-beat--navigate .v6-mockup-panel .v6-spd-list li{ font-size: 10px; padding: 1px 0; line-height: 1.25; }.hero .v6-mockup-panel .v6-spd-header, .surface-beat--navigate .v6-mockup-panel .v6-spd-header{ gap: 6px; }.hero .v6-mockup-panel .v6-spd-header-title, .surface-beat--navigate .v6-mockup-panel .v6-spd-header-title{ font-size: 11px; }.hero .v6-mockup-panel .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-footer{ font-size: 8px; margin-top: 0; } /* Drop "+2 more" footer on mobile to gain a line */.hero .v6-mockup-panel .v6-spd-goals .v6-spd-footer, .surface-beat--navigate .v6-mockup-panel .v6-spd-goals .v6-spd-footer{ display: none; } /* Stage 1 (Experience) content cards — title was wrapping awkwardly at 75px width. Shrink the title font + tighten so it reads cleanly. */.hero .v6-mockup-panel .v6-content-grid, .surface-beat--navigate .v6-mockup-panel .v6-content-grid{ gap: 6px; }.hero .v6-mockup-panel .v6-content-card, .surface-beat--navigate .v6-mockup-panel .v6-content-card{ padding: 6px; gap: 3px; }.hero .v6-mockup-panel .v6-content-title, .surface-beat--navigate .v6-mockup-panel .v6-content-title{ font-size: 9px; line-height: 1.15; }.hero .v6-mockup-panel .v6-content-meta, .surface-beat--navigate .v6-mockup-panel .v6-content-meta{ font-size: 8px; } /* Stage 5 (Success) KPIs — switch to 4-column at narrow width so all 4 KPIs (Adoption, NPS, Tickets, Renewal) sit on one row. */.hero .v6-mockup-panel .v6-kpis, .surface-beat--navigate .v6-mockup-panel .v6-kpis{ grid-template-columns: repeat(4, 1fr); gap: 5px; }.hero .v6-mockup-panel .v6-kpi, .surface-beat--navigate .v6-mockup-panel .v6-kpi{ padding: 6px; gap: 2px; }.hero .v6-mockup-panel .v6-kpi-label, .surface-beat--navigate .v6-mockup-panel .v6-kpi-label{ font-size: 7px; }.hero .v6-mockup-panel .v6-kpi-value, .surface-beat--navigate .v6-mockup-panel .v6-kpi-value{ font-size: 14px; }.hero .v6-mockup-panel .v6-kpi-trend, .surface-beat--navigate .v6-mockup-panel .v6-kpi-trend{ font-size: 8px; } /* Hide section labels on mobile — sections are too short, labels overlap the centered tiles. The tile rows are self-explanatory. */.hero .v6-mockup-panel .v6-stage-panel .v6-section-label, .surface-beat--navigate .v6-mockup-panel .v6-stage-panel .v6-section-label{ display: none; }.hero .v6-mockup-panel .v6-stage-section, .surface-beat--navigate .v6-mockup-panel .v6-stage-section{ padding-top: 8px; } } /* ════════════════════════════════════════════════════════════════════ * SURFACE DESIGN SYSTEM — chart quadrants + proof stat cards * * Single premium-glass treatment shared across: * - 4 chart quadrants (cartesian chart on the problem section) * - 1 active CN quadrant (same family, more elevation) * - 5 proof stat cards (incl. the .proof-stat-emphasis 77% variant) * * Lives at the END of the file so it wins source order against all the * legacy gradient blocks scattered through lines 1389+, 1899+, 2050+, * 2432+ that hard-coded saturated purple + white text. Single source of * truth — modify here, not in the legacy locations. * ════════════════════════════════════════════════════════════════════ */ :root { --surface-glass-bg: color-mix(in srgb, var(--main-bg-color) 55%, transparent); --surface-glass-border: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); --surface-glass-shadow: 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset, 0 6px 22px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); --surface-glass-shadow-hover: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 14px 32px color-mix(in srgb, var(--inv-bg-color) 9%, transparent); --surface-glass-bg-active: radial-gradient(ellipse 75% 60% at 50% 45%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 80%), color-mix(in srgb, var(--blurple) 2.5%, var(--main-bg-color)); --surface-glass-border-active: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); --surface-glass-shadow-active: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 18px 40px color-mix(in srgb, var(--inv-bg-color) 9%, transparent), 0 6px 14px color-mix(in srgb, var(--blurple) 8%, transparent); --surface-glass-shadow-active-hover: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 26px 58px color-mix(in srgb, var(--inv-bg-color) 12%, transparent), 0 10px 22px color-mix(in srgb, var(--blurple) 11%, transparent); --surface-ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ─── Inactive chart quadrants — bare base, soft wash on hover. * No border ever. Hover gets a subtle blurple-tinted background + * faint shadow so it reads as "highlighted" without adding chrome. */ .cartesian-chart .chart-quadrant { background: transparent !important; border: none !important; border-radius: 12px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 320ms var(--surface-ease), box-shadow 320ms var(--surface-ease), opacity 320ms ease !important; } .cartesian-chart .chart-quadrant:hover { transform: none; background: color-mix(in srgb, var(--blurple) 4%, transparent) !important; border-color: transparent !important; box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--blurple) 16%, transparent) !important; opacity: 1 !important; filter: none !important; } .cartesian-chart .quadrant-transactional, .cartesian-chart .quadrant-mass-custom, .cartesian-chart .quadrant-buyer-orchestration { opacity: 0.85 !important; filter: none !important; } .cartesian-chart .quadrant-transactional:hover, .cartesian-chart .quadrant-mass-custom:hover, .cartesian-chart .quadrant-buyer-orchestration:hover { opacity: 1 !important; filter: none !important; } /* ─── Proof stat cards — glass treatment (the cards earn it; the * cartesian quadrants don't). */ .proof-section .proof-stat-card { background: var(--surface-glass-bg) !important; border: 1px solid var(--surface-glass-border) !important; border-radius: 16px !important; box-shadow: var(--surface-glass-shadow) !important; backdrop-filter: blur(14px) saturate(1.15) !important; -webkit-backdrop-filter: blur(14px) saturate(1.15) !important; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease !important; } .proof-section .proof-stat-card:hover { transform: translateY(-2px); box-shadow: var(--surface-glass-shadow-hover) !important; border-color: color-mix(in srgb, var(--inv-bg-color) 14%, transparent) !important; background: var(--surface-glass-bg) !important; } /* ─── Active CN quadrant — same neutral hairline as proof cards (1px, * tinted with ink not blurple) so the family reads as one design system. * Background is a barely-there blurple wash; saturation lives in the * canonical CN gradient (text/marks), not the surface. */ .cartesian-chart .chart-quadrant.active-quadrant, .cartesian-chart .chart-quadrant.quadrant-customernode.active-quadrant { background: var(--surface-glass-bg-active) !important; border: 1px solid var(--surface-glass-border-active) !important; border-radius: 16px !important; box-shadow: var(--surface-glass-shadow-active) !important; backdrop-filter: blur(14px) saturate(1.1) !important; -webkit-backdrop-filter: blur(14px) saturate(1.1) !important; transition: transform 420ms var(--surface-ease), box-shadow 420ms var(--surface-ease), border-color 320ms ease, background 320ms ease !important; will-change: transform; } .cartesian-chart .chart-quadrant.active-quadrant:hover, .cartesian-chart .chart-quadrant.quadrant-customernode.active-quadrant:hover, .cartesian-chart .chart-quadrant.quadrant-customernode:hover { transform: translate(8px, -10px) scale(1.022); background: var(--surface-glass-bg-active) !important; border-color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent) !important; box-shadow: var(--surface-glass-shadow-active-hover) !important; } /* ─── Text colors — softened ink on these surfaces ────────────────── * Solid black on the glass cards reads as heavy/aggressive. Softened * by mixing 6% blurple into the ink, which adds a faint blue undertone * that reads as premium-financial (Bloomberg, Stripe Press) instead of * default-system-black. The legacy `color: #fff !important` rules * (lines 2050, 2055, 2072, 2434, 2439) are overridden here. */ .cartesian-chart .active-quadrant .quadrant-title, .cartesian-chart .quadrant-customernode .quadrant-title, .cartesian-chart .quadrant-customernode:hover .quadrant-title { color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; opacity: 0.92 !important; } .cartesian-chart .active-quadrant .quadrant-meta, .cartesian-chart .quadrant-customernode .quadrant-meta, .cartesian-chart .quadrant-customernode:hover .quadrant-meta { color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent) !important; } .cartesian-chart .active-quadrant .quadrant-nodes, .cartesian-chart .quadrant-customernode .quadrant-nodes, .cartesian-chart .quadrant-customernode:hover .quadrant-nodes, .cartesian-chart .active-quadrant .quadrant-line, .cartesian-chart .quadrant-customernode .quadrant-line, .cartesian-chart .quadrant-customernode:hover .quadrant-line, .cartesian-chart .active-quadrant .chart-node, .cartesian-chart .quadrant-customernode .chart-node { color: color-mix(in srgb, var(--inv-bg-color) 78%, var(--blurple) 10%) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 78%, var(--blurple) 10%) !important; } /* The general hover rule was opacity-toggling .quadrant-meta / * .quadrant-nodes (0 → 0.65/0.9). Keep that intent — these don't show * until hovered — but on the active quadrant, they're always visible. */ .cartesian-chart .active-quadrant .quadrant-meta, .cartesian-chart .active-quadrant .quadrant-nodes { opacity: 1 !important; } /* ─── Proof stat card sizing + text on the glass surface ─────────── */ .proof-section .proof-stat-card { padding: 1.5rem 1.25rem !important; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1), border-color 320ms ease !important; } /* Stat values: softer ink with faint blurple undertone. Solid pure * black read as heavy/aggressive at 3rem; the slight blue mix gives * the numbers a premium-financial feel without going full gradient. */ .proof-section .proof-stat-card .proof-stat-value { color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; } /* The 77% emphasis card matches every other stat — same surface, same * text. Emphasis comes from position (first in grid). */ .proof-section .proof-stat-card.proof-stat-emphasis { background: var(--surface-glass-bg) !important; border: 1px solid var(--surface-glass-border) !important; border-radius: 16px !important; box-shadow: var(--surface-glass-shadow) !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-value { color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; -webkit-text-fill-color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)) !important; filter: none !important; } .proof-section .proof-stat-card.proof-stat-emphasis .proof-stat-label { color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent) !important; font-weight: 500 !important; } /* ════════════════════════════════════════════════════════════════════ SURFACE JOURNEY — Create / Share / Navigate. Sticky-aside scroll pattern. The aside (left column) pins as the user scrolls and holds the section's editorial moment ("Can't buy now? Journey now.") + the live "Now showing" tracker. The right column scrolls through three beats — Create, Share, Navigate. ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ "Can't buy now? Journey now." — EPIC REVEAL Full-width editorial interstitial between proof stats and beats. Uses the v6_reveals.js is-visible hook for per-line @keyframe animations: ambient glow blooms first, line 1 fades up, line 2 punches in from scale with a brief gradient glow flare. ════════════════════════════════════════════════════════════════════ */ .journey-interstitial { position: relative; padding: clamp(72px, 10vw, 128px) clamp(20px, 4vw, 56px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 28px); text-align: center; overflow: visible; } /* Neutralise the generic .reveal on the container — we animate * children directly; the wrapper must stay fully visible as an anchor. */ .journey-interstitial.reveal, .journey-interstitial .surface-journey-bridge.reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } /* ── Ambient glow bloom ──────────────────────────────────────────── * Blooms behind the text during the reveal, then settles to a soft * halo that frames the section. */ .journey-interstitial::before { content: ''; position: absolute; inset: -100px -140px; background: radial-gradient( ellipse 75% 65% at 50% 58%, color-mix(in srgb, var(--blurple) 20%, transparent), color-mix(in srgb, var(--purple) 10%, transparent) 42%, transparent 68% ); opacity: 0; pointer-events: none; z-index: -1; } .journey-interstitial:has(.surface-journey-bridge.is-visible)::before { animation: _jiGlow 2200ms cubic-bezier(0.22, 1, 0.36, 1) 100ms both; } /* ── Lines start invisible ─────────────────────────────────────── */ .journey-interstitial .surface-bridge-line--top, .journey-interstitial .surface-bridge-line--bottom { opacity: 0; } /* Line 1 — elegant fade-and-lift */ .journey-interstitial:has(.surface-journey-bridge.is-visible) .surface-bridge-line--top { animation: _jiLine1 960ms cubic-bezier(0.16, 1, 0.3, 1) 100ms both; } /* Line 2 — cinematic scale-punch with gradient glow flare on landing */ .journey-interstitial:has(.surface-journey-bridge.is-visible) .surface-bridge-line--bottom { animation: _jiLine2 1080ms cubic-bezier(0.16, 1, 0.3, 1) 340ms both; } @keyframes _jiGlow { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0.6; } } @keyframes _jiLine1 { from { opacity: 0; transform: translateY(30px); filter: blur(10px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } } @keyframes _jiLine2 { 0% { opacity: 0; transform: scale(1.18) translateY(38px); filter: blur(14px); } 55% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blurple) 20%, transparent)); } } .journey-interstitial .surface-journey-bridge { font-size: clamp(42px, 5.5vw, 72px); } /* ── Flow hint: 01 Create → 02 Share → 03 Navigate ───────────── */ .journey-flow-hint { display: flex; align-items: center; opacity: 0; } .journey-interstitial:has(.surface-journey-bridge.is-visible) .journey-flow-hint { animation: _jiLine1 960ms cubic-bezier(0.16, 1, 0.3, 1) 560ms both; } .jfh-step { display: flex; align-items: baseline; gap: 5px; font-size: clamp(11px, 1vw, 13px); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); } .jfh-num { font-style: normal; font-size: clamp(11px, 1vw, 13px); font-weight: 500; letter-spacing: 0.04em; color: var(--purple); opacity: 0.75; } .jfh-arrow { display: block; width: 28px; height: 1px; background: color-mix(in srgb, var(--inv-bg-color) 18%, transparent); margin: 0 8px; position: relative; flex-shrink: 0; } .jfh-arrow::after { content: ''; position: absolute; right: -1px; top: -3px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 5px solid color-mix(in srgb, var(--inv-bg-color) 18%, transparent); border-right: none; } /* Reduced-motion: skip animation, show text immediately. */ @media (prefers-reduced-motion: reduce) { .journey-interstitial .surface-bridge-line--top, .journey-interstitial .surface-bridge-line--bottom { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; } .journey-interstitial .journey-flow-hint { opacity: 1 !important; animation: none !important; } .journey-interstitial::before { opacity: 0.5 !important; animation: none !important; } } .surface-journey { position: relative; /* Section sizes to its content (bridge column + gap + panel) and * centers via auto margins. The panel width is JS-driven to match * the hero, so a fixed max-width here leaves dead space on either * side of the panel inside the timeline column. */ width: fit-content; max-width: 100%; margin: 0 auto; } .surface-journey::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); pointer-events: none; } .surface-journey { /* Bottom padding tuned to fit the Navigate panel's 64/140 box-shadow * (~200px fade tail). Without this, the next section's solid * background paints over the shadow and creates a hard line under * the panel. */ padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px) clamp(160px, 16vw, 240px); /* No overflow on any of these — sticky needs the chain clean. */ } .surface-journey-body { position: relative; display: grid; grid-template-columns: auto auto; gap: clamp(40px, 4vw, 72px); align-items: start; } /* ─── Sticky aside: bridge headline + tracker, pinned. ─────────────── */ .surface-journey-aside { position: sticky; top: 96px; align-self: start; z-index: 5; } .surface-journey-aside-inner { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); max-width: 300px; } /* Bridge — the section's editorial headline, now inside the aside. * Smaller than the giant centered version that lived above the grid. * Max size tuned so each line ("Can't buy now?" / "Journey now.") * stays on a single line within the sticky-aside column. */ .surface-journey-bridge { font-size: clamp(32px, 3.4vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; margin: 0; display: flex; flex-direction: column; gap: clamp(2px, 0.3vw, 6px); } .surface-bridge-line { display: block; white-space: nowrap; } .surface-bridge-line--top { color: color-mix(in srgb, var(--inv-bg-color) 92%, var(--indigo)); font-weight: 500; opacity: 0.72; } .surface-bridge-line--bottom { /* Brand accent gradient (indigo→violet) — matches every other title accent on the site (kicker, ai-practice, faq). Was an off-theme sky-blue blurple→purple. */ background: var(--kicker-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* ─── Tracker — "Now showing: Create / 01 of 03" beneath the bridge. */ .surface-tracker { padding-top: clamp(18px, 2vw, 26px); border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); } /* When tracker is the sole aside element (bridge moved to interstitial) */ .surface-tracker--standalone { padding-top: 0; border-top: none; min-width: 180px; } .surface-tracker-label { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); margin-bottom: 10px; } .surface-tracker-text { display: block; font-size: clamp(42px, 4.8vw, 62px); font-weight: 700; letter-spacing: -0.03em; color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)); line-height: 1.1; white-space: nowrap; min-width: 10ch; transition: opacity 220ms ease, transform 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .surface-tracker-text.is-changing { opacity: 0; transform: translateY(-4px); } @keyframes _trackerSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .surface-tracker-text.is-entering { animation: _trackerSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } .surface-tracker-subtext { display: block; margin: 6px 0 0; font-size: clamp(13px, 1.2vw, 16px); font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); max-width: 26ch; transition: opacity 220ms ease, transform 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .surface-tracker-subtext.is-changing { opacity: 0; transform: translateY(-4px); } .surface-tracker-subtext.is-entering { animation: _trackerSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } .surface-tracker-text-mobile { transition: opacity 220ms ease; } .surface-tracker-text-mobile.is-changing { opacity: 0; } .surface-tracker-text-mobile.is-entering { animation: _trackerSlideIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both; } .surface-tracker-bar { display: flex; gap: 4px; margin-top: 16px; } .surface-tracker-bar > span { flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); transition: background 360ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); } .surface-tracker-bar > span.is-on { background: linear-gradient(135deg, var(--blurple), var(--purple)); } .surface-tracker-count { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11px; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); letter-spacing: 0.08em; margin-top: 10px; } /* Mobile sticky pill — hidden on desktop, shown below the nav on * narrow viewports. */ .surface-tracker-mobile { display: none; } /* ─── Timeline column: three beats stacked vertically. ─────────────── */ .surface-journey-timeline { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 112px); min-width: 0; max-width: 400px; } .surface-stop { position: relative; min-width: 0; transition: opacity 600ms ease, filter 600ms ease; } .surface-stop:not(.is-current) { opacity: 0.38; filter: blur(1.5px); } .surface-stop.is-current { opacity: 1; filter: none; } /* ═══════════════════════════════════════════════════════════════════════════ SURFACE FILMSTRIP — incremental pinned scrub over Create / Share / Navigate. v6_reveals.js adds .is-stheater on wide, tall-enough screens with motion, then slides .surface-track vertically so exactly one beat is framed at a time. Each beat keeps its EXACT original layout (no absolute stacking, no re-centering) — they sit in uniform 100vh slots and can never overlap. Vertical-only clipping via clip-path (NOT overflow) so the JS-widened mockup panels still bleed past the column instead of being cut. Fallback (narrow/short/reduced-motion): normal flow, untouched. Progress + demo playback are driven by the scrub. ═══════════════════════════════════════════════════════════════════════════ */ /* Fallback (no theater — mobile, short, or reduced-motion): the filmstrip wrappers are inert. The beats used to be direct flex children of .surface-journey-timeline and got their vertical rhythm from its `gap`; now they sit inside .surface-track, so carry that same rhythm here. Theater re-blocks the track for the vertical slide. */ .surface-track { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 112px); } @media (min-width: 1024px) { .surface-scrolly.is-stheater { --sbeats: 3; height: calc(var(--sbeats) * 100vh); position: relative; } .surface-scrolly.is-stheater .surface-stage { position: sticky; top: 0; height: 100vh; /* clip top/bottom to the 100vh window; expand left/right so the mockup panels (JS-widened past the 400px column) are never horizontally cut. */ clip-path: inset(0 -100vw 0 -100vw); } .surface-scrolly.is-stheater .surface-track { display: block; /* the translated filmstrip — no inter-beat gap */ will-change: transform; /* JS writes translateY each frame */ } /* Uniform slots: each beat fills one viewport, its content centred. Layout is otherwise the beat's own — same width, same panel bleed, nothing moved. */ .surface-scrolly.is-stheater .surface-stop { height: 100vh; margin: 0; display: flex; flex-direction: column; justify-content: center; transition: none; /* the base opacity/filter transition would lag */ opacity: 1; filter: none; } /* The scroll-reveal won't fire while pinned — show the beat content outright. Safe here (beats are vertically separated, never stacked). The concept-card framing overlay stays live: as each beat slides into frame its explainer card plays, dwells, then dissolves to the demo (driven by v6_beat_framing). */ .surface-scrolly.is-stheater .reveal, .surface-scrolly.is-stheater .reveal-left, .surface-scrolly.is-stheater .reveal-right, .surface-scrolly.is-stheater [data-reveal-container] { opacity: 1 !important; transform: none !important; filter: none !important; } /* Keep the concept card covering the demo at ALL times except when it's deliberately dissolved (.is-revealed). Otherwise, as one beat slides out and the next slides in, the outgoing card resets to hidden a beat before the incoming card plays — a ~100ms window where both demos flash through uncovered (the "lapse"). Covering by default closes that window. */ .surface-scrolly.is-stheater .v6-beat-framing { opacity: 1; } .surface-scrolly.is-stheater .v6-beat-framing.is-revealed { opacity: 0; } /* The card slides into frame as its own entrance, so don't re-run the staggered text rise on settle — it would flicker against the already-visible card. */ .surface-scrolly.is-stheater .v6-beat-framing.is-framing .v6-bf-glyph, .surface-scrolly.is-stheater .v6-beat-framing.is-framing .v6-bf-eyebrow, .surface-scrolly.is-stheater .v6-beat-framing.is-framing .v6-bf-title, .surface-scrolly.is-stheater .v6-beat-framing.is-framing .v6-bf-sub { animation: none; } } /* ─── Beat: one of the three (Create, Share, Navigate). ────────────── */ .surface-beat { position: relative; padding: 0; } /* Cap the beat's inner content wrapper to the same max-width as surface-beat-mockup-panel so nothing (eyebrow, tabs, caption) overflows wider than the demo panel. */ .surface-beat > .max-w-7xl { max-width: min(100%, 400px); } .surface-beat-header { margin-bottom: clamp(24px, 3vw, 36px); } .beat-mockup-caption { margin: 0 0 clamp(20px, 2.4vw, 28px); font-size: clamp(12px, 1.1vw, 14px); font-weight: 400; line-height: 1.5; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); max-width: min(100%, 400px); text-align: left; } /* Beat caption relocated BELOW the motion graphic (all three beats). Reads * as a small, subtle figure caption annotating the live demo above it — not * an editorial lead-in. Width + left offset are pinned by JS to the panel's * real rendered box (panels are JS-sized to the hero, so they don't share * the text column's center) — see syncBeat3PanelSizeToHero. */ .beat-graphic-caption { margin-top: clamp(10px, 1.2vw, 16px); margin-bottom: 0; font-size: clamp(10.5px, 0.9vw, 12px); font-weight: 400; line-height: 1.45; letter-spacing: 0.005em; color: color-mix(in srgb, var(--inv-bg-color) 36%, transparent); text-align: center; /* Even out line lengths so the last line isn't left with an orphaned * word or two. */ text-wrap: balance; } .surface-beat-eyebrow { display: block; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: clamp(10px, 0.95vw, 12px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: color-mix(in srgb, var(--blurple) 65%, var(--inv-bg-color)); margin-bottom: clamp(8px, 1vw, 12px); } .surface-beat-headline { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px; color: color-mix(in srgb, var(--inv-bg-color) 92%, var(--blurple)); max-width: 36ch; } .surface-beat-subtext { font-size: clamp(13px, 1.1vw, 15px); font-weight: 400; line-height: 1.5; margin: 0; color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent); max-width: 32ch; } .surface-beat--navigate .surface-beat-headline { text-rendering: optimizeLegibility; } /* ─── Surface frame: single quiet glass card holding the demo. * No chrome bar. No traffic-light dots. No tab bar above. The demo * lives directly inside, on the same light surface family as the * proof stat cards and the CN quadrant — one design system. */ .surface-frame { position: relative; background: var(--surface-glass-bg, color-mix(in srgb, var(--main-bg-color) 60%, transparent)); border: 1px solid var(--surface-glass-border, color-mix(in srgb, var(--inv-bg-color) 10%, transparent)); border-radius: 18px; box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset, 0 24px 56px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 8px 18px color-mix(in srgb, var(--inv-bg-color) 5%, transparent); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); padding: clamp(20px, 2.4vw, 32px); overflow: hidden; } /* Hidden JS-compat shell for the icons + label + nav buttons the * existing tool-switching code still references via .ai-tool-label, * .ai-header-icon, .ai-flow-nav-btn. The tool picker itself is gone; * the demo defaults to AI Creator. */ .surface-frame .ai-tool-compat, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ─── Legacy demo internals re-skinned for light surface. ──────────── */ .surface-beat--create .editor-flow-view { gap: 1rem; } .surface-beat--create .editor-prompt-bar { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent) !important; border-radius: 12px !important; padding: 14px 16px !important; min-height: 0 !important; display: flex; flex-direction: column; gap: 6px; } .surface-beat--create .surface-prompt-label { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--blurple) 70%, var(--inv-bg-color)); } .surface-beat--create .ai-prompt-display, .surface-beat--create .surface-prompt-display { color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; background: transparent !important; padding: 0 !important; border: none !important; /* Refined to 13px to match Share's headline scale — the legacy 15px * read a notch louder than the rest of the compact mockup interior * and broke the premium typographic rhythm across Create/Share. */ font-size: 13px; line-height: 1.45; letter-spacing: -0.01em; min-height: 20px; } .surface-beat--create .ai-prompt-text { color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; } .surface-beat--create .ai-prompt-caret { background: var(--blurple) !important; color: var(--blurple) !important; } .surface-beat--create .editor-circle-chart--lg { filter: none !important; width: clamp(200px, 22vw, 260px) !important; height: clamp(200px, 22vw, 260px) !important; } .surface-beat--create .editor-circle-ring .ring-track { stroke: color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; } .surface-beat--create .editor-circle-chart .editor-circle-center { color: color-mix(in srgb, var(--inv-bg-color) 85%, var(--blurple)) !important; } .surface-beat--create .ai-process-log { background: color-mix(in srgb, var(--main-bg-color) 70%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent) !important; border-radius: 12px !important; } .surface-beat--create .ai-process-log-header { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent) !important; padding: 12px 16px !important; } .surface-beat--create .ai-process-log-title { color: color-mix(in srgb, var(--inv-bg-color) 78%, var(--blurple)) !important; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; } .surface-beat--create .ai-process-log-status { color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent) !important; font-size: 11px; } .surface-beat--create .ai-log-pulse { background: var(--blurple) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blurple) 18%, transparent) !important; } .surface-beat--create .ai-process-log-body { color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent) !important; } /* ═══ Mobile: collapse grid to single column, swap aside for sticky pill. */ @media (max-width: 979px) { .surface-journey-body { grid-template-columns: 1fr; gap: 24px; } .surface-journey-aside { display: none; } .surface-tracker-mobile { display: flex; align-items: center; gap: 10px; position: sticky; top: 64px; z-index: 20; margin: 12px -16px; padding: 10px 16px; background: color-mix(in srgb, var(--main-bg-color) 88%, transparent); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .surface-tracker-text-mobile { font-size: 13px; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)); white-space: nowrap; } .surface-tracker-bar-mobile { flex: 1; margin: 0; } .surface-tracker-mobile .surface-tracker-count { margin: 0; font-size: 10px; flex-shrink: 0; } .surface-beat--create .editor-flow-body, .surface-beat--create .creator-two-col { flex-direction: column !important; align-items: stretch !important; } .surface-beat--create .editor-circle-column { width: 100% !important; align-items: center !important; } } /* ════════════════════════════════════════════════════════════════════ STICKY FIX — .body-wrap (tidyTemplate.css L3115) has overflow:hidden, which silently kills position:sticky for every descendant. Replace with overflow:clip — same overflow-clipping behavior, but does NOT create a scroll container, so sticky works through it. Scoped to the v6 page via the index_v6.css load order. ════════════════════════════════════════════════════════════════════ */ .body-wrap { overflow: clip !important; overflow-x: clip !important; overflow-y: clip !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 2 (Share) + BEAT 3 (Navigate) — same eyebrow + headline opener as Beat 1. Plus light-theme overrides on the most jarring legacy dark elements so the three beats finally read as one family. The inner demo logic stays intact; only the surrounding chrome gets retinted. ════════════════════════════════════════════════════════════════════ */ /* Share: kill the dark .share-bg layer and drop the dark .share-copy / * .share-description text colors. */ .surface-beat--share .share-bg { display: none !important; } .surface-beat--share { background: transparent !important; } .surface-beat--share .share-description, .surface-beat--share .share-copy { color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent) !important; } /* Navigate: same — drop any dark background or saturated overlay. */ .surface-beat--navigate { background: transparent !important; } /* Both beats: align inner content header to the page rhythm. The * legacy sections each used their own heading; * those nodes are gone, replaced with .surface-beat-header above. */ /* ════════════════════════════════════════════════════════════════════ TEMPLATE GALLERY — uses the existing .template-card visual (same one used in Share Step 1) as static gallery entries. Cards arrange in a responsive grid; each card has the circular stage-ring preview already styled by the legacy CSS. ════════════════════════════════════════════════════════════════════ */ .template-gallery-section { position: relative; padding: clamp(72px, 9vw, 128px) clamp(20px, 4vw, 56px) clamp(80px, 10vw, 140px); background: radial-gradient(ellipse 60% 40% at 50% 20%, color-mix(in srgb, var(--blurple) 3.5%, transparent) 0%, transparent 70%), var(--main-bg-color); } .template-gallery-inner { max-width: 1240px; margin: 0 auto; } .template-gallery-header { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); } /* Reuse the same eyebrow chip + headline pattern as the beats so the * gallery reads as one more sibling moment, not a separate section. */ .template-gallery-header .surface-beat-eyebrow { margin-bottom: 14px; } .template-gallery-header .surface-beat-headline { max-width: none; margin: 0 auto; } /* Grid of cards. Auto-fill at 220px min so we get 4–5 per row on * desktop, 2 on tablet, 1 on phone. */ .template-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 1.4vw, 22px); } /* The static gallery variant of .template-card. Inherits all the * stage-ring SVG sizing from the legacy .template-card rules; this * just adds the surface treatment and hover state. */ .template-card--gallery { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 16px 20px; background: var(--surface-glass-bg, color-mix(in srgb, var(--main-bg-color) 60%, transparent)); border: 1px solid var(--surface-glass-border, color-mix(in srgb, var(--inv-bg-color) 10%, transparent)); border-radius: 16px; box-shadow: var(--surface-glass-shadow, 0 6px 22px color-mix(in srgb, var(--inv-bg-color) 6%, transparent)); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); cursor: pointer; transition: transform 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)), border-color 280ms ease, box-shadow 320ms var(--surface-ease, cubic-bezier(0.22, 1, 0.36, 1)); /* Reset any legacy state classes that may apply (.is-active / * .template-folder etc.) — gallery cards are inert. */ opacity: 1 !important; } .template-card--gallery:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blurple) 28%, transparent); box-shadow: var(--surface-glass-shadow-hover, 0 14px 32px color-mix(in srgb, var(--inv-bg-color) 10%, transparent)); } .template-card--gallery .template-icon { width: clamp(96px, 12vw, 128px); height: clamp(96px, 12vw, 128px); position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .template-card--gallery .template-icon .template-circle-bg, .template-card--gallery .template-icon .template-circle-stages { position: absolute; inset: 0; width: 100%; height: 100%; } .template-card--gallery .template-icon .template-folder-icon { width: 50%; height: 50%; position: static; } .template-card--gallery .template-info { width: 100%; } .template-card--gallery .template-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)); margin-bottom: 4px; } .template-card--gallery .template-stages { font-size: 12px; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: 0.04em; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); } /* Hide any "Selected" badge if it leaks from the source markup. */ .template-card--gallery .template-selected-badge { display: none; } /* ════════════════════════════════════════════════════════════════════ SHARED TABS — used by both Beat 1 (Create: Creator/Editor/Coach) and Beat 3 (Navigate: 3 example journeys). Segmented-control style with subtle elevated active state. Buttons inside also carry the legacy .ai-tool-card / .navigate-journey-card class so existing click handlers still fire and switch the demo views. ════════════════════════════════════════════════════════════════════ */ .surface-frame-tabs { display: flex !important; flex-direction: row !important; gap: 4px !important; padding: 5px; margin-bottom: clamp(18px, 2vw, 24px); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 12px; overflow-x: auto; scrollbar-width: none; } .surface-frame-tabs::-webkit-scrollbar { display: none; } .surface-frame-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; flex: 1; min-width: max-content; background: transparent; border: none; border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); cursor: pointer; white-space: nowrap; transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease; /* Reset legacy .navigate-journey-card / .ai-tool-card hover/border * leftovers that might bleed in from older CSS. */ text-align: center; aria-checked: false; } .surface-frame-tab:hover { color: color-mix(in srgb, var(--inv-bg-color) 80%, var(--blurple)); background: color-mix(in srgb, var(--main-bg-color) 50%, transparent); } .surface-frame-tab.is-active { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 90%, var(--blurple)); box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .surface-frame-tab-icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); transition: color 220ms ease; /* Drop any legacy circular bg from .stage-icon variants — we just * want the SVG showing inline next to the label. */ background: transparent !important; border-radius: 0 !important; padding: 0 !important; } .surface-frame-tab-icon svg { display: block; width: 100%; height: 100%; } .surface-frame-tab.is-active .surface-frame-tab-icon { color: var(--blurple); } /* When .surface-frame-tabs lives DIRECTLY inside .surface-frame (Beat 1 * case), it sits flush against the body with no extra spacing. */ .surface-frame > .surface-frame-tabs { margin: 0 0 clamp(18px, 2vw, 24px); } /* Navigate variant: tabs sit ABOVE the visualization (no surface-frame * wrapper around them on Beat 3). Add the same max-width container as * the visualization so they align. */ .surface-frame-tabs--navigate { max-width: 640px; margin-left: auto; margin-right: auto; } /* Navigate stage wrap — replaces the legacy 2-col grid. Centered, * generous breathing room around the ring. */ .navigate-stage-wrap { position: relative; display: flex; justify-content: center; align-items: center; margin-top: clamp(20px, 2.4vw, 32px); } /* ════════════════════════════════════════════════════════════════════ TAB CONSISTENCY — Beat 1 and Beat 3 both wrap their tabs+content in a .surface-frame. Remove the standalone Beat 3 variant override that capped tab width to 640px (no longer needed). The tabs fill the frame width on both beats now. ════════════════════════════════════════════════════════════════════ */ .surface-frame-tabs--navigate { /* Reset the old standalone constraints — now lives inside .surface-frame. */ max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* ════════════════════════════════════════════════════════════════════ .v6-beat-selector — slim chip row sitting directly above the v6-mockup-panel traffic-light container. Replaces the .surface-frame tab bar so the panel can stand on its own without an outer frame wrapper. Used by Beat 1 (Create) and Beat 3 (Navigate); Beat 2 (Share) uses its own .demo-progress-bar in the same slot. ════════════════════════════════════════════════════════════════════ */ .v6-beat-selector { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin: 0 0 clamp(12px, 1.4vw, 20px); padding: 4px; background: color-mix(in srgb, var(--main-bg-color) 50%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); border-radius: 999px; width: max-content; max-width: 100%; } .v6-beat-selector .surface-frame-tab { padding: 6px 14px !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1.2; gap: 6px; } .v6-beat-selector .surface-frame-tab-icon, .v6-beat-selector .surface-frame-tab-icon svg { width: 13px !important; height: 13px !important; } .v6-beat-selector .surface-frame-tab-label { font-weight: 600; letter-spacing: 0.01em; } @media (max-width: 720px) { .v6-beat-selector { gap: 4px; padding: 3px; } .v6-beat-selector .surface-frame-tab { padding: 5px 10px !important; font-size: 11px !important; } } /* surface-frame-body inside Beat 3 (Navigate) doesn't need vertical * padding — the ring + progress card have their own breathing room. */ .surface-beat--navigate .surface-frame-body { padding: 0; min-height: 0; } /* ════════════════════════════════════════════════════════════════════ NAVIGATE RING POLISH — bring the ring closer to the hero's motion language. Lighter overall feel, cleaner glow, more visible active stage. Hide the legacy chevron nav arrows that fight the tab UI. ════════════════════════════════════════════════════════════════════ */ /* Drop the legacy ring-nav-chevron arrows — tabs replace them. */ .surface-beat--navigate .navigator-ring .ring-nav-chevron { display: none !important; } /* Stage the ring inside the frame body with generous padding around it * so the glow + motes have room to bleed before the frame edge. */ .surface-beat--navigate .navigate-stage-wrap { padding: clamp(32px, 4vw, 56px) clamp(16px, 2vw, 32px); background: radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--blurple) 4%, transparent) 0%, transparent 75%), transparent; } /* Soften the ring's outer drop-shadow so it doesn't feel heavy on * the light surface. */ .surface-beat--navigate .navigator-ring { filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--inv-bg-color) 8%, transparent)) drop-shadow(0 0 80px color-mix(in srgb, var(--blurple) 9%, transparent)); } /* Beat 3 visualization tightens — the journey-viz containers stack * cleanly inside the frame body. */ .surface-beat--navigate .navigate-journey-viz { display: none; transition: opacity 320ms ease; } .surface-beat--navigate .navigate-journey-viz.is-active { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 2.4vw, 32px); width: 100%; } /* Smooth journey transition — when user switches tabs, the new ring * fades in rather than popping. */ .surface-beat--navigate #navigate-visualization { transition: opacity 280ms ease; } /* ════════════════════════════════════════════════════════════════════ NAVIGATE TAB CONSISTENCY — kill the legacy .navigate-journey-card + .stage-icon--* styling that bleeds into the new tab UI. The legacy card was a 14px-padded glass card with 3rem circular gradient stage badges, inactive opacity 0.55, translateX hover, and a :has() rule that blurs sibling cards on hover. None of that belongs on a segmented-control tab. Match Beat 1's tab look exactly. ════════════════════════════════════════════════════════════════════ */ /* Reset legacy .navigate-journey-card styling on tabs. */ .surface-frame-tab.navigate-journey-card { padding: 9px 14px !important; border: none !important; border-radius: 9px !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; } .surface-frame-tab.navigate-journey-card:hover { transform: none !important; background: color-mix(in srgb, var(--main-bg-color) 50%, transparent) !important; border-color: transparent !important; box-shadow: none !important; } .surface-frame-tab.navigate-journey-card.is-active { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: none !important; box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; } .surface-frame-tab.navigate-journey-card:not(.is-active) { opacity: 1 !important; filter: none !important; } /* Defuse the :has() sibling-blur rule that scopes off * .navigate-journey-selector. When the selector ALSO has the new * .surface-frame-tabs class, the selector-blur is wrong. */ .surface-frame-tabs.navigate-journey-selector:has(.surface-frame-tab:hover) .surface-frame-tab:not(:hover):not(.is-active) { opacity: 1 !important; filter: none !important; } /* Reset legacy .stage-icon--* gradient badge styling on tab icons. */ .surface-frame-tab-icon.stage-icon, .surface-frame-tab-icon.stage-icon--discovery, .surface-frame-tab-icon.stage-icon--experience, .surface-frame-tab-icon.stage-icon--scope, .surface-frame-tab-icon.stage-icon--commit, .surface-frame-tab-icon.stage-icon--deploy { width: 16px !important; height: 16px !important; border: none !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; color: inherit !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 JOURNEY FLOW PANELS — three v6-mockup-panels (one per journey) sit inside .navigate-mockup-host. Only the one with .is-active-flow shows; the others collapse out. JS toggles the class on tab click. ════════════════════════════════════════════════════════════════════ */ .navigate-mockup-host { position: relative; } .navigate-mockup-host > .v6-mockup-panel { display: none; } .navigate-mockup-host > .v6-mockup-panel.is-active-flow { display: block; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — give v6-mockup-panel explicit dimensions. In the hero, the panel inherits height from class-section-287 (min-height:100vh). In Beat 3 it sits inside .surface-frame-body (content-sized) so the panel collapses to ~30px and all the absolute- positioned content (ring, stage-panels) has nowhere to render. Pin a desktop size that matches the hero proportions; stack vertically on mobile. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate .navigate-mockup-host { position: relative; width: 100%; } /* ─── Navigate gradient — relocated from inside the panel to the host. * * The original .v6-mockup-glow sits inside .v6-mockup-panel with * `inset: -8%` — designed to extend 8% past the panel edge. But the * navigate panel has `overflow: hidden !important` (scrollbar * suppression — line 24288), which clips that overflow and makes the * gradient stop hard at the panel border. * * Fix: kill the clipped internal glow and paint the SAME gradient on * the host (which has overflow:visible). Same numbers as the source * rule at line 16670 — no intensity change, just a different host. */ .surface-beat--navigate .v6-mockup-panel > .v6-mockup-glow { display: none !important; } .surface-beat--navigate .navigate-mockup-host::before { content: ''; position: absolute; /* Big inset so the bloom actually extends well past the panel. * Gradient centers are deliberately placed OUTSIDE the host bounds * (negative / >100% positions) so the brightest part of each * radial sits beyond the panel corner and the bloom naturally * spills inward toward the panel — instead of being contained * inside it like a backdrop. That's what gives Create/Share their * "flourishing" feel by accident of geometry; here we do it on * purpose. */ inset: -35% -28%; background: radial-gradient(50% 50% at 110% -10%, color-mix(in srgb, var(--purple) 26%, transparent), transparent 70%), radial-gradient(50% 50% at -10% 110%, color-mix(in srgb, var(--blurple) 24%, transparent), transparent 70%); filter: blur(70px); z-index: -1; pointer-events: none; opacity: 1; } .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { /* Dimensions are set by JS (syncBeat3PanelSizeToHero in * v6_navigate_flow.js) which copies the live hero panel's * width + height onto each Beat 3 panel and re-syncs on resize. * That guarantees EXACT same size as the hero. CSS only handles * centering and a baseline fallback before JS runs. */ margin: 0 auto; min-height: 400px; /* fallback before JS sync runs */ } @media (max-width: 720px) { /* Mobile rule already exists upstream sizing the panel from viewport * units; just override our desktop aspect-ratio so it can take over. */ .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { max-width: none; aspect-ratio: auto; min-height: 0; } } /* ════════════════════════════════════════════════════════════════════ .surface-beat-mockup-panel — shared traffic-light container styling for Beat 1 (Create) and Beat 2 (Share). Mirrors the .v6-mockup-panel chrome used by the hero and Beat 3 (Navigate) so all three beats read as the same "real product window" surface. Sizing is JS-driven via syncAllBeatPanelsToHero so widths track the hero exactly. ════════════════════════════════════════════════════════════════════ */ .surface-beat-mockup-panel { position: relative; padding: clamp(18px, 2.6vw, 32px); padding-top: calc(clamp(18px, 2.6vw, 32px) + 24px); border-radius: clamp(20px, 2.2vw, 28px); background: color-mix(in srgb, var(--main-bg-color) 60%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent); backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent) inset, 0 6px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent), 0 32px 72px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), 0 64px 140px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); margin: 0 auto; isolation: isolate; overflow: hidden; /* JS-set width/height to match the hero panel; CSS fallback below. */ max-width: min(100%, 400px); } .surface-beat-mockup-panel > .v6-mockup-glow { position: absolute; inset: -8%; background: radial-gradient(38% 42% at 70% 18%, color-mix(in srgb, var(--purple) 14%, transparent), transparent 65%), radial-gradient(38% 42% at 30% 82%, color-mix(in srgb, var(--blurple) 12%, transparent), transparent 65%); filter: blur(36px); z-index: -1; pointer-events: none; opacity: 0.8; } .surface-beat-mockup-panel > .v6-window-chrome { position: absolute; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-top-left-radius: inherit; border-top-right-radius: inherit; background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); z-index: 25; pointer-events: none; } .surface-beat-mockup-panel .v6-traffic-light { width: 12px; height: 12px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); } .surface-beat-mockup-panel .v6-traffic-red { background: #FF5F57; } .surface-beat-mockup-panel .v6-traffic-yellow { background: #FEBC2E; } .surface-beat-mockup-panel .v6-traffic-green { background: #28C840; } /* Inner surface-frame-body inherits the new panel — it no longer needs * its own background/border/padding (the panel provides them). */ .surface-beat--create .surface-beat-mockup-panel > .surface-frame-body { background: transparent; border: 0; box-shadow: none; padding: 0; } /* Share's existing demo layout had its own padding; remove now that the * mockup-panel wrapper provides the chrome + padding. */ .surface-beat--share .share-ui-demo.surface-beat-mockup-panel { /* width handled by .surface-beat-mockup-panel base + JS sync */ } @media (max-width: 720px) { .surface-beat-mockup-panel { max-width: 100%; padding: clamp(14px, 4vw, 22px); padding-top: calc(clamp(14px, 4vw, 22px) + 26px); } } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — hide v5 legacy fragments that came along with the hero panel clone. The hero panel includes a .stage-progress-card (carousel with Buying Team / Selling Team / Collaboration Space / Integrations / Security / Privacy / Logs) that's gated to specific phases in the hero but renders by default in Beat 3 because we don't drive those phases. Hide these specifically; the v6-agent-panel + v6-stage-success stay visible because they ARE part of the hero's stage UX cycle. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate .stage-progress-card, .surface-beat--navigate .stage-footer, .surface-beat--navigate .stage-participants, .surface-beat--navigate .stage-collaboration { display: none !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — minimal panel/body baseline. JS sync to hero panel handles the panel's outer dimensions (width/height inline). The hero's own stage-body / section-collab / section-agents flex rules handle the internal proportions — DO NOT override them, since giving collab a higher flex or min-height pushes agents off the viewport. The hero's defaults already balance them correctly when the panel is the right outer size. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate .v6-mockup-panel { min-height: 400px; /* fallback before JS sync runs */ } /* Hide filler stages that don't belong to the active journey (Sustainability has 4 stages, Pest Control 5; the leftover slots that keep EDA's template structure for div-balance get this marker and are hidden from view + skipped by the cycle JS). */ .surface-beat--navigate .v6-stage-panel.is-hidden-flow-stage, .surface-beat--navigate .stage-node.is-hidden-flow-stage { display: none !important; } /* ════════════════════════════════════════════════════════════════════ BEAT 3 — radial node distribution for 4- and 5-stage rings. The base CSS hardcodes node angles at 60° intervals (for 6 stages). For shorter journeys those positions only fill the top arc, leaving visual gaps. Override with proper sin/cos-based positions per data-stage-count. ════════════════════════════════════════════════════════════════════ */ /* ─── 4 stages: 90° intervals (top, right, bottom, left) ───────────── */ .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="0"] { transform: translate(-50%, -50%) translate(0, calc(-1 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="1"] { transform: translate(-50%, -50%) translate(var(--node-radius), 0) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="2"] { transform: translate(-50%, -50%) translate(0, var(--node-radius)) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="4"] .stage-node[data-stage-index="3"] { transform: translate(-50%, -50%) translate(calc(-1 * var(--node-radius)), 0) !important; } /* ─── 5 stages: 72° intervals ───────────────────────────────────────── */ /* angle 0: (0, -1) top */ /* angle 72: (0.951, -0.309) upper right */ /* angle 144: (0.588, 0.809) lower right */ /* angle 216: (-0.588, 0.809) lower left */ /* angle 288: (-0.951, -0.309) upper left */ .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="0"] { transform: translate(-50%, -50%) translate(0, calc(-1 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="1"] { transform: translate(-50%, -50%) translate(calc(0.951 * var(--node-radius)), calc(-0.309 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="2"] { transform: translate(-50%, -50%) translate(calc(0.588 * var(--node-radius)), calc(0.809 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="3"] { transform: translate(-50%, -50%) translate(calc(-0.588 * var(--node-radius)), calc(0.809 * var(--node-radius))) !important; } .surface-beat--navigate .v6-mockup-panel .navigator-ring[data-stage-count="5"] .stage-node[data-stage-index="4"] { transform: translate(-50%, -50%) translate(calc(-0.951 * var(--node-radius)), calc(-0.309 * var(--node-radius))) !important; } /* ════════════════════════════════════════════════════════════════════ BEATS 1–3 UNIFICATION PASS — Create / Share / Navigate all read as the same "iPhone window" container family. This block is the final polish after the surface-frame wrappers were removed in favor of v6-mockup-panel chrome. ════════════════════════════════════════════════════════════════════ */ /* ─── (1) Selector parity ────────────────────────────────────────── * Navigate's .navigate-journey-selector is legacy column-flex; its * .navigate-journey-card chips have their own padding / borders / * opacity-on-inactive / translateX-hover styling. Inside .v6-beat-selector * those must all be defused so Navigate's chips render identical to * Create's. */ .v6-beat-selector.navigate-journey-selector { flex-direction: row !important; gap: 6px !important; } .v6-beat-selector .surface-frame-tab, .v6-beat-selector .navigate-journey-card { flex-direction: row !important; padding: 6px 14px !important; border-radius: 999px !important; border: none !important; background: transparent !important; box-shadow: none !important; opacity: 1 !important; transform: none !important; transition: background 200ms ease, color 200ms ease !important; font-size: 12px !important; line-height: 1.2 !important; gap: 6px !important; cursor: pointer; } .v6-beat-selector .surface-frame-tab:hover, .v6-beat-selector .navigate-journey-card:hover { transform: none !important; background: color-mix(in srgb, var(--main-bg-color) 50%, transparent) !important; border-color: transparent !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; } .v6-beat-selector .surface-frame-tab.is-active, .v6-beat-selector .navigate-journey-card.is-active { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: none !important; box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent) inset, 0 2px 8px color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; } .v6-beat-selector .surface-frame-tab:not(.is-active), .v6-beat-selector .navigate-journey-card:not(.is-active) { opacity: 1 !important; filter: none !important; } .v6-beat-selector.navigate-journey-selector:has(.navigate-journey-card:hover) .navigate-journey-card:not(:hover):not(.is-active) { opacity: 1 !important; filter: none !important; } /* TEMP — hide the journey selector tabs in Navigate (EDA / Sustainability / Pest Control). * Logic and panels are untouched; remove this rule to restore the selector. */ .surface-beat--navigate .navigate-journey-selector { display: none; } .v6-beat-selector .surface-frame-tab-icon, .v6-beat-selector .surface-frame-tab-icon svg { width: 13px !important; height: 13px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; } .v6-beat-selector .surface-frame-tab.is-active .surface-frame-tab-icon, .v6-beat-selector .navigate-journey-card.is-active .surface-frame-tab-icon { color: var(--blurple) !important; } /* ─── (2) Navigate scrollbar fix ─────────────────────────────────── * The legacy .surface-frame wrapped Beat 3 and provided overflow:hidden, * which clipped any minor content bleed from the v6-mockup-panel. With * the wrapper gone, the panel itself must clip — JS sizes it to the * hero's exact rect and the slightest sub-pixel mismatch produces a * scrollbar on a descendant. */ .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { overflow: hidden; } /* ─── (3) Share double-background fix ────────────────────────────── * .share-copy is a legacy white "card" with fixed 601px height + * background + border + shadow. Now that .share-ui-demo is a * v6-mockup-panel in its own right, .share-copy must become a pure * layout wrapper (no chrome). */ .surface-beat--share .share-copy { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-radius: 0 !important; height: auto !important; overflow: visible !important; max-width: none !important; padding: 0 !important; } .surface-beat--share .share-bg { display: none !important; } /* ─── (4) Share inner content fits the new container ─────────────── * The legacy .share-ui-demo was hard-capped at 900px. Now it's a * mockup panel sized to the hero via JS; the inner content must follow * the panel width, not the old 900px cap. Demo content keeps its * natural height. */ .surface-beat--share .share-ui-demo.surface-beat-mockup-panel { max-width: none !important; margin: 0 auto; } .surface-beat--share .share-ui-demo.surface-beat-mockup-panel .demo-content { width: 100%; /* min-height bumped down for the narrower box; let inner content * grow naturally rather than reserving 480px of empty space. */ min-height: 360px; } /* Step 1 template grid was a wide 3-col layout; at narrower widths * (matching Navigate's hero panel) drop to 2-col so cards don't crush. */ .surface-beat--share .surface-beat-mockup-panel .template-options { grid-template-columns: repeat(2, 1fr); gap: 10px; } /* Step 3 buying/selling team columns can collapse to stacked rows * inside the narrower box. */ .surface-beat--share .surface-beat-mockup-panel .share-teams-section { flex-direction: column !important; gap: 12px !important; } /* ─── (5) Create inner content fits the new container ────────────── * .editor-flow-body.creator-two-col is a side-by-side circle + log * layout that needs ~700px+ to breathe. Inside the new mockup panel * (~hero width) it cramps. Stack vertically below a breakpoint and * cap the circle column height so the log gets a real share of * vertical space. */ .surface-beat--create .surface-beat-mockup-panel .editor-flow-body.creator-two-col { flex-direction: column; gap: 14px; } .surface-beat--create .surface-beat-mockup-panel .editor-circle-column { width: 100%; max-width: 320px; margin: 0 auto; flex-shrink: 0; } .surface-beat--create .surface-beat-mockup-panel .editor-circle-chart--lg { max-width: 240px; max-height: 240px; margin: 0 auto; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log { width: 100%; min-height: 0; max-height: 260px; } /* The diff-expanded state (Editor mode) widens the right column — keep * the vertical stack regardless of state. */ .surface-beat--create .surface-beat-mockup-panel .editor-flow-body.diff-expanded { flex-direction: column; } /* ─── (6) Panel sizing — give Create + Share a slightly wider cap * than Navigate. Navigate's panel is portrait-tall (matches hero); * Create + Share content is landscape-natural. JS sync sets width * to hero rect; we ALSO need them to not overflow the page padding * and have a sensible mobile fallback. */ .surface-beat--create .surface-beat-mockup-panel, .surface-beat--share .surface-beat-mockup-panel { width: 100%; max-width: min(100%, 400px); } /* ─── (7) Beat selector spacing — pull the chip row up tight against * the panel so it reads as one unit, not a row + a card. */ .v6-beat-selector { margin-bottom: clamp(10px, 1.1vw, 16px); } /* ─── Mobile (≤720px) ────────────────────────────────────────────── * On phones: stop forcing hero width (JS already bails); flatten the * panels, drop the tilt, hide the chrome bar's persona toggle if * needed. */ @media (max-width: 720px) { .surface-beat--create .surface-beat-mockup-panel, .surface-beat--share .surface-beat-mockup-panel { width: 100% !important; max-width: 100% !important; } .v6-beat-selector { width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: none; } .v6-beat-selector::-webkit-scrollbar { display: none; } .v6-beat-selector .surface-frame-tab, .v6-beat-selector .navigate-journey-card { flex-shrink: 0; } } /* ════════════════════════════════════════════════════════════════════ FOLLOW-UP POLISH PASS — title-width parity, Share inner fit, and a hard kill on every scrollbar inside the Beat 3 mockup panel. ════════════════════════════════════════════════════════════════════ */ /* ─── (A) Beat content COLUMN width matches the panel width. * The legacy .max-w-7xl wrapper (~1280px) is far too wide when the * demo panel below it is hero-width (~640px). Narrow the entire * column — header + chip selector + panel — to the panel's width. * Text alignment is left as-is (default left); only the column * itself shrinks. */ .surface-beat--create > .max-w-7xl, .surface-beat--navigate > .max-w-7xl, .surface-beat--share .share-journeys-section > .max-w-7xl { max-width: min(100%, 760px) !important; margin-left: 0; margin-right: 0; } /* ─── (B) NAVIGATE — nuke every scrollbar inside the Beat 3 panel. * Several inner panels (chat stream, agent viz, log) have * overflow-y: auto. With hero-matched height there's no guarantee * scrollbar-width:none beats every UA quirk. Force-hide all of them * at every nesting level. The scroll BEHAVIOR is preserved * (overflow:auto still scrolls); only the scrollbar UI is gone. */ .surface-beat--navigate .v6-mockup-panel, .surface-beat--navigate .v6-mockup-panel * { scrollbar-width: none !important; -ms-overflow-style: none !important; } .surface-beat--navigate .v6-mockup-panel::-webkit-scrollbar, .surface-beat--navigate .v6-mockup-panel *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } /* Belt-and-braces: also hide any scrollbar that might paint on the * panel itself (in case a future change adds overflow there). */ .surface-beat--navigate .navigate-mockup-host > .v6-mockup-panel { overflow: hidden !important; } .surface-beat--navigate .navigate-mockup-host { overflow: visible; } /* ─── (C) SHARE — proper polish so it actually fits the panel. * The legacy share-ui-demo was sized for a ~900px box. Every step's * internal layout needs to be tuned for the new ~hero-width box. */ /* Outer container: progress bar margin tightened, sit clean against * the panel's window-chrome bar. */ .surface-beat--share .surface-beat-mockup-panel .demo-progress-bar { margin: 0 0 14px 0; font-size: 11px; border-radius: 8px; } .surface-beat--share .surface-beat-mockup-panel .progress-step { padding: 6px 8px; font-size: 10px; gap: 4px; min-width: 0; } .surface-beat--share .surface-beat-mockup-panel .progress-step .step-number { font-size: 10px; } /* Override the legacy .step-label (13px from share-ui-demo.css) so the * "1. Select Template" / "4. Personalize Journey" labels actually fit * inside the narrower v6 panel instead of being clipped by the * white-space:nowrap + overflow:hidden parent. */ .surface-beat--share .surface-beat-mockup-panel .step-label { font-size: 10px; gap: 4px; min-width: 0; } .surface-beat--share .surface-beat-mockup-panel .step-check { width: 11px; height: 11px; margin-right: 2px; } .surface-beat--share .surface-beat-mockup-panel .progress-step.current { font-size: 10px; scale: 1; /* The legacy share-ui-demo.css gives .current a rounded blue border * + 1.05 scale. Nothing else in the v6 progress bar (or the panels * around it) uses a rounded border, so it reads as a foreign chip * stuck on the bar. Strip the border + radius; .current still reads * as active via the color + weight change. */ border: 0 !important; border-radius: 0 !important; } .surface-beat--share .surface-beat-mockup-panel .step-percent { font-size: 9px; padding: 2px 5px; margin-left: 6px; } /* Step title — was 20px, too loud for a small box. */ .surface-beat--share .surface-beat-mockup-panel .demo-step-title { font-size: 15px; margin-bottom: 14px; } /* Step 1: template grid — 2 columns, tighter gap, smaller cards. */ .surface-beat--share .surface-beat-mockup-panel .template-options { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: auto !important; gap: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .template-card { padding: 12px !important; gap: 8px !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(0,0,0,.08) !important; } .surface-beat--share .surface-beat-mockup-panel .template-card.hovered { box-shadow: 0 8px 22px rgba(0,0,0,.14) !important; } .surface-beat--share .surface-beat-mockup-panel .template-icon { width: 42px !important; height: 42px !important; } .surface-beat--share .surface-beat-mockup-panel .template-folder-icon { width: 36px !important; height: 36px !important; } .surface-beat--share .surface-beat-mockup-panel .template-name { font-size: 12px !important; } .surface-beat--share .surface-beat-mockup-panel .template-stages { font-size: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .template-utility-bar { margin-bottom: 10px; } .surface-beat--share .surface-beat-mockup-panel .template-utility-btn { font-size: 10px; padding: 3px 7px; } /* Step 2: Name Journey — autofill fields fit the narrower box. */ .surface-beat--share .surface-beat-mockup-panel .autofill-field { font-size: 12px !important; padding: 8px 10px !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option { padding: 6px 12px !important; font-size: 12px !important; gap: 6px !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option svg { width: 14px !important; height: 14px !important; } /* Step 3: Teams — keep horizontal (two columns) but compact. * Earlier rule had stacked them column; that takes too much vertical * space. Reverting to two-side layout with tighter internals. */ .surface-beat--share .surface-beat-mockup-panel .share-teams-section { flex-direction: row !important; gap: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .team-section { padding: 10px !important; border-radius: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .team-header { font-size: 10px !important; margin-bottom: 10px !important; padding-bottom: 8px !important; gap: 6px !important; } .surface-beat--share .surface-beat-mockup-panel .team-label { font-size: 11px !important; } .surface-beat--share .surface-beat-mockup-panel .team-members { gap: 6px !important; } .surface-beat--share .surface-beat-mockup-panel .team-member { padding: 6px 8px !important; gap: 7px !important; border-radius: 8px !important; } .surface-beat--share .surface-beat-mockup-panel .team-member .member-name, .surface-beat--share .surface-beat-mockup-panel .team-member .member-role { font-size: 11px !important; line-height: 1.25 !important; } .surface-beat--share .surface-beat-mockup-panel .team-member .member-role { font-size: 10px !important; opacity: 0.7; } .surface-beat--share .surface-beat-mockup-panel .team-member .member-avatar, .surface-beat--share .surface-beat-mockup-panel .team-member .member-icon { width: 26px !important; height: 26px !important; font-size: 10px !important; flex-shrink: 0; } .surface-beat--share .surface-beat-mockup-panel .team-member .invite-pill, .surface-beat--share .surface-beat-mockup-panel .team-member .member-status { font-size: 9px !important; padding: 2px 6px !important; } /* Step 4: AI personalization — keep the circle + log balanced inside * the narrower box. */ .surface-beat--share .surface-beat-mockup-panel .ai-personalize-circle, .surface-beat--share .surface-beat-mockup-panel .ai-personalize-canvas { max-width: 220px; margin: 0 auto; } .surface-beat--share .surface-beat-mockup-panel .ai-personalize-log { font-size: 10px !important; max-height: 140px !important; } /* demo-content height: let it grow with content rather than forcing * a min that leaves dead air. */ .surface-beat--share .surface-beat-mockup-panel .demo-content { min-height: 280px; } /* ─── (D) CREATE — same compactness pass for the creator demo so it * reads as deliberate, not cramped. */ .surface-beat--create .surface-beat-mockup-panel .editor-prompt-bar { padding: 10px 12px !important; font-size: 12px !important; } .surface-beat--create .surface-beat-mockup-panel .surface-prompt-label { font-size: 9px !important; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-header { padding: 0.45rem 0.7rem; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-title { font-size: 10px; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-body { padding: 0.4rem 0; font-size: 11px; max-height: 200px; overflow: hidden; } .surface-beat--create .surface-beat-mockup-panel .ai-stage-scroll { min-height: 0; max-height: 160px; overflow: hidden; scrollbar-width: none; } .surface-beat--create .surface-beat-mockup-panel .ai-stage-scroll::-webkit-scrollbar { display: none; } /* AI Coach view — the legacy .coach-chat-input is styled for a dark * panel (white-on-white border/background). On the v6 light surface * it disappears entirely. Re-skin to match the editor-prompt-bar so * the input row reads as a proper text field. */ .surface-beat--create .surface-beat-mockup-panel .coach-chat-input, .surface-beat--create .surface-beat-mockup-panel .surface-chat-input { background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 14%, transparent) !important; border-radius: 12px !important; padding: 12px 14px !important; box-shadow: 0 1px 0 color-mix(in srgb, var(--inv-bg-color) 4%, transparent) inset, 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .surface-beat--create .surface-beat-mockup-panel .coach-input-row, .surface-beat--create .surface-beat-mockup-panel .surface-chat-input-row { color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; opacity: 1 !important; /* 12px aligns the Coach input with the 12px body scale (autofill / * template-name) used across the Share mockup. */ font-size: 12px !important; letter-spacing: -0.01em; } .surface-beat--create .surface-beat-mockup-panel .coach-send-btn, .surface-beat--create .surface-beat-mockup-panel .surface-chat-send { background: linear-gradient(135deg, var(--blurple), var(--purple)) !important; border: 0 !important; color: #fff !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 30%, transparent); } /* ─── (E) Mobile (≤720px) — collapse Share team columns back to stacked * because the panel itself is narrow on phones. */ @media (max-width: 720px) { .surface-beat--share .surface-beat-mockup-panel .share-teams-section { flex-direction: column !important; } .surface-beat--create .surface-beat-header, .surface-beat--share .surface-beat-header, .surface-beat--navigate .surface-beat-header { max-width: 100%; } } /* ════════════════════════════════════════════════════════════════════ NAVIGATE — SCROLLBAR NUKE (final). Earlier rules scoped to .v6-mockup-panel weren't enough — the scroll- bar is showing on a descendant whose webkit pseudo wasn't being hit. Cast the net across the ENTIRE section + every descendant + every nesting level. Also force overflow:hidden on every realistic scroll container so no element can produce a visible track. ════════════════════════════════════════════════════════════════════ */ .surface-beat--navigate, .surface-beat--navigate * { scrollbar-width: none !important; -ms-overflow-style: none !important; } .surface-beat--navigate::-webkit-scrollbar, .surface-beat--navigate *::-webkit-scrollbar, .surface-beat--navigate::-webkit-scrollbar-track, .surface-beat--navigate *::-webkit-scrollbar-track, .surface-beat--navigate::-webkit-scrollbar-thumb, .surface-beat--navigate *::-webkit-scrollbar-thumb, .surface-beat--navigate::-webkit-scrollbar-corner, .surface-beat--navigate *::-webkit-scrollbar-corner { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; -webkit-appearance: none !important; appearance: none !important; } /* Force-clip every realistic scroll source inside the panel. The * scroll BEHAVIOR for these (chat stream auto-scroll, log auto-scroll) * still works because overflow:hidden + JS-controlled scrollTop is fine * for our animated cycle — the user never manually scrolls inside the * demo. */ .surface-beat--navigate .v6-mockup-panel, /* .navigate-mockup-host deliberately NOT clipped here — the panel itself * already clips internal scrollbars, and the host needs overflow:visible * so the relocated .v6-mockup-glow on .navigate-mockup-host::before can * actually bloom past the panel boundary (the whole point of moving it * out of the panel's overflow:hidden). */ .surface-beat--navigate .v6-stage-panels, .surface-beat--navigate .v6-stage-panel, .surface-beat--navigate .v6-stage-body, .surface-beat--navigate .v6-section-collab, .surface-beat--navigate .v6-section-agents, .surface-beat--navigate .v6-ap-chat-stream, .surface-beat--navigate .ai-agent-viz, .surface-beat--navigate .coach-chat-messages, .surface-beat--navigate .creator-panel-scroll, .surface-beat--navigate .ai-process-log-body { overflow: hidden !important; } /* ════════════════════════════════════════════════════════════════════ v6 LIGHT-SURFACE POLISH — Create + Share The Create + Share demos were authored against a dark panel surface (rgba(255,255,255,N%) backgrounds and borders, white text). On the v6 light glass panel those default styles render invisible or muddy. This block re-skins every affected element with light hairlines, readable ink, and restrained brand accents so the interior reads at the same fidelity as Navigate. Scoping rule: every rule below is scoped to `.surface-beat--create .surface-beat-mockup-panel` or `.surface-beat--share .surface-beat-mockup-panel`. Nothing here should bleed past the surface-journey section. ════════════════════════════════════════════════════════════════════ */ /* ─── (1) Editor circle chart — re-skinned nodes + center for light. */ .surface-beat--create .surface-beat-mockup-panel .editor-circle-chart { /* Drop the heavy purple drop-shadows from the legacy --lg variant; * the panel's own ambient glow is doing that job. Keep one soft * tint to anchor the ring. */ filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--inv-bg-color) 6%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-ring .ring-track { stroke: color-mix(in srgb, var(--inv-bg-color) 14%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect { fill: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); transition: fill 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms cubic-bezier(0.22, 1, 0.36, 1); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-idle { fill: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-target { fill: color-mix(in srgb, var(--blurple) 65%, var(--inv-bg-color)); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--blurple) 32%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-working { fill: var(--blurple); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blurple) 36%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-nodes rect.is-complete { fill: color-mix(in srgb, var(--blurple) 78%, var(--purple)); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--purple) 24%, transparent)); } .surface-beat--create .surface-beat-mockup-panel .editor-circle-center { color: color-mix(in srgb, var(--inv-bg-color) 80%, var(--blurple)) !important; opacity: 1 !important; text-shadow: none !important; font-size: 12px !important; letter-spacing: -0.01em; } /* Creator center CTA — kill the dark-glass legacy; use the brand * gradient pill that matches the rest of v6's primary actions. */ .surface-beat--create .surface-beat-mockup-panel .creator-center-cta { color: #fff !important; background: linear-gradient(135deg, var(--blurple), var(--purple)) !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--blurple) 28%, transparent), 0 1px 0 color-mix(in srgb, #fff 35%, transparent) inset !important; padding: 9px 18px; font-size: 12px; letter-spacing: 0.02em; border-radius: 8px; } .surface-beat--create .surface-beat-mockup-panel .creator-center-cta:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 88%, #fff), color-mix(in srgb, var(--purple) 88%, #fff)) !important; transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--blurple) 32%, transparent), 0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset !important; } /* ─── (2) AI Process log — readable on light surface. */ .surface-beat--create .surface-beat-mockup-panel .ai-process-log { background: color-mix(in srgb, var(--main-bg-color) 86%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-header { border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-title { color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-process-log-status { color: color-mix(in srgb, var(--blurple) 78%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-pulse { background: var(--blurple) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-ts { color: color-mix(in srgb, var(--inv-bg-color) 32%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-msg { color: color-mix(in srgb, var(--inv-bg-color) 82%, var(--blurple)) !important; } .surface-beat--create .surface-beat-mockup-panel .ai-log-entry--system .ai-log-msg { color: color-mix(in srgb, var(--blurple) 70%, var(--inv-bg-color)) !important; font-weight: 600; } .surface-beat--create .surface-beat-mockup-panel .ai-log-entry--success .ai-log-msg, .surface-beat--create .surface-beat-mockup-panel .ai-log-entry--success .ai-log-msg::before { color: color-mix(in srgb, var(--blurple) 72%, var(--purple)) !important; } /* ─── (3) AI Editor — diff panel + diff lines + accept/reject. */ .surface-beat--create .surface-beat-mockup-panel .editor-diff-panel { background: color-mix(in srgb, var(--main-bg-color) 86%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px; padding: 0.85rem 0.95rem; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-header { color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; } .surface-beat--create .surface-beat-mockup-panel .editor-ai-status-cycle { color: color-mix(in srgb, var(--blurple) 70%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-line.diff-remove { background: color-mix(in srgb, #dc2626 8%, transparent) !important; color: color-mix(in srgb, #b91c1c 88%, var(--inv-bg-color)) !important; text-decoration-color: color-mix(in srgb, #b91c1c 60%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-line.diff-add { background: color-mix(in srgb, #16a34a 10%, transparent) !important; color: color-mix(in srgb, #166534 90%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-line.diff-context { color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent) !important; opacity: 1; } .surface-beat--create .surface-beat-mockup-panel .editor-accept-btn { background: color-mix(in srgb, #16a34a 12%, transparent) !important; border: 1px solid color-mix(in srgb, #16a34a 28%, transparent) !important; color: color-mix(in srgb, #166534 92%, var(--inv-bg-color)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-accept-btn:hover { background: color-mix(in srgb, #16a34a 18%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-reject-btn { background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-reject-btn:hover { background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-coach-btn { background: color-mix(in srgb, var(--main-bg-color) 90%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; } .surface-beat--create .surface-beat-mockup-panel .editor-coach-btn:hover { background: color-mix(in srgb, var(--blurple) 8%, transparent) !important; border-color: color-mix(in srgb, var(--blurple) 28%, transparent) !important; color: color-mix(in srgb, var(--inv-bg-color) 85%, var(--blurple)) !important; } /* ─── (4) AI Editor — pin the layout vertically so the panel never * overflows. Diff panel gets its own scroll-clip, capped height. */ .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-flow-body { flex-direction: column; gap: 12px; min-height: 0; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-circle-column { width: 100%; max-width: 200px; margin: 0 auto; flex-shrink: 0; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-circle-chart { width: 160px !important; height: 160px !important; margin: 0 auto; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-diff-panel { width: 100%; max-height: 240px; overflow: hidden; display: flex; flex-direction: column; } .surface-beat--create .surface-beat-mockup-panel [data-tool-view="editor"] .editor-diff-lines { flex: 1; min-height: 0; overflow-y: hidden; } /* ─── (5) Coach chat — bubbles need light treatment too. */ .surface-beat--create .surface-beat-mockup-panel .coach-chat-messages { padding: 6px 4px 12px; gap: 8px; } /* ─── (6) SHARE — Step 2 (Name Journey) polish. Tighten autofill + * choice fields so they read as crafted inputs rather than oversized * buttons. */ .surface-beat--share .surface-beat-mockup-panel .autofill-field { height: 38px !important; border-radius: 8px !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; background: color-mix(in srgb, var(--main-bg-color) 92%, transparent); padding: 0 12px !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-field.filled { border-color: color-mix(in srgb, var(--blurple) 22%, transparent) !important; background: color-mix(in srgb, var(--blurple) 4%, var(--main-bg-color)) !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-label { font-size: 9px !important; letter-spacing: 0.08em; opacity: 0.5 !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-field.filled .autofill-label { opacity: 0 !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-value { font-size: 12px !important; } .surface-beat--share .surface-beat-mockup-panel .autofill-logo-placeholder { width: 22px !important; height: 22px !important; font-size: 9px !important; border-radius: 5px !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option { padding: 8px 14px !important; border-radius: 8px !important; font-size: 12px !important; border-width: 1px !important; border-color: color-mix(in srgb, var(--inv-bg-color) 12%, transparent) !important; background: color-mix(in srgb, var(--main-bg-color) 92%, transparent) !important; } .surface-beat--share .surface-beat-mockup-panel .choice-option:hover { border-color: color-mix(in srgb, var(--blurple) 28%, transparent) !important; background: color-mix(in srgb, var(--blurple) 4%, var(--main-bg-color)) !important; transform: none; box-shadow: none; } .surface-beat--share .surface-beat-mockup-panel .choice-option.selected { border-color: var(--blurple) !important; background: color-mix(in srgb, var(--blurple) 8%, var(--main-bg-color)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blurple) 12%, transparent), 0 1px 0 color-mix(in srgb, #fff 50%, transparent) inset; } /* ─── (7) SHARE — Step 4 (Personalize) rebuild. Re-skin the legacy * personalize-circle to match the editor-circle light treatment; * re-skin the log to read as a proper sibling card. */ /* Base layout: personalize-circle-ring and -nodes must overlay each other * inside the chart container, same as editor-circle-ring/-nodes. */ .personalize-circle-chart { position: relative; } .personalize-circle-ring, .personalize-circle-nodes { position: absolute; inset: 0; width: 100%; height: 100%; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-chart { width: 180px !important; height: 180px !important; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--blurple) 12%, transparent)) drop-shadow(0 2px 4px color-mix(in srgb, var(--inv-bg-color) 4%, transparent)) !important; margin: 0 auto; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-ring .ring-track { stroke: color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-nodes rect { fill: rgba(99, 102, 241, 0.04) !important; stroke: rgba(99, 102, 241, 0.34); stroke-width: 0.5; filter: none; transition: fill 360ms cubic-bezier(0.22, 1, 0.36, 1), stroke 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms cubic-bezier(0.22, 1, 0.36, 1) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-nodes rect.is-working { fill: var(--blurple) !important; stroke: color-mix(in srgb, var(--blurple) 70%, transparent) !important; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blurple) 50%, transparent)) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-circle-nodes rect.is-complete { fill: color-mix(in srgb, var(--blurple) 88%, var(--purple)) !important; stroke: color-mix(in srgb, var(--blurple) 50%, transparent) !important; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blurple) 40%, transparent)) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log { height: 200px !important; max-width: none !important; background: color-mix(in srgb, var(--main-bg-color) 86%, transparent) !important; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent) !important; border-radius: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log-header { padding: 8px 12px !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log-title { font-size: 10px !important; letter-spacing: 0.08em; color: color-mix(in srgb, var(--inv-bg-color) 72%, var(--blurple)) !important; } .surface-beat--share .surface-beat-mockup-panel .personalize-log-status { font-size: 9px !important; letter-spacing: 0.08em; } .surface-beat--share .surface-beat-mockup-panel .p-log-entry { padding: 3px 12px !important; } .surface-beat--share .surface-beat-mockup-panel .p-log-msg { font-size: 11px !important; line-height: 1.5; } /* ─── (8) SHARE — demo step title typography. */ .surface-beat--share .surface-beat-mockup-panel .demo-step-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: -0.01em; margin-bottom: 12px !important; color: color-mix(in srgb, var(--inv-bg-color) 88%, var(--blurple)) !important; } /* ─── (9) SHARE — clear the legacy progress.fill animation kicker. * The "current" step in the v6 progress bar now uses color + * weight only; kill the leftover background-tint stripe. */ .surface-beat--share .surface-beat-mockup-panel .progress-step.current::before { opacity: 0 !important; } /* ════════════════════════════════════════════════════════════════ LIVE TEMPLATE GALLERY — Experience Your Journey section ════════════════════════════════════════════════════════════════ */ .template-gallery-section { position: relative; padding: 7rem 0; } .template-gallery-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); pointer-events: none; } .tg-inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); } /* Header */ .tg-header { margin-bottom: 2.5rem; } .tg-headline { font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--inv-bg-color); letter-spacing: -0.025em; line-height: 1.08; margin: 0.35rem 0 0.6rem; } .tg-subline { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 1rem; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); margin: 0; max-width: 750px; line-height: 1.55; } /* Filter bar — hierarchical dropdowns + search */ .tg-pivot-bar { margin-bottom: 1.75rem; } .tg-pivot-bar__filters { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } /* Dropdown wrapper — provides the custom chevron */ /* ── Custom dropdown filters ──────────────────────────────────── */ .tg-drop { position: relative; width: 160px; flex-shrink: 0; } .tg-drop__trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; width: 100%; padding: 0.42rem 0.6rem 0.42rem 0.75rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent); font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.82rem; font-weight: 500; cursor: pointer; text-align: left; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; } .tg-drop__trigger:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); color: var(--inv-bg-color); } .tg-drop.is-open .tg-drop__trigger { border-color: color-mix(in srgb, var(--blurple) 50%, transparent); background: color-mix(in srgb, var(--blurple) 5%, transparent); color: var(--inv-bg-color); } .tg-drop.is-disabled .tg-drop__trigger { opacity: 0.35; cursor: not-allowed; pointer-events: none; } .tg-drop__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-drop__chevron { flex-shrink: 0; width: 12px; height: 12px; opacity: 0.45; transition: transform 200ms ease, opacity 200ms ease; } .tg-drop__trigger:hover .tg-drop__chevron, .tg-drop.is-open .tg-drop__chevron { opacity: 0.85; } .tg-drop.is-open .tg-drop__chevron { transform: rotate(180deg); } .tg-drop__panel { position: absolute; top: calc(100% + 5px); left: 0; min-width: 100%; max-width: 280px; max-height: 260px; overflow-y: auto; overflow-x: hidden; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); background: var(--main-bg-color); box-shadow: 0 8px 30px color-mix(in srgb, #000 22%, transparent); z-index: 200; padding: 4px; opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; } .tg-drop.is-open .tg-drop__panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .tg-drop__option { display: block; width: 100%; padding: 0.38rem 0.65rem; border-radius: 6px; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.82rem; font-weight: 400; color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent); text-align: left; cursor: pointer; background: transparent; border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 100ms ease, color 100ms ease; } .tg-drop__option:hover, .tg-drop__option:focus-visible { background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); color: var(--inv-bg-color); outline: none; } .tg-drop__option.is-active { color: var(--blurple); font-weight: 600; } .tg-search-wrap { position: relative; width: 240px; margin-left: auto; } .tg-search-icon { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); pointer-events: none; } .tg-search { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.82rem; width: 100%; padding: 0.45rem 0.75rem 0.45rem 2.1rem; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); color: var(--inv-bg-color); outline: none; transition: border-color 160ms ease, background 160ms ease; } .tg-search:focus { border-color: color-mix(in srgb, var(--blurple) 45%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .tg-search::placeholder { color: color-mix(in srgb, var(--inv-bg-color) 30%, transparent); } .tg-count { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.76rem; color: color-mix(in srgb, var(--inv-bg-color) 36%, transparent); white-space: nowrap; } /* Cards grid */ .tg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.75rem; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.5rem; scrollbar-width: thin; } .tg-sentinel { grid-column: 1 / -1; height: 1px; } /* Scroll lock toggle bar — inset at bottom of grid via negative margin */ .tg-scroll-bar { display: flex; justify-content: center; margin-top: -22px; position: relative; z-index: 2; } .tg-scroll-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent); background: var(--main-bg-color); color: color-mix(in srgb, var(--inv-bg-color) 70%, transparent); font-size: 0.8rem; font-weight: 600; font-family: inherit; cursor: pointer; box-shadow: 0 2px 16px color-mix(in srgb, var(--inv-bg-color) 8%, transparent); transition: border-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } .tg-scroll-toggle svg { width: 14px; height: 14px; flex-shrink: 0; } .tg-scroll-toggle:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 28%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 90%, transparent); box-shadow: 0 4px 20px color-mix(in srgb, var(--inv-bg-color) 12%, transparent); } .tg-scroll-toggle.is-active { border-color: color-mix(in srgb, var(--blurple) 50%, transparent); color: var(--blurple); box-shadow: 0 2px 16px color-mix(in srgb, var(--blurple) 15%, transparent); } /* Card */ .tg-card { position: relative; display: flex; flex-direction: column; gap: 0.65rem; padding: 1rem 1rem 0.9rem 1.25rem; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 1.5%, transparent); cursor: pointer; text-align: left; overflow: hidden; transition: border-color 180ms ease, background 180ms ease, transform 200ms ease, box-shadow 200ms ease; } .tg-card:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3.5%, transparent); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--inv-bg-color) 3%, transparent); } .tgc-accent { position: absolute; top: 0; left: 0; width: 3px; height: 100%; border-radius: 10px 0 0 10px; opacity: 0.55; } .tgc-icon { width: 28px; height: 28px; flex-shrink: 0; } .tgc-icon svg { width: 100%; height: 100%; } .tgc-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .tgc-industry { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tgc-name { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.85rem; font-weight: 600; color: var(--inv-bg-color); line-height: 1.3; } .tgc-sub { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 0.7rem; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Preview panel ─────────────────────────────────────────────── */ /* == CipPopup — matches authenticated gallery dialog exactly ========= */ body.tg-cip-open { overflow: hidden; } .cip-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.52); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 200ms ease; padding: 1rem; } .cip-overlay.is-open { opacity: 1; } .cip-popup { position: relative; padding: 2.5rem 2.25rem 1.75rem; max-width: 420px; width: 90vw; text-align: left; font-family: var(--font-main, 'Satoshi', sans-serif); color: var(--inv-bg-color); background: color-mix(in srgb, var(--main-bg-color, #0d0d10) 88%, transparent); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: 20px; border: 0.5px solid color-mix(in srgb, var(--inv-bg-color) 15%, transparent); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 2px 16px rgba(0, 0, 0, 0.15), inset 0 0.5px 0 color-mix(in srgb, var(--inv-bg-color) 8%, transparent); transform: scale(0.95) translateY(8px); transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease; opacity: 0; } .cip-overlay.is-open .cip-popup { transform: scale(1) translateY(0); opacity: 1; } .cip-close { position: absolute; top: 12px; right: 16px; background: none; border: none; padding: 4px 8px; color: var(--inv-bg-color); opacity: 0.3; cursor: pointer; line-height: 1; transition: opacity 120ms ease, transform 120ms ease; } .cip-close:hover { opacity: 0.7; transform: scale(1.15); } .cip-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 0.75rem; } .cip-title { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.03em; color: var(--inv-bg-color); } .cip-subtitle { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg, var(--purple), var(--blurple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .cip-divider { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--purple), var(--blurple), color-mix(in srgb, var(--blurple) 15%, transparent)); margin-bottom: 1rem; } .cip-lead { font-size: 0.8125rem; font-style: italic; line-height: 1.65; color: var(--inv-bg-color); opacity: 0.65; margin: 0 0 0.5rem; } .cip-capsules { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.25rem; } .cip-capsule { font-size: 0.68rem; font-weight: 500; padding: 0.2rem 0.5rem; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); } .cip-actions { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1rem; margin-bottom: 0.25rem; } .cip-action { display: flex; align-items: center; gap: 0.75rem; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent); text-decoration: none; color: var(--inv-bg-color); cursor: pointer; width: 100%; box-sizing: border-box; font: inherit; text-align: left; appearance: none; transition: background 140ms ease, border-color 140ms ease; } .cip-action:hover { background: color-mix(in srgb, var(--purple) 8%, transparent); border-color: color-mix(in srgb, var(--purple) 20%, transparent); } .cip-action-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--purple) 10%, transparent); color: var(--purple); } .cip-action-icon svg { width: 16px; height: 16px; } .cip-action-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .cip-action-label { font-size: 0.8125rem; font-weight: 700; color: var(--inv-bg-color); } .cip-action-desc { font-size: 0.7rem; color: var(--inv-bg-color); opacity: 0.55; line-height: 1.4; } .cip-action-arrow { flex-shrink: 0; opacity: 0.3; transition: opacity 140ms ease, transform 140ms ease; color: var(--inv-bg-color); } .cip-action:hover .cip-action-arrow { opacity: 0.7; transform: translateX(2px); } .cip-classification { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .cip-class-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 1px; color: color-mix(in srgb, var(--inv-bg-color) 35%, transparent); margin-bottom: 0.35rem; } .cip-class-level { font-size: 0.72rem; color: var(--inv-bg-color); line-height: 1.9; } .cip-tree-branch { opacity: 0.4; margin: 0 0.2em; } .cip-level0 { opacity: 0.4; } .cip-level1 { opacity: 0.65; } .cip-level2 { opacity: 0.8; font-weight: 500; } /* Queued (not-yet-generated) template cards — slightly dimmed */ .tg-card--queued { opacity: 0.6; } .tg-card--queued .tgc-accent { opacity: 0.45; } /* JS filtering: hide non-matching cards */ .tg-card--hidden { display: none !important; } /* Cards are tags — reset default link appearance */ a.tg-card { text-decoration: none; color: inherit; } @media (prefers-reduced-motion: reduce) { .cip-overlay, .cip-popup, .cip-close, .cip-action, .cip-action-arrow { transition: none; } .cip-close:hover { transform: none; } .cip-action:hover .cip-action-arrow { transform: none; } } /* ════════════════════════════════════════════════════════════════════ MOBILE POLISH — Share + Navigate ════════════════════════════════════════════════════════════════════ */ /* (1) Share traffic-light overlap fix. * share-ui-demo.css ≤768px sets `.share-ui-demo { padding: 0 }` which * removes the chrome-clearing padding-top, letting the absolute * window-chrome strip overlap the progress bar. Reassert it here with * enough specificity + !important to win the cascade. */ @media (max-width: 768px) { .surface-beat--share .share-ui-demo.surface-beat-mockup-panel { padding: clamp(14px, 4vw, 22px) !important; padding-top: calc(clamp(14px, 4vw, 22px) + 30px) !important; } } /* (2) Share demo-content height: clear the 280px floor so the stacked * teams section (flex-direction:column at ≤720px) can breathe without * dead air on shorter steps. */ @media (max-width: 720px) { .surface-beat--share .surface-beat-mockup-panel .demo-content { min-height: 500px !important; } } /* (3) Navigate right-push fix. * The hero panel JS sets width: calc(100vw - 36px) on all navigate * panels, but the navigate section's .max-w-7xl has px-6 (24px each * side = 48px total). The panel overflows right by 12px. Drop section * padding to 18px each side to match the hero's effective margin. */ @media (max-width: 720px) { .surface-beat--navigate > .max-w-7xl { padding-left: 0px !important; padding-right: 0px !important; } } /* (4) Navigate journey chips: wrap + center on narrow phones so all three * options are visible without horizontal scroll. */ @media (max-width: 560px) { .surface-beat--navigate .v6-beat-selector { flex-wrap: wrap !important; overflow-x: visible !important; justify-content: center !important; gap: 6px !important; } .surface-beat--navigate .v6-beat-selector .navigate-journey-card { flex: 0 1 auto !important; min-width: min-content !important; padding: 5px 10px !important; gap: 5px !important; } .surface-beat--navigate .v6-beat-selector .navigate-journey-card .surface-frame-tab-label { font-size: 11px !important; } .surface-beat--navigate .v6-beat-selector .navigate-journey-card .surface-frame-tab-icon { width: 14px !important; height: 14px !important; } } /* ───────────────────────────────────────────────────────────────────────── CSP-compliance: static styles moved out of inline `style="..."` attrs on public pages (strict PUBLIC_CSP blocks inline styles). Page-prefixed to avoid collisions. Sources: resources/contact.html, resources/soc2.html, utilities/version_render.html. ───────────────────────────────────────────────────────────────────────── */ .cn-link-reset { text-decoration: none; text-align: center; } /* ============================================================================ SOC 2 report page — branded compliance document panel. Replaces the old `.pricing` shell + forced-bg `.policyContainer` + the CSP-blocked inline PDF iframe. The strict PUBLIC_CSP (object-src 'none') blocks the browser PDF plugin, so the report opens in a new tab (native top-level viewer) instead of embedding — no CSP change. Theme-aware via tokens; brand blurple/purple accents matching the rest of the public site. ============================================================================ */ .soc2-page { position: relative; background: var(--main-bg-color); color: var(--inv-bg-color); padding: 6rem 1.5rem 7rem; overflow: hidden; } .soc2-page::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 0%, color-mix(in srgb, var(--purple) 8%, transparent) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 80% 100%, color-mix(in srgb, var(--blurple) 6%, transparent) 0%, transparent 70%); pointer-events: none; } .soc2-page-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; } /* Hero */ .soc2-hero { text-align: center; margin-bottom: 2.5rem; } .soc2-seal { display: inline-block; width: 56px; height: 56px; margin-bottom: 1.25rem; background-color: var(--purple); -webkit-mask: url("../../svg/soc2_badge.c3c3ecc42d9c.svg") center / contain no-repeat; mask: url("../../svg/soc2_badge.c3c3ecc42d9c.svg") center / contain no-repeat; } .soc2-kicker { font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--purple); margin: 0 0 0.85rem; } .soc2-title { font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--inv-bg-color); margin: 0 0 1rem; } .soc2-lede { font-size: 1rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent); max-width: 34rem; margin: 0 auto; } /* Document card */ .soc2-doc-card { background: radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--purple) 5%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--inv-bg-color) 3%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 20px; padding: 1.75rem; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent), 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 5%, transparent), 0 18px 48px -20px color-mix(in srgb, var(--purple) 22%, transparent); } .soc2-doc-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); } .soc2-doc-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent); } .soc2-doc-icon svg { width: 22px; height: 22px; } .soc2-doc-meta { flex: 1; min-width: 0; text-align: left; } .soc2-doc-name { font-size: 0.98rem; font-weight: 700; color: var(--inv-bg-color); margin: 0 0 0.15rem; } .soc2-doc-sub { font-size: 0.78rem; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); margin: 0; letter-spacing: 0.01em; } .soc2-doc-badge { flex-shrink: 0; align-self: flex-start; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple); background: color-mix(in srgb, var(--purple) 12%, transparent); border: 1px solid color-mix(in srgb, var(--purple) 22%, transparent); padding: 0.25rem 0.55rem; border-radius: 999px; } .soc2-doc-points { list-style: none; margin: 0 0 1.1rem; padding: 0; } .soc2-doc-points li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); margin-bottom: 0.55rem; } .soc2-doc-points li:last-child { margin-bottom: 0; } .soc2-check { flex-shrink: 0; width: 16px; height: 16px; color: var(--green); margin-top: 0.12em; } .soc2-doc-note { font-size: 0.78rem; line-height: 1.5; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); margin: 0 0 1.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 6%, transparent); } .soc2-doc-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .soc2-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.7rem 1.35rem; border-radius: 10px; text-decoration: none !important; transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .soc2-btn svg { width: 16px; height: 16px; flex-shrink: 0; } .soc2-btn--primary { color: #fff !important; background: linear-gradient(135deg, var(--blurple), var(--purple)); border: 1px solid transparent; box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--purple) 55%, transparent); } .soc2-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--purple) 65%, transparent); } .soc2-btn--ghost { color: var(--inv-bg-color) !important; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 14%, transparent); } .soc2-btn--ghost:hover { border-color: color-mix(in srgb, var(--inv-bg-color) 26%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); } .soc2-footnote { margin: 2rem auto 0; max-width: 34rem; text-align: center; font-size: 0.82rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); } .soc2-footnote a { color: var(--blurple); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--blurple) 35%, transparent); } .soc2-footnote a:hover { border-bottom-color: var(--blurple); } @media (max-width: 600px) { .soc2-page { padding: 4rem 1.25rem 5rem; } .soc2-doc-card { padding: 1.5rem 1.25rem; } .soc2-btn { flex: 1 1 auto; justify-content: center; } } .cn-underline { text-decoration: underline; } /* Version page (pricing-v2 layout reuse) */ .version-section { min-height: 100vh; display: flex; align-items: center; } .version-inner { max-width: 480px; } .version-header { margin-bottom: 2.5rem; } .version-title { font-size: 2.25rem; } .version-cards { grid-template-columns: 1fr 1fr; gap: 1rem; } .version-card-centered { text-align: center; } /* ════════════════════════════════════════════════════════════════════ MOTION GRAPHICS — TYPOGRAPHY CONTROL (every font pinned) The Create/Share/Navigate (and hero) animated mockups reuse legacy demo classes (.ai-stage, .coach-chat-bubble, .ai-status-*, …) whose GLOBAL rules carry rem-based sizes, and several JS-injected nodes (.ai-stage-label, .ai-log-entry) have NO font-size at all — so they inherited the 16px default and rendered "giant" (e.g. the AI Creator steps). This block takes full control: (1) a panel BASE size so no descendant can ever inherit 16px again; (2) explicit, whole-pixel, on-scale sizes for every reused / injected text class, scoped to the mockup panels (specificity beats the legacy globals, so no !important is needed). Nothing inside these mockups is left to inheritance chance. ════════════════════════════════════════════════════════════════════ */ /* (1) PANEL BASE — inherited by every un-pinned descendant. Never 16px. */ .hero .v6-mockup-panel, .surface-beat--create .surface-beat-mockup-panel, .surface-beat--share .surface-beat-mockup-panel, .surface-beat--navigate .v6-mockup-panel { font-size: 11px; } /* (2) CREATE — AI Creator / Editor / Coach injected + reused text. */ .surface-beat--create .surface-beat-mockup-panel .ai-stage, .surface-beat--create .surface-beat-mockup-panel .ai-stage-label { font-size: 11px; } .surface-beat--create .surface-beat-mockup-panel .ai-log-entry, .surface-beat--create .surface-beat-mockup-panel .ai-log-msg { font-size: 11px; } .surface-beat--create .surface-beat-mockup-panel .ai-log-ts { font-size: 10px; } .surface-beat--create .surface-beat-mockup-panel .ai-status-message { font-size: 11px; } .surface-beat--create .surface-beat-mockup-panel .ai-status-label { font-size: 10px; } .surface-beat--create .surface-beat-mockup-panel .ai-status-chip { font-size: 9px; } .surface-beat--create .surface-beat-mockup-panel .ai-tool-label { font-size: 11px; } .surface-beat--create .surface-beat-mockup-panel .editor-diff-line { font-size: 11px; } .surface-beat--create .surface-beat-mockup-panel .editor-prompt-text { font-size: 13px; } .surface-beat--create .surface-beat-mockup-panel .coach-chat-bubble { font-size: 12px; } .surface-beat--create .surface-beat-mockup-panel .coach-bubble-thinking { font-size: 12px; } /* (3) SHARE — injected log / end-action / count text. */ .surface-beat--share .surface-beat-mockup-panel .p-log-entry { font-size: 11px; } .surface-beat--share .surface-beat-mockup-panel .demo-end-btn { font-size: 11px; } .surface-beat--share .surface-beat-mockup-panel .template-count { font-size: 10px; } .surface-beat--share .surface-beat-mockup-panel .template-count-num { font-size: 12px; } .surface-beat--share .surface-beat-mockup-panel .template-count-label { font-size: 10px; } .surface-beat--share .surface-beat-mockup-panel .template-selected-badge { font-size: 9px; } /* (4) NAVIGATE / HERO — coach + status reuse (stage system text is already pinned via the .v6-* rules above; this only locks the legacy reuses). */ .hero .v6-mockup-panel .coach-chat-bubble, .surface-beat--navigate .v6-mockup-panel .coach-chat-bubble { font-size: 12px; } .hero .v6-mockup-panel .ai-log-msg, .surface-beat--navigate .v6-mockup-panel .ai-log-msg { font-size: 11px; } /* ════════════════════════════════════════════════════════════════════ SHARE — authoritative per-frame typography control (Steps 1–4). share-ui-demo.css is the legacy 900px base; its `.customer-section *` 14px !important wildcard (now 12px at source) plus bare-tag selectors (`.customer-section span`) would otherwise flatten Step-2 hierarchy and shrink the success/status hero lines. Every rule below is scoped 3-deep (.surface-beat--share .surface-beat-mockup-panel .X) + !important, so it beats every legacy selector regardless of source order. This is the single authority for any Share text not already pinned in the polish pass above. Scale: hero 14 · title 13 · body/name/value 12 · label 11 · meta 10 · micro 9. ════════════════════════════════════════════════════════════════════ */ /* Step 1 — Select Template */ .surface-beat--share .surface-beat-mockup-panel .tooltip-content { font-size: 11px !important; } /* Step 2 — Name Journey (customer-section) */ .surface-beat--share .surface-beat-mockup-panel .input-field-demo { font-size: 13px !important; } .surface-beat--share .surface-beat-mockup-panel .floating-label, .surface-beat--share .surface-beat-mockup-panel .customer-section .floating-label { font-size: 11px !important; } .surface-beat--share .surface-beat-mockup-panel .or-divider span { font-size: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .crm-dropdown-button { font-size: 12px !important; } .surface-beat--share .surface-beat-mockup-panel .crm-filled-value { font-size: 12px !important; } .surface-beat--share .surface-beat-mockup-panel .crm-filled-via, .surface-beat--share .surface-beat-mockup-panel .customer-section .crm-filled-via { font-size: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .company-avatar { font-size: 13px !important; } .surface-beat--share .surface-beat-mockup-panel .company-name { font-size: 12px !important; } .surface-beat--share .surface-beat-mockup-panel .company-meta, .surface-beat--share .surface-beat-mockup-panel .customer-section .company-meta { font-size: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .sf-opp-badge { font-size: 9px !important; } .surface-beat--share .surface-beat-mockup-panel .crm-linked-confirm { font-size: 11px !important; } .surface-beat--share .surface-beat-mockup-panel .ai-working-text { font-size: 11px !important; } .surface-beat--share .surface-beat-mockup-panel .journey-success-title { font-size: 14px !important; } .surface-beat--share .surface-beat-mockup-panel .journey-success-subtitle { font-size: 11px !important; } /* Step 3 — Add Participants (teams) */ .surface-beat--share .surface-beat-mockup-panel .team-external-badge, .surface-beat--share .surface-beat-mockup-panel .team-source-tag, .surface-beat--share .surface-beat-mockup-panel .member-source-label { font-size: 9px !important; } .surface-beat--share .surface-beat-mockup-panel .status-badge { font-size: 9px !important; } .surface-beat--share .surface-beat-mockup-panel .share-permissions-label { font-size: 10px !important; } .surface-beat--share .surface-beat-mockup-panel .share-perm-opt { font-size: 10px !important; } /* Step 4 — AI Personalize */ .surface-beat--share .surface-beat-mockup-panel .ai-status-text { font-size: 14px !important; } .surface-beat--share .surface-beat-mockup-panel .task-text { font-size: 11px !important; } .surface-beat--share .surface-beat-mockup-panel .ai-progress-percent { font-size: 10px !important; }