/* [graft:EVA-CHAT-CSS] the hand-off form inside the chat */ .msg.eva-handoff { display: flex; flex-direction: column; gap: .45rem; max-width: 92%; padding: .7rem .75rem .75rem; } .eva-handoff .eh-h { font-weight: 600; font-size: .86rem; color: var(--ink); } .eva-handoff label { display: flex; flex-direction: column; gap: .2rem; font-size: .72rem; color: #4B5049; } .eva-handoff input, .eva-handoff textarea { font: inherit; font-size: .85rem; line-height: 1.4; padding: .45rem .55rem; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; color: var(--ink); resize: vertical; } .eva-handoff input:focus, .eva-handoff textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; } .eva-handoff .eh-fine { font-size: .68rem; color: #6D7268; } .eva-handoff .eh-err { font-size: .74rem; color: #A81F1B; } .eva-handoff .eh-err:empty { display: none; } .eva-handoff .eh-acts { display: flex; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; } .eva-handoff button { font: inherit; font-size: .8rem; border-radius: 999px; padding: .4rem .85rem; cursor: pointer; border: 1px solid var(--line-2); background: #fff; color: var(--ink); } .eva-handoff .eh-go { background: var(--accent); border-color: var(--accent); color: #fff; } .eva-handoff button:disabled { opacity: .6; cursor: default; } /* A phone zooms into any field set smaller than 16px; the chat stays put. */ @media (max-width: 600px) { .chat-form input, .eva-handoff input, .eva-handoff textarea { font-size: 16px; } } /* live sign-up: country picker rows (adapter-built) */ .country-opt{display:flex;align-items:center;gap:.7rem} .country-flag{font-size:1.15rem;line-height:1;flex:0 0 auto} .country-opt b{font-size:.95rem;font-weight:500} .country-soon b{color:var(--ink-3)} /* the demo's casing, tightened — less chrome, same screen */ .stage .layer-card .wrap { max-width: 1080px; } .stage .showreal { border-radius: 12px; box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.09); } .stage .showreal figcaption { padding: 0.5rem 0.85rem; font-size: 0.64rem; } /* a soft emerald bloom around the zoomed-out card. Pinned stages drive it from the scroll (--zoom-glow set by the stage script); phones and reduced-motion viewports never pin, so theirs rests at a quiet constant. */ .stage.pinned .showreal { box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.09), 0 0 calc(42px * var(--zoom-glow, 0)) rgba(26,135,84, calc(0.30 * var(--zoom-glow, 0))), 0 0 calc(110px * var(--zoom-glow, 0)) rgba(26,135,84, calc(0.16 * var(--zoom-glow, 0))); } .stage:not(.pinned) .showreal { box-shadow: 0 1px 2px rgba(10,10,10,0.05), 0 18px 44px rgba(10,10,10,0.09), 0 0 34px rgba(26,135,84,0.16), 0 0 90px rgba(26,135,84,0.09); } /* the ten-year line flows in, left to right; on phones the same order reads top to bottom. Reduced motion sees it settled. */ @media (prefers-reduced-motion: no-preference) { .tl .tl-line { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s cubic-bezier(0.25, 0.7, 0.3, 1) 0.12s; } .tl div.tl-stop { opacity: 0; transform: translateX(-26px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1); } .tl div.tl-stop:nth-of-type(1) { transition-delay: 0.05s; } .tl div.tl-stop:nth-of-type(2) { transition-delay: 0.19s; } .tl div.tl-stop:nth-of-type(3) { transition-delay: 0.33s; } .tl div.tl-stop:nth-of-type(4) { transition-delay: 0.47s; } .tl div.tl-stop:nth-of-type(5) { transition-delay: 0.61s; } .tl.flow .tl-line { transform: scaleX(1); } .tl.flow div.tl-stop { opacity: 1; transform: none; } } /* The Ledger: blocks the console can write, and the server-rendered first paint (body[data-ssr] until the router takes over). */ /* (lists and callouts are the design's own since v1.1_81_1) */ .lg-prose a{color:#0B5137;text-decoration:underline;text-underline-offset:2px} .lg-rss{margin-top:1rem} .lg-rss em{display:block;margin-top:.35rem;font-size:.85rem;color:var(--ink-3,#525252)} body[data-ssr] #site{display:none} .ssr-list{list-style:none;padding:0;margin:1.5rem 0 3rem} .ssr-list li{padding:1.1rem 0;border-bottom:1px solid rgba(10,10,10,.08)} .ssr-list a{font-weight:600;color:inherit} .post .post-art{background:linear-gradient(140deg,#EEF6F1,#CDE9DA)} /* Personal web (personal-web.js): the log-in's password-link form, its notices, the labelled phone picture, the code in words; the chat's extra links, photo controls and camera preview. */ .plg .lg-links{flex-wrap:wrap;justify-content:flex-start;column-gap:1.4rem;row-gap:.45rem} .plg-notice{margin:1rem 0 0;font-size:.86rem} .plg .hint a{color:var(--forest);font-weight:600;text-decoration:underline;text-underline-offset:2px} .plg-pwlink{margin-top:1rem;border:1px solid var(--line-2);border-radius:var(--r);background:var(--paper);padding:.9rem 1rem} .plg-pwlink b{display:block;font-size:.92rem;font-weight:600} .plg-pwlink p{margin:.3rem 0 .8rem;font-size:.82rem;color:var(--ink-2);line-height:1.5} .plg-pwlink .field{margin:0} .plg-lrow{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.1rem;margin-top:.75rem} .plg-lnote{margin:.7rem 0 0;font-size:.82rem;line-height:1.5;color:var(--ink-2)} .plg-lnote.lg-bad{color:#A81F1B} .plg-pwlink .plg-lnote{margin:.7rem 0 0} .plg-lrow .lg-link{font-size:.86rem} /* the design's .field .hint outranks .lg-bad, so its error hints never turned red */ .plg .field .hint{display:block} .plg .field .hint.lg-bad{color:#A81F1B} .plg-ill{margin:0;display:flex;flex-direction:column;align-items:center;gap:.6rem} .plg-ill figcaption{text-align:center} .plg-illx{pointer-events:none;user-select:none;-webkit-user-select:none} .plg-illx button{cursor:default} .plg-code{margin-top:1rem;font-size:.9rem;color:var(--ink-2)} .plg-code b{font-family:var(--mono);font-size:1.12rem;letter-spacing:.08em;color:var(--forest);white-space:nowrap} .plg-noqr{width:170px;min-height:120px;display:grid;place-items:center;text-align:center;padding:1rem;border:1px dashed var(--line-2);border-radius:14px;font-size:.78rem;color:var(--ink-2)} .phm-capt{display:inline-block;padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;font-size:.72rem} .pc-more{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin-top:.55rem} .pc-link{border:0;background:none;padding:0;font:inherit;font-size:.8rem;font-weight:600;color:var(--forest);cursor:pointer;text-decoration:underline;text-underline-offset:2px} .pc-pbar{flex-wrap:wrap} .pc-pick{position:relative;overflow:hidden} .pc-pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .pc-pick:focus-within{outline:2px solid var(--accent);outline-offset:2px} .pc-cam{border-radius:14px;overflow:hidden;background:#12201A;margin-bottom:.6rem;display:grid;place-items:center} .pc-cam video{display:block;width:100%;max-height:44vh;object-fit:contain} .pc-shot{display:block;max-width:140px;max-height:140px;border-radius:10px;margin-bottom:.35rem} /* buttons inside a chat bubble: the design's .pc-b a outranked .btn and drew them dark on green, underlined */ .pc-b .pc-go .btn{color:var(--accent-ink);text-decoration:none} .pc-b .pc-go .btn-ghost{color:var(--ink)} /* THE TIME UNDER A CHAT LINE IS A TIME, NOT A PILL (owner, 21 Oct 2026: "remove the casing surrounding the time on the chat as its confusing"). The design uses .pc-t twice: for the personal page's tab pills (padding, a 999px radius and an inset ring) and for the stamp inside a bubble. The pill rule leaked onto the stamp, so every message carried what looked like an empty field under it. */ .pc-b .pc-t{display:block;width:auto;padding:0;margin:.25rem 0 0;border:0;border-radius:0;background:none;box-shadow:none;cursor:default;font-weight:400;letter-spacing:0} @media (max-width: 640px){ .pc-voices{grid-template-columns:1fr 1fr} .pc-voice{padding:.5rem .6rem;gap:.5rem} .plg-code b{font-size:1rem} } /* [graft:ANALYTICS] the analytics question */ .ga-ask{position:fixed;left:1.35rem;bottom:1.35rem;z-index:61;max-width:23rem;padding:1rem 1.1rem; background:var(--paper,#fff);color:var(--ink,#0A0A0A);border:1px solid var(--line-2,#C8DCD1);border-radius:var(--r-sm,10px); box-shadow:0 12px 32px rgba(10,10,10,.12);font:400 .9rem/1.5 var(--body,system-ui,sans-serif)} .ga-ask p{margin:0 0 .8rem} .ga-ask a{color:var(--forest,#0B5137);text-decoration:underline;text-underline-offset:2px} .ga-ask-b{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap} .ga-ask .ga-no{background:none;border:1px solid var(--line-2,#C8DCD1);border-radius:999px;padding:.55rem 1.1rem; font:600 .87rem/1 var(--body,system-ui,sans-serif);color:var(--ink,#0A0A0A);cursor:pointer} .ga-ask button:focus-visible{outline:2px solid var(--forest,#0B5137);outline-offset:2px} @media (max-width:600px){.ga-ask{left:.75rem;right:.75rem;bottom:4.6rem;max-width:none}} /* [graft:LEDGER-CTA] the next step under an article */ .lg-cta{margin:2.4rem 0 0;padding:1.15rem 1.3rem 1.25rem;border:1px solid var(--line-2,#C8DCD1);border-radius:12px;background:var(--surface-2,#F4F8F5)} .lg-cta>span{display:block;font:400 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--emerald);margin-bottom:.55rem} .lg-prose .lg-cta p{margin:0 0 .95rem} .lg-prose .lg-cta .lg-cta-b{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;margin:0} .lg-prose .lg-cta .btn{color:#fff;text-decoration:none} .lg-prose .lg-cta .lg-cta-more{font-weight:600} /* [graft:LEDGER-CTA-FLOAT] the same next step, following the reader: a bar they can drag anywhere */ .lg-cta-float{position:fixed;left:50%;bottom:1.25rem;z-index:60;display:flex;align-items:center;gap:.85rem; width:min(48rem,calc(100vw - 2rem));padding:.65rem .7rem .65rem .55rem;border-radius:18px;color:#fff; background:linear-gradient(115deg,#0B5137 0%,#11704A 58%,#1A8754 100%); box-shadow:0 16px 38px rgba(11,81,55,.38),inset 0 0 0 1px rgba(255,255,255,.10); font:400 .92rem/1.35 var(--body,system-ui,sans-serif);touch-action:none;cursor:grab;user-select:none; opacity:0;transform:translate(-50%,14px);pointer-events:none;transition:opacity .28s ease,transform .28s ease} .lg-cta-float.on{opacity:1;transform:translate(-50%,0);pointer-events:auto} .lg-cta-float.moved,.lg-cta-float.moved.on{transform:none} .lg-cta-float.dragging{cursor:grabbing;transition:none} .lg-cta-float::after{content:"";position:absolute;inset:-2px;border-radius:20px;pointer-events:none; background:linear-gradient(115deg,#C8F169,#8FC7AC 45%,#C8F169) border-box; -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; border:2px solid transparent;opacity:.9} .lg-cta-float.on.hello::after{animation:lgCtaGlow 1.6s ease-out 2} @keyframes lgCtaGlow{0%{box-shadow:0 0 0 0 rgba(200,241,105,.55)}100%{box-shadow:0 0 0 14px rgba(200,241,105,0)}} .lg-cta-float .lcf-grip{flex:none;width:.9rem;height:1.6rem;opacity:.55; background:radial-gradient(circle,#fff 1.2px,transparent 1.6px) 0 0/.45rem .45rem} .lg-cta-float .lcf-t{flex:1;min-width:0} .lg-cta-float .lcf-t span{display:block;font:500 .62rem/1 var(--mono,ui-monospace,monospace);letter-spacing:.16em;text-transform:uppercase;color:#C8F169;margin-bottom:.3rem} .lg-cta-float .lcf-t p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.92)} .lg-cta-float .lcf-t b{color:#fff} .lg-cta-float .lcf-go{flex:none;display:inline-flex;align-items:center;gap:.45rem;padding:.62rem 1.1rem;border-radius:999px; background:#C8F169;color:#0B2A1E;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(200,241,105,.35)} .lg-cta-float .lcf-go:hover{background:#D6F78A} .lg-cta-float .lcf-go svg{width:1.05rem;height:1.05rem;fill:currentColor} .lg-cta-float .lcf-more{flex:none;color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;font-weight:600} .lg-cta-float .lcf-x{flex:none;width:2rem;height:2rem;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:600 1.1rem/1 system-ui;cursor:pointer} .lg-cta-float a:focus-visible,.lg-cta-float button:focus-visible{outline:2px solid #C8F169;outline-offset:2px} .lg-cta-float.min{width:auto;gap:.5rem;padding:.45rem .5rem .45rem .45rem;border-radius:999px} .lg-cta-float.min .lcf-t,.lg-cta-float.min .lcf-more,.lg-cta-float.min .lcf-x{display:none} .lg-cta-float .lcf-open{display:none;border:0;background:none;color:#fff;font:600 .85rem/1 var(--body,system-ui);cursor:pointer;padding:.3rem .35rem} .lg-cta-float.min .lcf-open{display:inline} /* Below ~1,240px the centred bar would cover "Chat with Eva" (bottom right): it sits above it instead. */ @media (max-width:1240px){.lg-cta-float{bottom:5.4rem}} @media (max-width:600px){ .lg-cta-float{bottom:5.4rem;flex-wrap:wrap;gap:.55rem .6rem;padding:.7rem .7rem .7rem .55rem} .lg-cta-float .lcf-t{flex-basis:calc(100% - 3.2rem)} .lg-cta-float .lcf-t p{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .lg-cta-float .lcf-go{flex:1;justify-content:center} .lg-cta-float .lcf-more{display:none} .lg-cta-float .lcf-x{order:-1;position:absolute;top:.45rem;right:.45rem;width:1.7rem;height:1.7rem} .lg-cta-float.min{bottom:5.4rem} } @media (prefers-reduced-motion:reduce){.lg-cta-float,.lg-cta-float.on{transition:none}.lg-cta-float.on.hello::after{animation:none}}