/* * Jurisio landing — hero composer ("Ask Ella for free"). * * Shared by the desktop React hero and the static mobile hero; placement in * each hero lives with that hero (garden-v2.css / garden-mobile.css). * Runtime: /hero-composer.js. Entrance motion is CSS-only and runs only while * carries .hc-intro (added by an inline head script, never when the * visitor prefers reduced motion) and not yet .hc-intro-done. */ .hc { --hc-ink: #16241f; --hc-mute: #6f746b; --hc-moss: #4a641f; --hc-moss-2: #3b5119; --hc-cream: #f8f0e4; --hc-font: "Geist", ui-sans-serif, system-ui, sans-serif; --hc-field-size: 19px; --hc-card-delay: .3s; --hc-bubble-delay: .7s; position: relative; font-family: var(--hc-font); color: var(--hc-ink); text-align: left; -webkit-font-smoothing: antialiased; } .hc *, .hc *::before, .hc *::after { box-sizing: border-box; } /* 1 — Ella's standalone bubble */ .hc-bubble { display: inline-block; margin: 0 0 12px 4px; padding: 11px 16px; border-radius: 16px 16px 16px 4px; background: #e4eac9; color: var(--hc-ink); font: 500 15px/1.35 var(--hc-font); box-shadow: 0 8px 24px rgba(16, 22, 12, .25); transform-origin: 0 100%; } /* 2 — the card */ .hc-card { margin: 0; padding: 22px 22px 20px 26px; border-radius: 20px; background: #fffdf8; box-shadow: 0 20px 50px rgba(16, 22, 12, .333); transition: box-shadow .18s ease; } .hc-card:has(.hc-input:focus) { box-shadow: 0 20px 50px rgba(16, 22, 12, .333), 0 0 0 2px rgba(74, 100, 31, .55); } .hc-field { position: relative; } .hc .hc-input, .hc-ghost { font: 400 var(--hc-field-size)/1.35 var(--hc-font); letter-spacing: 0; } .hc .hc-input { display: block; width: 100%; min-height: calc(var(--hc-field-size) * 1.35); max-height: calc(var(--hc-field-size) * 1.35 * 5); margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--hc-ink); resize: none; overflow-y: auto; outline: none; caret-color: var(--hc-ink); } .hc .hc-input::placeholder { color: var(--hc-mute); opacity: 1; } .hc-ghost { position: absolute; inset: 0; display: none; color: var(--hc-mute); white-space: nowrap; overflow: hidden; pointer-events: none; user-select: none; } .hc.hc-typing .hc-ghost { display: block; } .hc-caret { display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.18em; background: var(--hc-ink); animation: hc-blink 1s steps(1, end) infinite; } @keyframes hc-blink { 50% { opacity: 0; } } .hc-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; } .hc .hc-plus { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; margin: 0 0 0 -1px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--hc-ink); cursor: pointer; transition: background .16s ease; } .hc .hc-plus:hover { background: rgba(22, 36, 31, .06); } .hc .hc-go { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 13px 22px; border: 0; border-radius: 12px; background: var(--hc-moss); color: var(--hc-cream); font: 600 16px/1.2 var(--hc-font); white-space: nowrap; box-shadow: 0 6px 16px rgba(74, 100, 31, .333); cursor: pointer; transition: background .16s ease; } .hc .hc-go:hover { background: var(--hc-moss-2); } .hc .hc-go svg { transition: transform .16s ease; } .hc .hc-go:hover svg { transform: translateX(2px); } .hc .hc-plus:focus-visible, .hc .hc-go:focus-visible { outline: 2px solid var(--hc-moss); outline-offset: 2px; } /* 3 — privacy pill under the card */ .hc-pill { display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; margin: 14px auto 0; padding: 7px 14px; border-radius: 999px; background: rgba(16, 22, 12, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f8f0e4; font: 400 14px/1.3 var(--hc-font); } .hc-pill svg { flex: 0 0 auto; } .hc-pill-short { display: none; } /* Phones: the same composer, one size down. */ @media not all and (min-width: 540px) { .hc { --hc-field-size: 16px; --hc-card-delay: 1.6s; --hc-bubble-delay: 2s; } .hc-bubble { margin: 0 0 10px 4px; font-size: 14px; } .hc-card { padding: 18px 14px 14px 18px; border-radius: 18px; } .hc-bar { margin-top: 18px; } .hc .hc-plus { width: 38px; height: 38px; margin: 0; border-radius: 10px; } .hc .hc-go { padding: 11px 16px; font-size: 15px; gap: 8px; } .hc-pill { margin-top: 12px; font-size: 12px; } .hc-pill-long { display: none; } .hc-pill-short { display: inline; } } /* Entrance: card rises, bubble pops. Hidden-state only while .hc-intro runs. */ @keyframes hc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes hc-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes hc-pop { 0% { opacity: 0; transform: translateY(6px) scale(.86); } 70% { opacity: 1; transform: translateY(0) scale(1.03); } 100% { opacity: 1; transform: none; } } html.hc-intro:not(.hc-intro-done) .hc-card { animation: hc-rise .6s cubic-bezier(.2, .7, .3, 1) var(--hc-card-delay) both; } html.hc-intro:not(.hc-intro-done) .hc-pill { animation: hc-fade .6s ease var(--hc-card-delay) both; } html.hc-intro:not(.hc-intro-done) .hc-bubble { animation: hc-pop .38s cubic-bezier(.2, .7, .3, 1) var(--hc-bubble-delay) both; } @media (prefers-reduced-motion: reduce) { html.hc-intro .hc-card, html.hc-intro .hc-pill, html.hc-intro .hc-bubble { animation: none; } .hc-caret { animation: none; } .hc .hc-go svg, .hc-card { transition: none; } }