| |
| |
| |
|
|
| body{ |
| background:#f5f7fa; |
| } |
|
|
| |
|
|
| .gradio-container{ |
|
|
| max-width:1100px !important; |
|
|
| margin:auto !important; |
|
|
| padding:35px !important; |
|
|
| background:#f5f7fa !important; |
| } |
|
|
| |
|
|
| footer{ |
| display:none !important; |
| } |
|
|
| |
| |
| |
|
|
| h1{ |
|
|
| font-size:2.8rem !important; |
|
|
| font-weight:700 !important; |
|
|
| color:#202939 !important; |
|
|
| margin-bottom:10px !important; |
| } |
|
|
| h2{ |
|
|
| font-size:1.8rem !important; |
|
|
| font-weight:600 !important; |
|
|
| color:#202939 !important; |
|
|
| margin-top:35px !important; |
|
|
| margin-bottom:15px !important; |
| } |
|
|
| h3{ |
|
|
| color:#202939 !important; |
|
|
| font-weight:600 !important; |
| } |
|
|
| p{ |
|
|
| color:#5b6574 !important; |
|
|
| line-height:1.7 !important; |
|
|
| font-size:16px !important; |
| } |
|
|
| |
| |
| |
|
|
| .block{ |
|
|
| background:white !important; |
|
|
| border-radius:18px !important; |
|
|
| border:1px solid #e8ebef !important; |
|
|
| box-shadow:0 6px 18px rgba(0,0,0,.05) !important; |
|
|
| padding:18px !important; |
| } |
|
|
| |
| |
| |
|
|
| label{ |
|
|
| font-weight:600 !important; |
|
|
| color:#344054 !important; |
|
|
| font-size:15px !important; |
| } |
|
|
| |
| |
| |
|
|
| textarea, |
| input, |
| select{ |
|
|
| border-radius:12px !important; |
|
|
| border:1px solid #d0d5dd !important; |
|
|
| background:white !important; |
|
|
| font-size:15px !important; |
|
|
| transition:.2s; |
| } |
|
|
| textarea{ |
|
|
| min-height:110px !important; |
|
|
| line-height:1.6 !important; |
|
|
| font-size:16px !important; |
| } |
|
|
| textarea:focus, |
| input:focus, |
| select:focus{ |
|
|
| border-color:#ff7a00 !important; |
|
|
| box-shadow:0 0 0 3px rgba(255,122,0,.15) !important; |
| } |
|
|
| |
| |
| |
|
|
| .wrap{ |
|
|
| border-radius:12px !important; |
| } |
|
|
| |
| |
| |
|
|
| button{ |
|
|
| border-radius:12px !important; |
|
|
| transition:.2s !important; |
|
|
| font-weight:600 !important; |
| } |
|
|
| button:hover{ |
|
|
| transform:translateY(-1px); |
| } |
|
|
| button.primary{ |
|
|
| background:#ff7a00 !important; |
|
|
| color:white !important; |
|
|
| border:none !important; |
|
|
| font-size:17px !important; |
|
|
| height:54px !important; |
| } |
|
|
| button.primary:hover{ |
|
|
| background:#ef7000 !important; |
| } |
|
|
| |
| |
| |
|
|
| .score-card{ |
|
|
| background:#fff6eb; |
|
|
| border:2px solid #ffd2a6; |
|
|
| border-radius:18px; |
|
|
| padding:25px; |
|
|
| text-align:center; |
|
|
| margin-bottom:20px; |
| } |
|
|
| .score-title{ |
|
|
| font-size:18px; |
|
|
| color:#555; |
| } |
|
|
| .score{ |
|
|
| font-size:60px; |
|
|
| color:#ff7a00; |
|
|
| font-weight:700; |
|
|
| margin-top:10px; |
| } |
|
|
| .explanation{ |
|
|
| background:#fafafa; |
|
|
| border:1px solid #e6e6e6; |
|
|
| border-radius:14px; |
|
|
| padding:18px; |
| } |
|
|
| |
| |
| |
|
|
| .hero{ |
|
|
| margin-bottom:35px; |
| } |
|
|
| .hero p{ |
|
|
| max-width:850px; |
| } |
|
|
| |
| |
| |
|
|
| .features{ |
|
|
| display:flex; |
|
|
| gap:18px; |
|
|
| margin-top:30px; |
|
|
| margin-bottom:35px; |
| } |
|
|
| .feature{ |
|
|
| flex:1; |
|
|
| background:white; |
|
|
| border-radius:16px; |
|
|
| border:1px solid #ececec; |
|
|
| padding:22px; |
|
|
| transition:.2s; |
| } |
|
|
| .feature:hover{ |
|
|
| transform:translateY(-3px); |
|
|
| box-shadow:0 10px 20px rgba(0,0,0,.06); |
| } |
|
|
| .feature h3{ |
|
|
| margin-bottom:8px; |
|
|
| color:#ff7a00 !important; |
| } |
|
|
| |
| |
| |
|
|
| .benchmark{ |
|
|
| margin-top:45px; |
|
|
| background:white; |
|
|
| border-radius:18px; |
|
|
| padding:30px; |
|
|
| border:1px solid #e8ebef; |
| } |
|
|
| |
| |
| |
|
|
| table{ |
|
|
| width:100%; |
|
|
| border-collapse:collapse; |
|
|
| margin-top:20px; |
| } |
|
|
| th{ |
|
|
| background:#ff7a00; |
|
|
| color:white; |
|
|
| padding:12px; |
|
|
| text-align:left; |
| } |
|
|
| td{ |
|
|
| padding:12px; |
|
|
| border-bottom:1px solid #ececec; |
| } |
|
|
| |
| |
| |
|
|
| ul{ |
|
|
| padding-left:22px; |
| } |
|
|
| li{ |
|
|
| margin-bottom:8px; |
|
|
| color:#475467; |
| } |
|
|
| |
| |
| |
|
|
| .api-badge{ |
|
|
| display:inline-flex; |
|
|
| align-items:center; |
|
|
| gap:8px; |
|
|
| padding:8px 14px; |
|
|
| background:white; |
|
|
| border:1px solid #d6d6d6; |
|
|
| border-radius:999px; |
|
|
| float:right; |
|
|
| font-size:14px; |
| } |
|
|
| .api-badge::before{ |
|
|
| content:""; |
|
|
| width:10px; |
|
|
| height:10px; |
|
|
| border-radius:50%; |
|
|
| background:#19b66a; |
| } |
|
|
| |
| |
| |
|
|
| hr{ |
|
|
| border:none; |
|
|
| border-top:1px solid #ececec; |
|
|
| margin:35px 0; |
| } |
|
|
| |
| |
| |
|
|
| a{ |
|
|
| color:#ff7a00; |
|
|
| text-decoration:none; |
| } |
|
|
| a:hover{ |
|
|
| text-decoration:underline; |
| } |
|
|
| |
| |
| |
|
|
| @media(max-width:900px){ |
|
|
| .gradio-container{ |
|
|
| padding:18px !important; |
| } |
|
|
| h1{ |
|
|
| font-size:2rem !important; |
| } |
|
|
| h2{ |
|
|
| font-size:1.5rem !important; |
| } |
|
|
| .features{ |
|
|
| flex-direction:column; |
| } |
|
|
| .score{ |
|
|
| font-size:42px; |
| } |
|
|
| textarea{ |
|
|
| min-height:90px !important; |
| } |
| } |
