| |
| |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); |
|
|
| :root { |
| --peach: #ffad7a; |
| --peach-dark: #e8935c; |
| --lavender: #b8a9d9; |
| --sky-blue: #7accff; |
| --ink: #1f2937; |
| --slate: #4b5563; |
| --muted: #6b7280; |
| --bg-light: #f9fafb; |
| --surface: #ffffff; |
| --surface-soft: #fff7f1; |
| --border-default: #e5e7eb; |
| --border-subtle: #f3f4f6; |
| --accent-subtle: rgba(255, 173, 122, 0.14); |
| --shadow-sm: 0 1px 2px rgba(31, 41, 55, 0.05); |
| --shadow-md: 0 8px 24px rgba(31, 41, 55, 0.08); |
| --shadow-lg: 0 18px 48px rgba(31, 41, 55, 0.12); |
| --radius: 8px; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body, |
| .gradio-container { |
| background: |
| radial-gradient(circle at 7% 4%, rgba(255, 173, 122, 0.22), transparent 28%), |
| radial-gradient(circle at 88% 8%, rgba(122, 204, 255, 0.20), transparent 30%), |
| linear-gradient(180deg, #ffffff 0%, var(--bg-light) 44%, #f7f2fb 100%) !important; |
| color: var(--ink) !important; |
| font-family: Inter, "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif !important; |
| font-weight: 400; |
| letter-spacing: 0; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| .gradio-container { |
| max-width: 1180px !important; |
| margin: 0 auto !important; |
| } |
|
|
| .main, |
| .block-container { |
| background: transparent !important; |
| } |
|
|
| .block-container { |
| max-width: 1180px; |
| padding-top: 2rem; |
| padding-bottom: 2rem; |
| } |
|
|
| |
| .hf-hero, |
| .hero { |
| position: relative; |
| overflow: hidden; |
| background: |
| radial-gradient(circle at 20% 8%, rgba(255, 255, 255, 0.52), transparent 26%), |
| linear-gradient(135deg, var(--peach) 0%, var(--lavender) 54%, var(--sky-blue) 100%); |
| border: 1px solid rgba(255, 255, 255, 0.72); |
| border-radius: 16px; |
| box-shadow: var(--shadow-lg), 0 0 34px rgba(255, 173, 122, 0.18); |
| color: #ffffff; |
| margin: 1rem 0 1.25rem 0; |
| padding: clamp(1.25rem, 3vw, 2.25rem); |
| } |
|
|
| .hf-hero::after, |
| .hero::after { |
| content: ""; |
| position: absolute; |
| inset: auto -12% -45% auto; |
| width: 360px; |
| height: 360px; |
| background: rgba(255, 255, 255, 0.22); |
| border-radius: 999px; |
| pointer-events: none; |
| } |
|
|
| .hf-hero-grid, |
| .hf-hero-copy { |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .hf-hero-copy { |
| display: flex; |
| align-items: flex-start; |
| gap: 1rem; |
| } |
|
|
| .hf-icon { |
| align-items: center; |
| background: rgba(255, 255, 255, 0.24); |
| border: 1px solid rgba(255, 255, 255, 0.45); |
| border-radius: 8px; |
| box-shadow: var(--shadow-sm); |
| display: inline-flex; |
| flex: 0 0 auto; |
| font-size: 1.7rem; |
| height: 3.75rem; |
| justify-content: center; |
| width: 3.75rem; |
| } |
|
|
| .hf-badge { |
| background: rgba(255, 255, 255, 0.22); |
| border: 1px solid rgba(255, 255, 255, 0.42); |
| border-radius: 999px; |
| color: rgba(255, 255, 255, 0.96); |
| display: inline-flex; |
| font-size: 0.76rem; |
| font-weight: 800; |
| letter-spacing: 0.06em; |
| margin-bottom: 0.7rem; |
| padding: 0.34rem 0.7rem; |
| text-transform: uppercase; |
| } |
|
|
| .hf-hero h1, |
| .hero h1 { |
| color: #ffffff !important; |
| font-size: clamp(2rem, 4vw, 3.35rem); |
| font-weight: 800; |
| letter-spacing: 0; |
| line-height: 1.04; |
| margin: 0 0 0.45rem 0; |
| text-shadow: 0 2px 12px rgba(31, 41, 55, 0.18); |
| } |
|
|
| .hf-hero p, |
| .hero p { |
| color: rgba(255, 255, 255, 0.96) !important; |
| font-size: 1.03rem; |
| line-height: 1.65; |
| margin: 0; |
| max-width: 68ch; |
| } |
|
|
| .hf-chip-row, |
| .pill-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.55rem; |
| margin-top: 1.15rem; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| .hf-chip, |
| .badge, |
| .tech-tag { |
| background: rgba(255, 255, 255, 0.24); |
| border: 1px solid rgba(255, 255, 255, 0.45); |
| border-radius: 999px; |
| color: #ffffff; |
| display: inline-flex; |
| font-size: 0.86rem; |
| font-weight: 700; |
| padding: 0.42rem 0.75rem; |
| } |
|
|
| .hf-method-grid { |
| display: grid; |
| gap: 0.9rem; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| margin: 1rem 0; |
| } |
|
|
| .hf-method-card, |
| .glass-card, |
| .project-card, |
| .info-card, |
| .metric-card, |
| .stat-box, |
| .gradio-container .form, |
| .gradio-container .panel { |
| background: rgba(255, 255, 255, 0.88) !important; |
| border: 1px solid var(--border-default) !important; |
| border-radius: var(--radius) !important; |
| box-shadow: var(--shadow-md) !important; |
| } |
|
|
| .hf-method-card { |
| padding: 1rem; |
| } |
|
|
| .hf-method-card span { |
| color: var(--peach-dark); |
| display: block; |
| font-size: 0.78rem; |
| font-weight: 800; |
| letter-spacing: 0.04em; |
| margin-bottom: 0.35rem; |
| text-transform: uppercase; |
| } |
|
|
| .hf-method-card p { |
| color: var(--slate); |
| line-height: 1.55; |
| margin: 0; |
| } |
|
|
| .project-card, |
| .info-card, |
| .metric-card, |
| .stat-box { |
| padding: 1rem; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| h4, |
| .markdown-text h1, |
| .markdown-text h2, |
| .markdown-text h3 { |
| color: var(--ink) !important; |
| font-family: Inter, "Helvetica Neue", system-ui, sans-serif !important; |
| letter-spacing: 0; |
| } |
|
|
| p, |
| li, |
| label, |
| .markdown-text, |
| .markdown-text p, |
| .markdown-text span { |
| color: var(--slate) !important; |
| font-family: Inter, "Helvetica Neue", system-ui, sans-serif !important; |
| } |
|
|
| strong { |
| color: var(--ink); |
| font-weight: 700; |
| } |
|
|
| input, |
| select, |
| textarea, |
| .gr-textbox, |
| .gr-dropdown { |
| background: #ffffff !important; |
| border: 1px solid var(--border-default) !important; |
| border-radius: var(--radius) !important; |
| color: var(--ink) !important; |
| font-family: Inter, "Helvetica Neue", system-ui, sans-serif !important; |
| transition: border-color 0.15s ease, box-shadow 0.15s ease !important; |
| } |
|
|
| input:focus, |
| select:focus, |
| textarea:focus, |
| .gr-textbox:focus { |
| border-color: var(--peach) !important; |
| box-shadow: 0 0 0 3px var(--accent-subtle) !important; |
| outline: none !important; |
| } |
|
|
| button.primary, |
| button[class*="primary"], |
| div[data-testid="stButton"] > button { |
| background: linear-gradient(135deg, var(--peach) 0%, var(--peach-dark) 100%) !important; |
| border: 0 !important; |
| border-radius: var(--radius) !important; |
| box-shadow: 0 8px 20px rgba(255, 173, 122, 0.28) !important; |
| color: #ffffff !important; |
| font-family: Inter, "Helvetica Neue", system-ui, sans-serif !important; |
| font-weight: 800 !important; |
| padding: 0.72rem 1.1rem !important; |
| transition: transform 0.18s ease, box-shadow 0.18s ease !important; |
| } |
|
|
| button.primary:hover, |
| button[class*="primary"]:hover, |
| div[data-testid="stButton"] > button:hover { |
| box-shadow: 0 12px 26px rgba(255, 173, 122, 0.36) !important; |
| transform: translateY(-1px) !important; |
| } |
|
|
| button.secondary, |
| button[class*="secondary"] { |
| background: #ffffff !important; |
| border: 1px solid var(--border-default) !important; |
| border-radius: var(--radius) !important; |
| color: var(--ink) !important; |
| font-weight: 700 !important; |
| } |
|
|
| code, |
| pre { |
| border-radius: var(--radius) !important; |
| } |
|
|
| code { |
| background: #fff2e8 !important; |
| color: #9a4f1f !important; |
| } |
|
|
| pre { |
| background: #111827 !important; |
| border: 1px solid #273244 !important; |
| color: #f9fafb !important; |
| } |
|
|
| table { |
| border-collapse: collapse; |
| width: 100%; |
| } |
|
|
| th { |
| background: #fff2e8; |
| color: var(--ink); |
| font-weight: 800; |
| } |
|
|
| td, |
| th { |
| border-bottom: 1px solid var(--border-default); |
| padding: 0.7rem; |
| } |
|
|
| blockquote, |
| .markdown-text blockquote { |
| background: #faf9fc !important; |
| border-left: 3px solid var(--lavender) !important; |
| border-radius: 0 var(--radius) var(--radius) 0 !important; |
| color: var(--slate) !important; |
| margin: 0.5rem 0 !important; |
| padding: 0.75rem 1rem !important; |
| } |
|
|
| a { |
| color: #2774a9 !important; |
| font-weight: 700; |
| } |
|
|
| .hf-footer { |
| border-top: 1px solid var(--border-default); |
| color: var(--muted); |
| font-size: 0.92rem; |
| margin-top: 1.5rem; |
| padding: 1rem 0; |
| text-align: center; |
| } |
|
|
| .hf-footer strong { |
| color: var(--ink); |
| } |
|
|
| |
| div[data-testid="stHeader"], |
| div[data-testid="stToolbar"] { |
| background: transparent !important; |
| } |
|
|
| div[data-testid="stSidebar"] { |
| background: rgba(255, 255, 255, 0.82) !important; |
| border-right: 1px solid var(--border-default); |
| } |
|
|
| div[data-baseweb="input"], |
| div[data-baseweb="textarea"], |
| div[data-baseweb="select"] { |
| background: #ffffff !important; |
| } |
|
|
| div[data-testid="stTextInput"] input, |
| div[data-testid="stTextArea"] textarea, |
| div[data-testid="stSelectbox"] div { |
| border-radius: var(--radius) !important; |
| border-color: var(--border-default) !important; |
| } |
|
|
| div[data-testid="stMetric"] { |
| background: rgba(255, 255, 255, 0.9); |
| border: 1px solid var(--border-default); |
| border-radius: var(--radius); |
| box-shadow: var(--shadow-md); |
| padding: 0.8rem 1rem; |
| } |
|
|
| .stPlotlyChart { |
| background: rgba(255, 255, 255, 0.86); |
| border: 1px solid var(--border-default); |
| border-radius: var(--radius); |
| box-shadow: var(--shadow-sm); |
| padding: 0.3rem; |
| } |
|
|
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| .hf-hero, |
| .hf-method-card, |
| .metric-card, |
| .info-card { |
| animation: fadeIn 0.28s ease-out; |
| } |
|
|
| @media (max-width: 720px) { |
| .hf-hero-copy { |
| flex-direction: column; |
| } |
|
|
| .hf-icon { |
| height: 3.2rem; |
| width: 3.2rem; |
| } |
| } |
|
|
