Spaces:
Running
Running
| /* Text-to-Scene gallery (scripts/t2s_gallery.py): the site's tokens and cards, applied to the evaluator's renders. */ | |
| .gallery-page .page-main{padding-bottom:40px} | |
| .gal-top{padding-top:44px;padding-bottom:6px} | |
| .gal-top .section-title{margin-bottom:14px} | |
| .gal-switch{display:inline-flex;gap:4px;margin-top:18px;padding:4px;border-radius:10px;background:#e9ede8} | |
| .gal-switch a{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text-p)} | |
| .gal-switch a.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px #152a1915} | |
| .gal-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px} | |
| .gal-pills a{padding:6px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12px;font-weight:500;color:var(--text-p)} | |
| .gal-pills a:hover{border-color:var(--green);color:var(--green)} | |
| .gal-body{padding-top:22px} | |
| .gal-note{margin:0 0 12px;font-size:12px;color:var(--text-muted)} | |
| /* by agent */ | |
| .gal-agents{list-style:none;margin:0;padding:0;display:grid;gap:10px} | |
| .gal-agent{display:grid;grid-template-columns:30px minmax(220px,1.25fr) 84px 104px minmax(260px,2.3fr);gap:12px;align-items:center;padding:12px 16px;border:1px solid #d7ded5;border-radius:14px;background:#fff;color:inherit;transition:border-color .15s} | |
| .gal-agent:hover{border-color:var(--green)} | |
| .gal-agent .rk{font-size:14px;color:var(--text-muted);font-variant-numeric:tabular-nums} | |
| .gal-agent .who{display:flex;align-items:center;gap:10px;min-width:0} | |
| .gal-agent .who b{display:block;font-size:15px;color:var(--text-h)} | |
| .gal-agent .who small{display:block;font-size:12px;color:var(--text-muted)} | |
| .gallery-page .logo{display:inline-flex;flex:none;width:22px;height:22px} | |
| .gallery-page .logo svg{width:100%;height:100%} | |
| .gal-agent .num{font:500 14px 'IBM Plex Mono',monospace;color:var(--text-p)} | |
| .gal-agent .num small{display:block;font:600 9.5px Inter,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)} | |
| .gal-agent .num b{font-weight:500;font-size:17px;color:var(--text-h)} | |
| .gal-agent .strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px} | |
| .gal-agent .strip img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:5px;background:#eef0f2} | |
| /* a scene, on either page */ | |
| .gal-case{margin:0 0 14px;padding:16px 18px 18px;border:1px solid #d7ded5;border-radius:16px;background:#fff;scroll-margin-top:16px} | |
| .gal-case-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px} | |
| .gal-case-head h2{margin:0;font-size:19px;letter-spacing:-.3px;color:var(--text-h)} | |
| .gal-score{font:500 17px 'IBM Plex Mono',monospace;color:var(--text-h)} | |
| .gal-comp{font-size:12px;color:var(--text-muted)} | |
| .gal-cost{font:500 13px 'IBM Plex Mono',monospace;color:var(--text-p)} | |
| .gal-up{margin-left:auto;font-size:12px;font-weight:600;color:var(--green)} | |
| .gal-brief{max-width:1000px;margin:6px 0 4px;font-size:12.5px;line-height:1.6;color:var(--text-p);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} | |
| .gal-brief.open{display:block} | |
| .gal-brief-btn{margin:0 0 10px;padding:0;border:0;background:none;font:600 11px Inter,Arial,sans-serif;color:var(--green);cursor:pointer} | |
| .gal-views{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px} | |
| .gal-views img,.gal-first img{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:8px;background:#eef0f2} | |
| a.gimg{position:relative;display:block;border-radius:8px;outline-offset:2px} | |
| .gal-chip{position:absolute;top:7px;right:7px;padding:2px 7px;border-radius:6px;background:#17201de0;color:#8ff0c9;font:500 12.5px/1.5 'IBM Plex Mono',monospace} | |
| a.gimg[hidden]{display:none} | |
| a.gimg:hover img{filter:brightness(1.04)} | |
| /* by scene */ | |
| .gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px 10px;margin-top:10px} | |
| .gal-tile{margin:0} | |
| .gal-tile figcaption{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:12px} | |
| .gal-tile figcaption .dot{flex:none;width:9px;height:9px;border-radius:50%} | |
| .gal-tile figcaption .who{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:600;color:var(--text-h)} | |
| .gal-tile figcaption .who:hover{color:var(--green)} | |
| .gal-tile figcaption small{font:500 11px 'IBM Plex Mono',monospace;color:var(--text-muted)} | |
| /* one agent */ | |
| .gal-crumb{margin-bottom:10px;font-size:12px;color:var(--text-muted)} | |
| .gal-crumb a{color:var(--green);font-weight:600} | |
| .gal-name{display:flex;align-items:center;gap:14px} | |
| .gallery-page .gal-name .logo{width:36px;height:36px} | |
| .gal-stats{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:18px} | |
| .gal-stats small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)} | |
| .gal-stats b{font:500 20px 'IBM Plex Mono',monospace;color:var(--text-h)} | |
| .gal-stats b span{font-size:12px;color:var(--text-muted)} | |
| .gal-basis{margin:12px 0 0;max-width:820px} | |
| .gal-pn{display:flex;justify-content:space-between;gap:12px;margin-top:20px;font-size:13px} | |
| .gal-pn a{font-weight:600;color:var(--green)} | |
| /* the viewer */ | |
| .gbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px 64px;background:rgba(12,16,14,.93)} | |
| .gbox[hidden]{display:none} | |
| .gbox figure{margin:0;max-width:min(1280px,100%)} | |
| .gbox img{display:block;max-width:100%;max-height:calc(100vh - 110px);margin:auto;border-radius:8px;background:#222} | |
| .gbox-cap{margin-top:10px;text-align:center;font-size:13px;color:#e6ebe6} | |
| .gbox button{position:absolute;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font:400 26px/44px Inter,Arial,sans-serif;cursor:pointer} | |
| .gbox button:hover{background:rgba(255,255,255,.24)} | |
| .gbox button:focus-visible{outline:2px solid #fff;outline-offset:2px} | |
| .gbox-x{top:14px;right:14px} | |
| .gbox-prev{left:12px;top:calc(50% - 22px)} | |
| .gbox-next{right:12px;top:calc(50% - 22px)} | |
| @media(max-width:900px){ | |
| .gal-agent{grid-template-columns:24px minmax(0,1fr) auto auto;gap:10px} | |
| .gal-agent .strip{grid-column:1/-1} | |
| .gal-views{grid-template-columns:repeat(2,1fr)} | |
| .gal-up{margin-left:0} | |
| } | |
| @media(max-width:560px){ | |
| .gal-top{padding-top:28px} | |
| .gal-agent{grid-template-columns:16px minmax(0,1fr) auto auto;gap:8px;padding:10px 12px} | |
| .gal-agent .who{gap:8px} | |
| .gal-agent .who b{font-size:13px} | |
| .gal-agent .num{font-size:12px} | |
| .gal-agent .num b{font-size:14px} | |
| .gal-case{padding:12px 12px 14px} | |
| .gal-case-head h2{font-size:17px} | |
| .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))} | |
| .gbox{padding:16px 8px 64px} | |
| .gbox-prev,.gbox-next{top:auto;bottom:10px} | |
| .gbox-prev{left:calc(50% - 54px)}.gbox-next{right:calc(50% - 54px)} | |
| } | |