| @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"); |
|
|
| :root { |
| --bg: #0f1215; |
| --bg-top: #15191d; |
| --surface: #171b20; |
| --surface-raised: #1d232a; |
| --surface-soft: #232a31; |
| --border: #2d353f; |
| --border-strong: #3a434e; |
| --text-primary: #eef2f5; |
| --text-secondary: #c7ced6; |
| --text-muted: #8e98a3; |
| --accent: #8d4638; |
| --accent-strong: #a75846; |
| --accent-soft: rgba(141, 70, 56, 0.16); |
| --success: #5f7968; |
| --warning: #8b7355; |
| --radius-lg: 18px; |
| --radius-md: 14px; |
| --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.32); |
| --shadow-md: 0 14px 36px rgba(0, 0, 0, 0.22); |
| } |
|
|
| body, |
| .gradio-container, |
| .dark .gradio-container { |
| background: |
| radial-gradient(circle at top, rgba(141, 70, 56, 0.08), transparent 30%), |
| linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 55%); |
| } |
|
|
| .gradio-container { |
| max-width: 1240px !important; |
| margin: 0 auto !important; |
| color: var(--text-primary) !important; |
| font-family: "IBM Plex Sans", system-ui, sans-serif !important; |
| padding-bottom: 2rem !important; |
| } |
|
|
| footer { |
| display: none !important; |
| } |
|
|
| .gradio-container code, |
| .status-meta code, |
| .citation-block { |
| font-family: "IBM Plex Mono", monospace !important; |
| } |
|
|
| .hero-banner { |
| position: relative; |
| overflow: hidden; |
| background: linear-gradient(180deg, rgba(24, 28, 33, 0.94) 0%, rgba(17, 20, 24, 0.98) 100%); |
| border: 1px solid var(--border-strong); |
| border-radius: 22px; |
| box-shadow: var(--shadow-lg); |
| padding: 2.3rem 2.5rem; |
| margin-bottom: 1.1rem; |
| } |
|
|
| .hero-banner::after { |
| content: ""; |
| position: absolute; |
| inset: 0; |
| background: linear-gradient(120deg, rgba(141, 70, 56, 0.12), transparent 45%); |
| pointer-events: none; |
| } |
|
|
| .hero-kicker { |
| position: relative; |
| z-index: 1; |
| color: var(--text-muted); |
| font-size: 0.75rem; |
| font-weight: 600; |
| letter-spacing: 0.16em; |
| text-transform: uppercase; |
| margin-bottom: 0.8rem; |
| } |
|
|
| .hero-banner h1 { |
| position: relative; |
| z-index: 1; |
| color: var(--text-primary) !important; |
| font-size: 2.55rem !important; |
| font-weight: 700 !important; |
| letter-spacing: -0.03em; |
| line-height: 1.02 !important; |
| margin: 0 0 0.85rem !important; |
| } |
|
|
| .hero-banner p { |
| position: relative; |
| z-index: 1; |
| max-width: 760px; |
| color: var(--text-secondary) !important; |
| font-size: 1.06rem !important; |
| line-height: 1.75 !important; |
| margin: 0; |
| } |
|
|
| .hero-subtitle { |
| position: relative; |
| z-index: 1; |
| margin-top: 1.2rem; |
| padding-top: 1rem; |
| border-top: 1px solid rgba(255, 255, 255, 0.08); |
| color: var(--text-muted); |
| font-size: 0.94rem; |
| line-height: 1.65; |
| } |
|
|
| .heritage-band { |
| height: 4px; |
| width: 100%; |
| border-radius: 999px; |
| background: linear-gradient(90deg, rgba(141, 70, 56, 0.9) 0%, rgba(198, 182, 149, 0.65) 48%, rgba(141, 70, 56, 0.9) 100%); |
| opacity: 0.72; |
| margin: 0 0 1.45rem; |
| } |
|
|
| .tab-nav { |
| border-bottom: 1px solid var(--border) !important; |
| margin-bottom: 0.8rem !important; |
| } |
|
|
| .tab-nav button { |
| color: var(--text-muted) !important; |
| background: transparent !important; |
| border: 1px solid transparent !important; |
| border-bottom: none !important; |
| border-radius: 14px 14px 0 0 !important; |
| font-weight: 600 !important; |
| font-size: 0.97rem !important; |
| letter-spacing: 0.01em; |
| padding: 0.9rem 1.2rem !important; |
| transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease !important; |
| } |
|
|
| .tab-nav button:hover { |
| color: var(--text-secondary) !important; |
| background: rgba(255, 255, 255, 0.03) !important; |
| } |
|
|
| .tab-nav button.selected { |
| color: var(--text-primary) !important; |
| background: var(--surface) !important; |
| border-color: var(--border) !important; |
| box-shadow: inset 0 2px 0 var(--accent); |
| } |
|
|
| .section-header, |
| .story-card, |
| .status-card, |
| .research-card, |
| .insight-card, |
| .research-section, |
| .example-card, |
| .culture-section, |
| .laikipiak-doc, |
| .voice-panel, |
| .stats-shell, |
| .about-panel { |
| background: linear-gradient(180deg, rgba(29, 35, 42, 0.94) 0%, rgba(21, 25, 30, 0.98) 100%); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-md); |
| } |
|
|
| .section-header, |
| .culture-section, |
| .research-section, |
| .laikipiak-doc, |
| .stats-shell, |
| .about-panel { |
| padding: 1.35rem 1.45rem; |
| } |
|
|
| .section-header { |
| margin-bottom: 0.9rem; |
| } |
|
|
| .section-kicker, |
| .status-kicker, |
| .research-kicker, |
| .insight-label, |
| .example-meta, |
| .stats-label { |
| color: var(--text-muted); |
| font-size: 0.74rem; |
| font-weight: 700; |
| letter-spacing: 0.14em; |
| text-transform: uppercase; |
| } |
|
|
| .section-header h2, |
| .research-section h2, |
| .research-section h3, |
| .culture-section h2, |
| .culture-section h3, |
| .laikipiak-doc h1, |
| .laikipiak-doc h2, |
| .laikipiak-doc h3, |
| .about-panel h3 { |
| color: var(--text-primary) !important; |
| margin-top: 0 !important; |
| margin-bottom: 0.6rem !important; |
| letter-spacing: -0.02em; |
| } |
|
|
| .section-copy, |
| .section-meta, |
| .workflow-note, |
| .story-card p, |
| .research-section p, |
| .research-section li, |
| .culture-section p, |
| .culture-section li, |
| .laikipiak-doc p, |
| .laikipiak-doc li, |
| .panel-copy, |
| .closing-note, |
| .voice-note, |
| .research-note, |
| .research-detail { |
| color: var(--text-secondary) !important; |
| line-height: 1.7; |
| } |
|
|
| .section-meta { |
| margin: 0.7rem 0 0; |
| color: var(--text-muted) !important; |
| font-size: 0.92rem; |
| } |
|
|
| .workflow-note, |
| .glossary-panel, |
| .voice-panel, |
| .composition-brief { |
| margin: 0.75rem 0 1rem; |
| border: 1px solid var(--border); |
| border-left: 3px solid var(--accent); |
| border-radius: var(--radius-md); |
| padding: 0.95rem 1rem; |
| background: rgba(23, 28, 33, 0.92); |
| box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); |
| } |
|
|
| .voice-panel.is-empty { |
| border-left-color: var(--border-strong); |
| } |
|
|
| .content-subheading { |
| color: var(--text-primary) !important; |
| font-size: 1.05rem !important; |
| font-weight: 600 !important; |
| margin: 1rem 0 0.45rem !important; |
| } |
|
|
| .subsection-copy { |
| color: var(--text-muted); |
| margin: 0 0 1rem; |
| line-height: 1.6; |
| } |
|
|
| .gr-button.primary, |
| button.primary { |
| background: var(--accent) !important; |
| border: 1px solid var(--accent) !important; |
| color: #fff !important; |
| font-weight: 600 !important; |
| border-radius: 12px !important; |
| box-shadow: 0 10px 24px rgba(141, 70, 56, 0.18) !important; |
| transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; |
| } |
|
|
| .gr-button.primary:hover, |
| button.primary:hover { |
| background: var(--accent-strong) !important; |
| border-color: var(--accent-strong) !important; |
| box-shadow: 0 12px 26px rgba(141, 70, 56, 0.24) !important; |
| } |
|
|
| .gr-button.secondary, |
| button.secondary, |
| .voice-button.secondary { |
| background: transparent !important; |
| border: 1px solid var(--border-strong) !important; |
| color: var(--text-secondary) !important; |
| border-radius: 12px !important; |
| font-weight: 600 !important; |
| } |
|
|
| .gr-button.secondary:hover, |
| button.secondary:hover, |
| .voice-button.secondary:hover { |
| background: rgba(255, 255, 255, 0.03) !important; |
| border-color: var(--text-muted) !important; |
| } |
|
|
| textarea, |
| .gr-textbox textarea, |
| .gr-textbox input, |
| .gr-dropdown, |
| select { |
| background: rgba(20, 24, 28, 0.96) !important; |
| color: var(--text-primary) !important; |
| border: 1px solid var(--border) !important; |
| border-radius: 14px !important; |
| box-shadow: none !important; |
| line-height: 1.65 !important; |
| } |
|
|
| textarea:focus, |
| .gr-textbox textarea:focus, |
| .gr-textbox input:focus, |
| select:focus { |
| border-color: var(--accent) !important; |
| box-shadow: 0 0 0 3px var(--accent-soft) !important; |
| } |
|
|
| .story-card { |
| padding: 1.3rem 1.35rem; |
| margin-bottom: 1rem; |
| } |
|
|
| .story-card h3, |
| .voice-heading, |
| .status-head, |
| .research-value, |
| .insight-value, |
| .stats-value { |
| color: var(--text-primary) !important; |
| } |
|
|
| .story-card h3 { |
| font-size: 1.08rem !important; |
| margin: 0 0 0.7rem !important; |
| } |
|
|
| .story-card details { |
| margin-top: 0.9rem; |
| } |
|
|
| .story-card summary { |
| cursor: pointer; |
| color: var(--text-secondary); |
| font-weight: 600; |
| list-style: none; |
| } |
|
|
| .story-card summary::-webkit-details-marker { |
| display: none; |
| } |
|
|
| .story-card summary::before { |
| content: "+"; |
| display: inline-block; |
| width: 1rem; |
| margin-right: 0.35rem; |
| color: var(--accent); |
| } |
|
|
| .story-card details[open] summary::before { |
| content: "-"; |
| } |
|
|
| .answer-text { |
| margin-top: 0.7rem !important; |
| color: var(--text-primary) !important; |
| } |
|
|
| .status-grid, |
| .research-grid, |
| .research-two-col, |
| .insight-grid, |
| .example-grid, |
| .stats-grid, |
| .about-grid { |
| display: grid; |
| gap: 1rem; |
| } |
|
|
| .status-grid { |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); |
| margin: 1rem 0 1.5rem; |
| } |
|
|
| .status-grid-single { |
| grid-template-columns: minmax(0, 1fr); |
| } |
|
|
| .status-card, |
| .research-card, |
| .insight-card, |
| .example-card, |
| .stats-card { |
| padding: 1rem 1.05rem; |
| } |
|
|
| .status-card { |
| border-top: 2px solid var(--border-strong); |
| } |
|
|
| .status-card.is-loaded { |
| border-top-color: var(--success); |
| } |
|
|
| .status-card.is-lazy { |
| border-top-color: var(--accent); |
| } |
|
|
| .status-card.is-unavailable { |
| border-top-color: var(--warning); |
| } |
|
|
| .status-head { |
| font-size: 1.02rem; |
| font-weight: 600; |
| margin-bottom: 0.35rem; |
| } |
|
|
| .status-detail { |
| color: var(--text-secondary); |
| margin: 0 0 0.75rem; |
| } |
|
|
| .status-meta { |
| color: var(--text-muted); |
| font-size: 0.86rem; |
| margin: 0; |
| } |
|
|
| .status-meta code, |
| .glossary-panel code, |
| .section-meta code { |
| color: var(--text-primary); |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 8px; |
| padding: 0.1rem 0.35rem; |
| } |
|
|
| .research-grid { |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| margin: 0 0 1.35rem; |
| } |
|
|
| .research-card { |
| border-top: 2px solid var(--accent); |
| } |
|
|
| .research-value, |
| .insight-value, |
| .stats-value { |
| font-size: 1.95rem; |
| font-weight: 700; |
| line-height: 1.08; |
| margin: 0.45rem 0 0.4rem; |
| } |
|
|
| .research-two-col { |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| margin-bottom: 1rem; |
| } |
|
|
| .insight-grid { |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); |
| margin: 1rem 0; |
| } |
|
|
| .example-grid { |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); |
| } |
|
|
| .composition-capability-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 1rem; |
| margin: 0.85rem 0 1.1rem; |
| } |
|
|
| .example-card { |
| border-left: 2px solid var(--border-strong); |
| } |
|
|
| .composition-capability-card { |
| background: rgba(19, 23, 28, 0.74); |
| border: 1px solid var(--border); |
| border-top: 2px solid var(--accent); |
| border-radius: var(--radius-md); |
| padding: 1rem 1.05rem; |
| } |
|
|
| .composition-capability-card .panel-copy { |
| margin: 0.6rem 0 0; |
| } |
|
|
| .glossary-panel { |
| margin-top: 0.9rem; |
| } |
|
|
| .composition-brief { |
| margin-top: 0.9rem; |
| } |
|
|
| .glossary-panel h3, |
| .glossary-panel p, |
| .glossary-panel li, |
| .glossary-panel strong, |
| .composition-brief h3, |
| .composition-brief p, |
| .composition-brief li, |
| .composition-brief strong { |
| color: var(--text-primary) !important; |
| } |
|
|
| .glossary-panel ul, |
| .composition-brief ul { |
| padding-left: 1.2rem; |
| } |
|
|
| .composition-brief code { |
| color: var(--text-primary); |
| background: rgba(255, 255, 255, 0.05); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 8px; |
| padding: 0.1rem 0.35rem; |
| } |
|
|
| .voice-heading { |
| font-size: 0.9rem; |
| font-weight: 700; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| margin-bottom: 0.75rem; |
| } |
|
|
| .voice-actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 0.7rem; |
| margin-bottom: 0.8rem; |
| } |
|
|
| .voice-button { |
| appearance: none; |
| background: var(--accent); |
| border: 1px solid var(--accent); |
| color: #fff; |
| border-radius: 12px; |
| cursor: pointer; |
| font-family: "IBM Plex Sans", system-ui, sans-serif; |
| font-size: 0.92rem; |
| font-weight: 600; |
| padding: 0.7rem 1rem; |
| transition: background 0.2s ease, border-color 0.2s ease; |
| } |
|
|
| .voice-button:hover { |
| background: var(--accent-strong); |
| border-color: var(--accent-strong); |
| } |
|
|
| .culture-section table, |
| .laikipiak-doc table { |
| width: 100%; |
| border-collapse: collapse; |
| margin: 0.75rem 0 0; |
| } |
|
|
| .culture-section th, |
| .culture-section td, |
| .laikipiak-doc th, |
| .laikipiak-doc td { |
| border-bottom: 1px solid var(--border); |
| padding: 0.75rem 0.6rem; |
| text-align: left; |
| color: var(--text-secondary); |
| } |
|
|
| .culture-section th, |
| .laikipiak-doc th { |
| color: var(--text-primary); |
| font-weight: 600; |
| } |
|
|
| .culture-section ul, |
| .research-section ul, |
| .laikipiak-doc ul, |
| .detail-list, |
| .stats-list { |
| margin: 0.65rem 0 0; |
| padding-left: 1.2rem; |
| } |
|
|
| .laikipiak-doc hr { |
| border: 0; |
| border-top: 1px solid var(--border); |
| margin: 1.2rem 0; |
| } |
|
|
| .laikipiak-doc strong, |
| .research-section strong, |
| .culture-section strong { |
| color: var(--text-primary); |
| } |
|
|
| .stats-shell { |
| margin-top: 1rem; |
| } |
|
|
| .stats-grid { |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| margin: 0.85rem 0 1.2rem; |
| } |
|
|
| .stats-card { |
| background: rgba(19, 23, 28, 0.66); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| } |
|
|
| .about-grid { |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); |
| margin-bottom: 1rem; |
| } |
|
|
| .data-table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
|
|
| .data-table th, |
| .data-table td { |
| text-align: left; |
| padding: 0.78rem 0; |
| border-bottom: 1px solid var(--border); |
| color: var(--text-secondary); |
| vertical-align: top; |
| } |
|
|
| .data-table th { |
| color: var(--text-primary); |
| font-weight: 600; |
| width: 140px; |
| } |
|
|
| .data-table tr:last-child th, |
| .data-table tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| .citation-block { |
| margin-top: 0.8rem; |
| padding: 1rem 1.05rem; |
| background: rgba(13, 16, 20, 0.92); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| font-size: 0.92rem; |
| line-height: 1.7; |
| word-break: break-word; |
| } |
|
|
| .closing-note { |
| margin-top: 1rem !important; |
| padding-top: 0.9rem; |
| border-top: 1px solid var(--border); |
| color: var(--text-muted) !important; |
| } |
|
|
| .footer-note { |
| margin-top: 2rem; |
| padding: 1rem 0 0; |
| border-top: 1px solid var(--border); |
| text-align: center; |
| color: var(--text-muted); |
| font-size: 0.88rem; |
| letter-spacing: 0.02em; |
| } |
|
|
| .gr-audio { |
| background: rgba(20, 24, 28, 0.92) !important; |
| border: 1px dashed var(--border-strong) !important; |
| border-radius: 14px !important; |
| } |
|
|
| .gr-audio:hover { |
| border-color: var(--accent) !important; |
| } |
|
|
| .gr-examples { |
| background: rgba(20, 24, 28, 0.7) !important; |
| border: 1px solid var(--border) !important; |
| border-radius: var(--radius-md) !important; |
| } |
|
|
| label { |
| color: var(--text-secondary) !important; |
| font-weight: 600 !important; |
| font-size: 0.94rem !important; |
| } |
|
|
| .gr-accordion { |
| background: rgba(21, 25, 30, 0.94) !important; |
| border: 1px solid var(--border) !important; |
| border-radius: var(--radius-md) !important; |
| } |
|
|
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--bg); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: #34404b; |
| border-radius: 999px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: #44515d; |
| } |
|
|
| @media (max-width: 768px) { |
| .hero-banner { |
| padding: 1.7rem 1.4rem; |
| } |
|
|
| .hero-banner h1 { |
| font-size: 1.9rem !important; |
| } |
|
|
| .research-grid, |
| .research-two-col, |
| .insight-grid, |
| .example-grid, |
| .composition-capability-grid, |
| .about-grid, |
| .stats-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .tab-nav button { |
| padding: 0.75rem 0.95rem !important; |
| } |
| } |
|
|
