Spaces:
Running on Zero
Running on Zero
| /* The Fin AI demo page (on top of style.css). Gradio's own chrome is hidden; #fa-app is the whole page. */ | |
| .gradio-container,.gradio-container>.main,.gradio-container .contain,.gradio-container>.main>.wrap{max-width:none ;padding:0 ;margin:0 ;background:transparent } | |
| .gradio-container .html-container,.gradio-container .prose{padding:0 ;max-width:none } | |
| .gradio-container footer,.gradio-container .api-docs-wrap{display:none } | |
| .gradio-container .block{border:0 ;box-shadow:none ;background:transparent ;padding:0 } | |
| #fa-app{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.6} | |
| #fa-app h1,#fa-app h2,#fa-app h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;margin:0;color:var(--ink)} | |
| #fa-app p{margin:0} | |
| #fa-app a{text-decoration:none} | |
| #fa-app .demo{display:grid;grid-template-columns:minmax(300px,.85fr) 1.35fr;gap:40px;align-items:start;padding-top:104px;padding-bottom:20px} | |
| #fa-app .intro h1{font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.035em;margin:18px 0 14px} | |
| #fa-app .intro h1 em{font-style:italic;color:var(--accent-deep)} | |
| #fa-app .intro .lead{font-size:1.02rem;color:var(--soft);max-width:46ch} | |
| #fa-app .intro .fb-stats{margin:26px 0 22px;gap:26px} | |
| #fa-app .intro .fb-stats b{font-size:2.1rem} | |
| #fa-app .links-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px} | |
| #fa-app .pill{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:500;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);transition:box-shadow .25s,transform .35s var(--spring)} | |
| #fa-app .pill:hover{box-shadow:inset 0 0 0 1px var(--accent-light);transform:translateY(-2px)} | |
| #fa-app .side-h{font-family:var(--sans) ;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px} | |
| #fa-app #fa-examples{display:grid;gap:8px;margin-bottom:26px} | |
| #fa-app .ex{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;text-align:left;border:0;cursor:pointer;padding:12px 14px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);font:inherit;color:var(--ink);opacity:0;animation:fa-up .6s var(--ease) forwards;animation-delay:var(--d);transition:box-shadow .25s,transform .35s var(--spring)} | |
| #fa-app .ex:hover{box-shadow:0 0 0 1px var(--accent-light),0 12px 26px -16px rgba(24,56,152,.45);transform:translateX(4px)} | |
| #fa-app .ex:active{transform:scale(.98)} | |
| #fa-app .ex img{grid-row:span 2;width:52px;height:52px;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px var(--line)} | |
| #fa-app .ex-label{font-size:.88rem;font-weight:500;grid-column:2} | |
| #fa-app .ex-text{font-size:.78rem;color:var(--muted);grid-column:2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} | |
| #fa-app .ex:not(:has(img)) .ex-label,#fa-app .ex:not(:has(img)) .ex-text{grid-column:1/-1} | |
| #fa-app details.params{border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:4px 16px} | |
| #fa-app details.params summary{cursor:pointer;font-size:.86rem;font-weight:500;padding:10px 0;list-style:none;display:flex;justify-content:space-between} | |
| #fa-app details.params summary::after{content:"+";color:var(--muted);transition:transform .3s var(--spring)} | |
| #fa-app details.params[open] summary::after{transform:rotate(45deg)} | |
| #fa-app #fa-params{display:grid;gap:12px;padding:4px 0 14px} | |
| #fa-app .param span{display:flex;justify-content:space-between;font-size:.8rem;color:var(--soft)} | |
| #fa-app .param b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600} | |
| #fa-app .param input{width:100%;accent-color:var(--accent)} | |
| /* chat panel */ | |
| #fa-app .panel{position:sticky;top:84px;display:flex;flex-direction:column;height:min(78vh,760px);border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(15,21,40,.45);overflow:hidden;animation:fa-up .8s var(--ease) both .1s} | |
| #fa-app .panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)} | |
| #fa-app #fa-status{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--soft)} | |
| #fa-app #fa-status i{width:8px;height:8px;border-radius:50%;background:var(--muted)} | |
| #fa-app #fa-status[data-state=ready] i{background:#16a34a;box-shadow:0 0 0 3px color-mix(in srgb,#16a34a 22%,transparent)} | |
| #fa-app #fa-status[data-state=connecting] i{background:#d99a1e;animation:fa-pulse 1.2s infinite} | |
| #fa-app #fa-status[data-state=error] i{background:#dc2626} | |
| #fa-app .ghost{border:0;background:none;font:500 .8rem var(--sans);color:var(--soft);padding:6px 10px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s} | |
| #fa-app .ghost:hover{background:var(--accent-soft);color:var(--ink)} | |
| #fa-app #fa-log{flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth} | |
| #fa-app .fa-empty{margin:auto;text-align:center;max-width:36ch;animation:fa-up .7s var(--ease) both} | |
| #fa-app .fa-empty img{width:44px;height:44px;margin:0 auto 14px;display:block;object-fit:contain} | |
| #fa-app .fa-empty h3{font-size:1.4rem;margin-bottom:6px} | |
| #fa-app .fa-empty p{font-size:.9rem;color:var(--soft)} | |
| #fa-app .msg{display:flex;gap:10px;max-width:88%;animation:fa-msg .45s var(--spring) both} | |
| #fa-app .msg.user{align-self:flex-end} | |
| #fa-app .msg.user .body{background:var(--ink);color:var(--paper);border-radius:18px 18px 4px 18px;padding:10px 15px;font-size:.94rem;white-space:normal} | |
| #fa-app .msg.assistant{align-self:flex-start;flex-wrap:wrap} | |
| #fa-app .msg .av{width:28px;height:28px;flex:none;border-radius:50%;object-fit:contain;background:#fff;padding:4px;box-shadow:0 0 0 1px var(--line)} | |
| #fa-app .msg.assistant .body{flex:1;min-width:0;background:var(--paper-2);border-radius:4px 18px 18px 18px;padding:11px 16px;font-size:.94rem;line-height:1.65} | |
| #fa-app .msg.assistant .body p{margin:0 0 .6em}.msg.assistant .body p:last-child{margin:0} | |
| #fa-app .msg.assistant .body ul,#fa-app .msg.assistant .body ol{margin:.3em 0 .6em;padding-left:1.3em} | |
| #fa-app .msg.assistant .body code{font-family:var(--mono);font-size:.84em;background:var(--card);padding:1px 5px;border-radius:5px} | |
| #fa-app .msg.assistant .body pre{background:var(--card);padding:10px 12px;border-radius:10px;overflow-x:auto} | |
| #fa-app .msg.error .body{background:color-mix(in srgb,#dc2626 9%,var(--card));color:var(--ink)} | |
| #fa-app .msg .thumb{display:block;max-width:220px;max-height:160px;border-radius:10px;margin-bottom:8px} | |
| #fa-app .msg .meta{flex-basis:100%;margin-left:38px;font-size:.72rem;color:var(--muted)} | |
| #fa-app .msg .meta .copy{border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;padding:0} | |
| #fa-app .msg .meta .copy:hover{color:var(--accent)} | |
| #fa-app .typing{display:inline-flex;gap:4px;padding:4px 0} | |
| #fa-app .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:fa-dot 1.2s infinite} | |
| #fa-app .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s} | |
| #fa-app .caret{display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:text-bottom;background:var(--accent);animation:fa-blink 1s steps(2) infinite} | |
| #fa-app .queue{font-size:.84rem;color:var(--soft)} | |
| #fa-app .muted{color:var(--muted)} | |
| #fa-app .composer{position:relative;margin:0 14px 14px;padding:8px 8px 8px 14px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:flex-end;gap:8px;transition:box-shadow .25s} | |
| #fa-app .composer:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent-light),0 0 0 4px color-mix(in srgb,var(--accent-light) 18%,transparent)} | |
| #fa-app .composer.drag{box-shadow:inset 0 0 0 2px dashed var(--accent)} | |
| #fa-app #fa-input{flex:1;border:0;outline:none;resize:none;background:transparent;font:400 .95rem/1.5 var(--sans);color:var(--ink);padding:8px 0;max-height:200px} | |
| #fa-app .icon-btn{flex:none;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--spring),background .2s,opacity .2s} | |
| #fa-app .icon-btn svg{width:18px;height:18px} | |
| #fa-app #fa-send{background:var(--ink);color:var(--paper)} | |
| #fa-app #fa-send:hover:not(:disabled){transform:scale(1.08);background:var(--accent-deep)} | |
| #fa-app #fa-send:disabled{opacity:.3;cursor:default} | |
| #fa-app #fa-stop{background:#dc2626;color:#fff} | |
| #fa-app .attach{background:transparent;color:var(--soft)} | |
| #fa-app .attach:hover{background:var(--accent-soft);color:var(--ink)} | |
| #fa-app .attach input{display:none} | |
| #fa-app #fa-preview{position:absolute;left:12px;bottom:calc(100% + 8px);display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 12px 24px -14px rgba(15,21,40,.4);animation:fa-up .3s var(--ease)} | |
| #fa-app #fa-preview img{width:64px;height:64px;object-fit:cover;border-radius:8px} | |
| #fa-app #fa-preview button{border:0;background:var(--paper-2);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--soft)} | |
| #fa-app #fa-note{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font-size:.8rem;padding:7px 12px;border-radius:999px;white-space:nowrap;transition:opacity .25s,transform .3s var(--spring)} | |
| #fa-app #fa-note.on{opacity:1;transform:translate(-50%,0)} | |
| #fa-app .hint{text-align:center;font-size:.72rem;color:var(--muted);padding:0 14px 12px} | |
| /* credits */ | |
| #fa-app .credits-sec{padding-top:70px} | |
| #fa-app .credits-sec h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:12px 0 6px} | |
| #fa-app .credits-sec .sub{color:var(--soft);font-size:.92rem;margin-bottom:20px} | |
| #fa-app .credits-sec .sub a{color:var(--accent)} | |
| #fa-app .orgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px} | |
| #fa-app .org{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:108px;padding:12px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line);text-align:center;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) var(--d),transform .7s var(--ease) var(--d),box-shadow .3s} | |
| #fa-app .credits-sec.in .org{opacity:1;transform:none} | |
| #fa-app .org img{max-height:36px;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s,transform .45s var(--spring)} | |
| #fa-app .org img.emblem{max-height:48px}.org img.mark{max-height:32px} | |
| #fa-app .org span{font-size:.7rem;line-height:1.3;color:var(--soft)} | |
| #fa-app a.org:hover{box-shadow:0 0 0 1px var(--accent-light),0 14px 30px -18px rgba(24,56,152,.45)} | |
| #fa-app a.org:hover img{filter:none;opacity:1;transform:scale(1.06)} | |
| #fa-app .disclaimer{margin-top:22px;font-size:.78rem;color:var(--muted);max-width:80ch} | |
| @keyframes fa-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} | |
| @keyframes fa-msg{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} | |
| @keyframes fa-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}} | |
| @keyframes fa-blink{50%{opacity:0}} | |
| @keyframes fa-pulse{50%{opacity:.4}} | |
| @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .org img:not(.mark):not(.emblem){filter:grayscale(1) invert(1) brightness(1.4)}} | |
| @media (max-width:900px){ | |
| #fa-app .demo{grid-template-columns:1fr;gap:26px;padding-top:92px} | |
| #fa-app .panel{position:relative;top:0;height:72vh} | |
| #fa-app .links a:not([href^="http"]){display:none} | |
| } | |
| @media (max-width:640px){#fa-app .orgs{grid-template-columns:1fr 1fr}#fa-app .msg{max-width:96%}} | |
| @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none ;transition-duration:.01ms }#fa-app .ex,#fa-app .org{opacity:1 ;transform:none }} | |
| #fa-app button{font-family:var(--sans)} | |
| #fa-app .wrap{max-width:var(--wrap) ;margin:0 auto ;padding-left:28px ;padding-right:28px } | |
| @media (max-width:640px){#fa-app .wrap{padding-left:16px ;padding-right:16px }} | |
| #fa-app [hidden]{display:none } | |
| #fa-app .brand{color:var(--ink) } | |
| #fa-app .links a{color:var(--soft) } | |
| #fa-app .links a:hover{color:var(--ink) } | |
| #fa-app .footer nav a{color:var(--soft) } | |
| #fa-app .pill,#fa-app .org{color:var(--ink) } | |
| @media (max-width:640px){#fa-app .links a:not(:last-child){display:none}} | |
| #fa-app .sub a{padding:0 ;margin:0 } | |
| #fa-app .reuse{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;opacity:.75;margin-bottom:6px} | |
| #fa-app .reuse img{width:22px;height:22px;object-fit:cover;border-radius:5px} | |
| #fa-app .msg.user .body .reuse{display:flex} | |